I use this code for getting value from text box. But I can't able to get value.
$(function() {
var get = $(".name").val();
$('#test').click(function() {
alert('Textbox:' + get);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" class="name">
<input type="submit" value="click" name="test" id="test">
Get your value when you click on #test.
$(function() {
$('#test').click(function() {
var get = $('.name').val();
alert('Textbox:' + get);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" class="name">
<input type="submit" value="click" name="test" id="test">
The problem was that you were setting the get value at the beginning only, when the input box was empty. You have to update the value when you click on the submit button.
$(function() {
$('#test').click(function() {
let get = $(".name").val();
alert('Textbox:' + get);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" class="name">
<input type="submit" value="click" name="test" id="test">
Related
How can I know which form I clicked? Is it possible with a button class instead of buttons with id?
$(document).ready(function () {
$(".form-buttons").click(function () {
//I only want the form which corresponds to the button I clicked
var formDates = $(form).serialize()
alert ("You clicked "+formDates)
})
})
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
Yes use class instead of id for similar elements. Please try this.
Note: form-button is the class name in your HTML and not form-buttons
$(document).ready(function () {
$(".form-button").click(function () {
var formDates = $(this).closest('form').serialize();
alert ("You clicked "+formDates)
})
})
I think you be looking for
$('.form-button').on('click', function () {
alert($(this).parents('form').attr('id')); // Check the ID of the form clicked
});
something Maybe Like mentioned above.
You can get the name of the element by using the this keyword which refer, in a DOM event, to the cibled element :
$(document).ready(function () {
$(".form-buttons").click(function () {
alert('You clicked the form' + this.parentElement.getAttribute('id'));
})
})
You can do this in a few different ways. You can traverse up the DOM and see which form is used or -and this is my favorite- you can submit the form!
Solution 1: Traversing up the DOM
<script>
$(document).ready(function () {
$(".form-button").click(function () {
var clicked_form = $(this).parent();
var formDates = clicked_form.serialize();
alert ("You clicked "+formDates);
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
</body>
Solution 2: Submit the form
You already are using the form, so why not submit it? Change the buttons to input elements with type submit and intercept the submit event, like this. This is how I think it should be done. It is also better for user experience because the user can just submit the form by pressing enter.
<script>
$(document).ready(function () {
$("form").on('submit', function (e) {
e.preventDefault();
var formDates = $(this).serialize()
alert ("You clicked "+formDates)
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
</body>
Check this fiddle on how I would do it.
https://jsfiddle.net/xtfeugav/
Simple use
$("form").submit(function(e) {
to listen for every submit on all the forms you have. To get the ID of the form you use
var formid = $(this).attr('id');
I used e.preventDefault(); to prevent the form don't update the page.
Remember to use <input type="submit" value="Submit"> on your forms to make this work.
Its a simple code, hope it helps.
I would like to count number of submitted form by user with javascript
and then put the number of submitted form in a value attribute of an input type hidden and then retrieve that value with PHP (with the name attribute of the input hidden)
Here is a simple code I have tried, but it didn't work :
form.html
<form method="post" action="submit.php">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname"/>
<input type="hidden" name="nb_submit" value="" id="nb"/>
<input type="submit" value="OK" onclick="count_nb_submit()"/>
</form>
after the html form ended, I have put the javascript code:
<script type="text/javascript">
var nb=0;
function count_nb_submit()
{
nb ++;
return nb;
document.getElementById('nb').value=nb;
}
</script>
submit.php
<?php
echo $_POST["nb_submit"] ;
?>
In your script you're returning before you've finished your function.
You should only use return when you want to stop the function and return a result. Anything after return will not be read.
This is what your code should look like:
<script type="text/javascript">
var nb=0;
function count_nb_submit() {
nb++;
document.getElementById('nb').value=nb;
return nb;
}
</script>
You are using return before setting the value to field, remove the return hope it will work.The function should be -
function count_nb_submit()
{
// calculate values
document.getElementById('nb').value= //the value you want to assign;
}
JS CODE :
<script type="text/javascript">
var nb = 0;
function count_nb_submit() {
nb++;
var myform = document.getElementById('test');
document.getElementById("nb").value = nb;
myform.submit();
}
</script>
Form CODE :
<form method="post" name="test" action="submit.php" id="test" target="_blank">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname" onblur="count_nb_submit();"/>
<input type="hidden" name="nb_submit" value="0" id="nb"/>
<input type="button" value="OK" onclick="count_nb_submit();" />
</form>
<script type="text/javascript">
var nb = 0;
function count_nb_submit()
{
nb++;
var myform = document.getElementById('test');
document.getElementById("nb").value = nb;
myform.submit();
}
</script>
<form method="post" name="test" action="submit.php" id="test" target="_blank">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname" />
<input type="hidden" name="nb_submit" value="0" id="nb"/>
<input type="button" value="OK" onclick="count_nb_submit();" />
</form>
I am extremely new to JavaScript, so bear with me.
I have the following code:
<input id="test" name="test" type="text" value="" />
<input id="test" type="button" value="Go!" />
<script type="text/javascript">
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
</script>
I would like the code to only be executed upon a button click. The function is to add the user input data to the end of the url and then upon the button click, load that url.
As of now, when I load the page, it automatically executes and goes to the url.
You have two input fields with the same ID, that's a no go!
Change the second one to something different!
Put your current javascript code into a function
function clickHandler(event) {
// Your code...
}
Attach an event listener to your container
var myContainer;
// assign element from DOM
myContainer = document.getElementById(ID_OF_CONTAINER);
// attach event handler
myContainer.addEventListener('click', clickHandler);
That should do the trick
<input id="test" name="test" type="text" value="" />
<input id="test2" type="button" onclick="fnc()" value="Go!" />
<script type="text/javascript">
function fnc(){
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
}
</script>
You need to wrap your code in a function, and then call the function based on an event. Here, the onclick event of the button. NOTE that IDs must be unique. Change your code to:
<input id="test" name="test" type="text" value="" />
<input id="test2" type="button" value="Go!" onclick="foo()" />
<script type="text/javascript">
function foo(){
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
}
</script>
jsFiddle example
Note that ID's are unique, and that you would use an event listener for that
<input id="test" name="test" type="text" value="" />
<input id="button" type="button" value="Go!" />
<script type="text/javascript">
document.getElementById('button').addEventListener('click', function() {
var val = document.getElementById('test').value;
window.location.href="http://www.thenewendurancefitness.com/" + val;
}, false):
</script>
<form onsubmit="return submit()">
<input id="test" name="test" type="text" value="" />
<input id="submit" type="submit" value="Go!" />
</form>
<script type="text/javascript">
function submit() {
location.href="http://www.thenewendurancefitness.com/"+document.getElementById('test').value;
}
</script>
I have a checkbox with a value of U
i want to put this value into a text input when the checkbox is checked.
how can i do this using javascript or jquery? I need to be able to do it on multiple checkboxes and input text fields too
HTML
<input type="checkbox" value="U" id="checkBox"/>
<input type="text" value="" id="textInput" />
JQUERY
$("#checkBox").change(function(){
$("#textInput").val($(this).val());
});
DEMO
Try this,
HTML
<label><input type="checkbox" value="U" />Check</label>
<input type="text" />
SCRIPT
$('input[type="checkbox"]').on('click',function(){
var is_checked=$(this).prop('checked');
var val='';
if(is_checked)
val=this.value;
$('input[type="text"]').val(val);
});
Working Demo
the simpliest way to do this :o)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var checkboxInput = document.getElementById('checkboxInput'),
textInput = document.getElementById('textInput');
checkboxInput.addEventListener('click', UpdateTextInput, false);
};
function UpdateTextInput () {
if(checkboxInput.checked) {
textInput.value = checkboxInput.value;
}
else {
textInput.value = '';
}
}
</script>
</head>
<body>
<input type="checkbox" id="checkboxInput" value="U"/>
<input type="text" id="textInput" />
</body>
</html>
Assuming one textbox is associated with every checkbox like below.
HTML Pattern :
<input type="checkbox" value="test1" id="test1" checked><label>Test</label>
<input type="text" class="text1"id="textbox1" name="textbox1" value="">
jQuery:
$('input[type="checkbox"]').change(function() {
var vals = $(this).val();
if($(this).is(':checked')){
$(this).next().next("input[type='text']").val(vals);
}else{
$(this).next().next("input[type='text']").val("");
}
});
Here is the working demo : http://jsfiddle.net/uH4us/
I have this form http://jsfiddle.net/thiswolf/XDsSt/ with four identical inputs and buttons.The problem is,each section is updates its own unique data in the database so when updating,its important the submit button i click updates the database with the input from that section only.
My function is
$(document).ready(function() {
$(".xx").live('click', function(){
alert('clicked');
});
});
How do i make sure the button click is unique to that section?.
Use an ID value instead for each input button. This way, jQuery can identify it like so:
$('#button_tag');
HTML:
<html>
<head></head>
<body>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn1" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn2" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn3" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn4" type="submit" class="xx" value="Submit">
</section>
</body>
</html>
Javascript:
$(document).ready(function () {
$(".xx").live('click', function () {
alert('clicked ' + $(this).attr('id'));
});
});
JsFiddle:
http://jsfiddle.net/XDsSt/7/
Get the corresponding section that button belongs to . Then access the elements inside that. You may use the jQuery closest()/parent()(if only one layer of hierarchy of controls) function for that.
$(document).ready(function() {
$(".xx").live('click', function(e){
e.preventDefault(); //if you want to prevent normal form submit
var item=$(this);
var sectionClicked=item.closest("section");
//Let's alert the first text box
alert(sectionClicked.find("input").first().val());
//do whatever with the items belongs the current section
});
});
Sample : http://jsfiddle.net/XDsSt/8/
I recommend you to switch to jQuery on instead of live as it is deprecated.
$(document).ready(function() {
$(".xx").live('click', function() {
$('section').has(this).find(':input:text').each(function() {
alert( this.value ) ;
});
});
});
Demo
If possible then instead of .live(), use .on() with jQUery 1.7+, because live() is deprecated.
$(document).ready(function() {
$("body").on('click', '.xx', function() {
$('section').has(this).find(':input:text').each(function() {
alert( this.value ) ;
});
});
});
Demo
if id is not an option - I don't understand that , but you can put multiple classes in buttons
<input type="button" class="xx btn1" ... >
$(document).ready(function() {
$(".xx").live('click', function(){ // look into on instead on live
if $(this).hasclass('btn1');{
alert('clicked');
}
});
});