I am trying to append values from a checked checkbox to a url that later would be used for an ajax call. As mentioned I would only like to have the values appended to the url if checkbox is checked. If a user checks and then unchecks, this would indicate not to add the value to the url. Below I have some basic foundation code. How can I append multiple items to the url ?
<form>
<input type="checkbox" value="1" id="item1" />
<input type="checkbox" value="2" id="item2" />
<input type="checkbox" value="3" id="item3" />
<input type="submit" id="submitForm" value="Submit Form" />
<form>
<script>
$('#submitForm').click(function() {
$('checkbox').click(function() {
$.getJSON('www.mysite.com/mypage.php?id='+item1+item2+item3)
});
});
</script>
First give your checkboxes a specific name like;
<form name="checkbox_form" id="checkbox_form">
<input type="checkbox" value="1" id="item1" name="val1" />
<input type="checkbox" value="2" id="item2" name="val2" />
<input type="checkbox" value="3" id="item3" name="val3" />
<input type="submit" id="submitForm" value="Submit Form" />
<form>
And your js will be;
$('#submitForm').click(function() {
var url = "'www.mysite.com/mypage.php";
if ($("#checkbox_form").serialize().length > 0) {
url += "?" + $("#checkbox_form").serialize();
}
alert("Your ajax url will be: " + url);
$.getJSON(url)
});
Here is a working fiddle: http://jsfiddle.net/cubuzoa/UKV3r/2/
You can use JQuery method serialize() as follows:
var query = $('form').serialize()
and after:
$.getJSON('www.mysite.com/mypage.php?'+query );
Only necessary to provide the input field attribute "name":
<form>
<input type="checkbox" value="1" id="item1" name="item1"/>
<input type="checkbox" value="2" id="item2" name="item2"/>
<input type="checkbox" value="3" id="item3" name="item3"/>
<input type="submit" id="submitForm" value="Submit Form" />
<form>
and you get:
www.mysite.com/mypage.php?item1=1&item2=2&item3=3
if all checkboxes are selected.
Related
I have 2 form. When I submit frm1, i have some checked option and use variable checkedValues to store it.
I loop in each checked option, change value to frm2, submit it and open a popup after 3 second. But it not work with submit form 2 and setTimeout function.
Does anyone have any ideas to solve this?
<form action="" method="post" name='frm1'>
<input type="checkbox" name="1" id="1" value="1" class="checkbox">
<input type="checkbox" name="2" id="2" value="1" class="checkbox">
<input type="checkbox" name="3" id="3" value="0" class="checkbox">
<input type="checkbox" name="4" id="4" value="0" class="checkbox">
<input type="submit" value='add'>
</form>
<form action='http://example.com' method='post' name='frm2' target="_blank">
<input type="text" name="fname" class="form-control" value=''>
<input type="text" name="fvalue"class="form-control" value=''>
</form>
<script>
$('#add').click(function(){
var store= <?php echo json_encode($store)?>;
var checkedValues = $('input:checkbox:checked').map(function() {
return this.id;
}).get();
$.each(checkedValues, function(index,val) {
document.frm2.fname.value = store[val]['name'];
document.frm2.fvalue.value = store[val]['value'];
document.frm2.submit(); // not working
setTimeout(function () { // not working
window.open("http://example.com/client, "_blank"), 3000);
});
});
});
</script>
The problem here is that your first form is being submitted, so your page gets reloaded and the second part of the script isn't executed. To prevent that you should use AJAX.
<input type="checkbox" name="1" id="1" value="1" class="checkbox">
<input type="checkbox" name="2" id="2" value="1" class="checkbox">
<input type="checkbox" name="3" id="3" value="0" class="checkbox">
<input type="checkbox" name="4" id="4" value="0" class="checkbox">
<button id="bt-add">add</button>
<form action='http://example.com' method='post' id="second-form" name='frm2' target="_blank">
<input type="text" name="name" class="form-control" value=''>
<input type="text" name="value" class="form-control" value=''>
</form>
<script>
$('#bt-add').click(function(){
var store= <?php echo json_encode($store)?>;
var checkedValues = $('input:checkbox:checked').map(function() {
return this.id;
}).get();
$.each(checkedValues, function(index,val) {
$("#second-form").find("input[name='name']").val(store[val]['name']);
$("#second-form").find("input[name='value']").val(store[val]['value']);
$.ajax({
url: "http://example.com",
type:'GET',
data: $("#second-form").serialize()
});
});
setTimeout(function () {
window.open("http://example.com/client", "_blank");
}, 3000);
});
</script>
Fiddle here.
I want to check all checkboxes using javascript. When I click on submit button all the checkboxes should be checked. However all the checkboxes are checked just for a few seconds.
What am I doing wrong?
html:
<form method="post" name="myform">
<input type="checkbox" name="h" value="1" id="g">Reading<br/>
<input type="checkbox" name="h" value="2" id="g">php<br/>
<input type="checkbox" name="h" value="3" id="g">playing<br/>
<input type="checkbox" name="h" value="4" id="g">Gaming<br/>
<input type="checkbox" name="h" value="5" id="g">Coding<br/>
<input type="submit" name="sub" value="submit" onclick="checkall(document.myform.h)" >
</form>
javascript code:
<script type="text/javascript">
function checkall(chk){
for(var i = 0; i < chk.length; i++) {
chk[i].checked = true;
}
}
</script>
the problem is you are using a submit button within a form, which on click will submit the form.
So one solution is to change the button form a submit button to a normal button which will not trigger the submit of the form.
function checkall(chk) {
var i;
for (i = 0; i < chk.length; i++) {
chk[i].checked = true;
//return true;
}
}
<form method="post" name="myform">
<input type="checkbox" name="h" value="1" id="g">Reading
<br/>
<input type="checkbox" name="h" value="2" id="g">php
<br/>
<input type="checkbox" name="h" value="3" id="g">playing
<br/>
<input type="checkbox" name="h" value="4" id="g">Gaming
<br/>
<input type="checkbox" name="h" value="5" id="g">Coding
<br/>
<!--<input type="radio" name="gen" value="male">Male<br/>-->
<!--<input type="radio" name="gen" value="female">Female<br/>-->
<input type="button" name="sub" value="submit" onclick="checkall(document.myform.h)">
</form>
You created a form.And form will be submit after click on submit button.You can use following approach to select all checkbox only.
step 1- Write following statement in html.
<input type="checkbox" name="h" value="1" class="g">Reading<br/>
<input type="checkbox" name="h" value="2" class="g">php<br/>
<input type="checkbox" name="h" value="3" class="g">playing<br/>
<input type="checkbox" name="h" value="4" class="g">Gaming<br/>
<input type="checkbox" name="h" value="5" class="g">Coding<br/>
<input type="button" name="sub" value="check all" id='custom_button'>
step 2- Write following statement in js file-
jQuery('#custom_button').click(function(){
jQuery('.g').each(function() { //loop through each checkbox
this.checked = true; //deselect all checkboxes with class "checkbox1"
});
});
Above statement will select all checkbox after click on button.
If you want to check example please use this link - http://jsfiddle.net/oxg3p1ny/1/
your code is working just stop from form submit will solve your problem use <form method="post" name="myform" onsubmit="return false"> and use ajax to get data.
Working Fiddle
I am facing problem when using javscript to update inner html of form. I want to dynamically add input type with same name in form and then send this form data via jquery ajax serialize.
Eg.
function addinput()
{
//update form html to add following
<input type="text" value="1" name="addtext" />
<input type="text" value="2" name="addtext" />
<input type="text" value="3" name="addtext" />
<input type="text" value="4" name="addtext" />
<input type="text" value="5" name="addtext" />
}
function initiate()
{
document.myform.action="initiateMultipleReceiptReceiptAction.action?next=0";
var formdata=$('form[name$="myform"]').serialize();
}
Click to add more
<form id="myform" action="initiate();">
<input type="submit" value="submit" />
</form>
now the problem is that formdata is not showing $addtext value
I have a form like this;
<form action="out.php" method="post">
<input type="hidden" name="a" value="a" />
<input type="hidden" name="b" value="b" />
<input type="hidden" name="c" value="c" />
<input type="hidden" name="d" value="d" />
<input type="hidden" name="e" maxlength="60" value="e" />
<input type="hidden" name="f" value="f" />
<input type="submit" value="Create & Send">
</form>
this form can not be seen by users. They just see a submit button like "Create Label & Send To Customer" .
But they need to input Customer's eMail Address. So i have a js code the submit button trigger it. And it asks the email address.
The JS code:
$('#dialog_prompt').click(function(){
$.prompt("What is customer's email?","",
function(value){
$.msg("So, you like '"+value+"'?");
},
function(){
$.msg("You clicked cancel!");
});
});
So my problem is;
when the user submit the button and input the customer's email and hit the ok, JS must send the values from the form & email address to the "out.php".
So how can I send form data via JS?
HTML:
<form action="out.php" method="post">
<input type="hidden" name="em" value="" class="customeremail" />
<input type="hidden" name="a" value="a" />
<input type="hidden" name="b" value="b" />
<input type="hidden" name="c" value="c" />
<input type="hidden" name="d" value="d" />
<input type="hidden" name="e" maxlength="60" value="e" />
<input type="hidden" name="f" value="f" />
<input type="submit" value="Create & Send">
</form>
JS:
$('#dialog_prompt').click(function(){
$.prompt("What is customer's email?","",
function(value){
$('form .customeremail').val(value);
$('form').ajaxSubmit();
},
function(){
$.msg("You clicked cancel!");
});
});
You can send the details using AJAX.
$('#dialog_prompt').click(function(){
$.prompt("What is customer's email?","",
function(value){
$.msg("So, you like '"+value+"'?");
$.ajax({
url: "out.php", // url to which details are send
type: 'POST',
data: $('form').serialize(), // pass form details
} ).done (function(data) { // on success
});
},
function(){
$.msg("You clicked cancel!");
});
});
Now you can access the values passed through AJAX in out.php page using $_POST.
Note : The serialize() method creates a URL encoded text string by serializing form values.
I have a group of radio buttons like this
<input type="radio" name="test" value="h" />
<input type="radio" name="test" value="g" />
<input type="radio" name="test" value="s" />
Now I am serialzing the form to save their values, next time from the saved serialized form values I want load these radio buttons correctly, but its not showing the selected radio button correctly.
I am showing the form's serialized values into the page like this
var obj = $('form').serializeObject();
for(var r in obj){
if(obj.hasOwnProperty(r)){
var nr = obj[r];
$('[name='+r+']').val(nr);
}
}
HTML:
<form id="foo">
<input type="radio" name="test" value="h" />
<input type="radio" name="test" value="g" />
<input type="radio" name="test" value="s" />
<button id="button">foo</button>
</form>
<form id="bar">
<input type="radio" name="test" value="h" />
<input type="radio" name="test" value="g" />
<input type="radio" name="test" value="s" />
</form>
Javascript:
(function() {
$('#button').click(function(e) {
e.preventDefault();
var foo = $('#foo').serializeArray();
for(var i in foo) {
if(foo.hasOwnProperty(i)) {
$('[name="'+foo[i]['name']+'"][value="'+foo[i]['value']+'"]').each(function() {
$(this).attr('checked', true);
})
}
}
})
})();