loop and submit form jquery - javascript

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.

Related

how to disable and enable textbox when a checkbox is checked

I have here multiple checkboxes which data is from the database. I want that the textbox will be remained disable until I checked or clicked the checkbox. lets just say this is the data that came from the database for example.
$(function() {
$('.check').click(function() {
if ($(this).is(':checked')) {
$('.checks').removeAttr('disabled');
$('.checks').focus();
} else {
$('.checks').attr('disabled', 'disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>
Sure, you can reduce what you have to just the following, using $(this) to refer to the specific checkbox you're checking/unchecking:
$(function() {
$('.check').click(function() {
$(this).next().prop('disabled', !$(this).is(':checked'))
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>
$(function() {
$('.check').click(function() {
if ($(this).is(':checked')) {
$(this).next('.checks').removeAttr('disabled');
$(this).next('.checks').focus();
} else {
$(this).next('.checks').attr('disabled', 'disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>

Radio buttons in the form, if one checked then unchecked the others?

I have three different group of radio buttons in my form. If I click on the radio button I don't see attribute checked set to true. I'm wondering what is the best way to handle this in JQuery/JavaScript? Here is example:
$("input[type=radio]").on('click', function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frmhs_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
Function above did not change/set the attribute checked=true on the element that I clicked. I would like to see selected element with an attribute checked true and all other check boxes to be set to false.
var radioInputs = $("#myForm input[type=radio]")
radioInputs.on('change',function() {
var $this = $(this)
if ($this.is(':checked')) {
radioInputs.not($this).removeAttr('checked')
}
})
Your second input in conditions was named frmhs_cond instead of frm_cond
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frm_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>

How to load data with ajax and jquery from external db with no page refresh

I have got a problem with this small script. I would like to query db Content on a simple html page with no page refresh.
<form method="get" name="formrrv" id="formrrv">
<input type="hidden" name="calculate" value="1">
<input type="hidden" name="func" value="rrvform">
<div class="searchbox">
<input type="checkbox" value="0" name="sb"> no<br>
<input type="checkbox" value="1" name="sb"> yes<br>
<script>
$('input[type="checkbox"][name="sb"]').on('change', function() {
$('input[type="checkbox"][name="sb"]').not(this).prop('checked', ! this.checked);
});
</script>
<input type="checkbox" value="1" name="status"> Single<br>
<input type="checkbox" value="2" name="status"> family<br>
<script>
$('input[type="checkbox"][name="status"]').on('change', function() {
$('input[type="checkbox"][name="status"]').not(this).prop('checked', ! this.checked);
});
</script>
<input id="maxage" name="maxage" value="">
<input name="price" id="price" name="price" value=""> EUR
<br>
<button class="submit" name="submit" onclick="getPage();">search</button>
<br>
</div>
</form>
<div id="output">werwerwerwewerwer</div>
<script>
function getPage() {
$('#output').html('Hole Daten');
jQuery.ajax({
url: "rrv2.php",
data: {
calculate:'1',
func:'rrvform',
sb:sb,
status:status,
maxage:maxage,
price:price
},
type: "get",
success:function(data){$('#output').html(data);}
});
}
</script>
So rrv2.php is defintely working if vars are transfered per get. Can someone please help?
This seems to work fine:
<form method="get" name="formrrv" id="formrrv">
<input type="hidden" name="calculate" value="1">
<input type="hidden" name="func" value="rrvform">
<div class="searchbox">
<input type="checkbox" value="0" name="sb"> no<br>
<input type="checkbox" value="1" name="sb"> yes<br>
<input type="checkbox" value="1" name="status"> Single<br>
<input type="checkbox" value="2" name="status"> family<br>
<input id="maxage" name="maxage" value="">
<input name="price" id="price" name="price" value=""> EUR
<br>
<button class="submit" name="submit" id="submit-button">search</button>
<br>
</div>
</form>
<div id="output">werwerwerwewerwer</div>
<script>
$(document).on('click', '#submit-button', function(e) {
e.preventDefault();
jQuery.ajax({
url: "rrv2.php",
data: $('#formrrv').serialize(),
type: 'GET', // I think GET is default, if so this can be removed
beforeSend: function() {
$('#output').html('Hole Daten');
},
success: function(data) {
$('#output').html(data);
}
});
});
</script>
I would suggest adding some validation to make sure at least one of your checkboxes is checked or better still, change them to radio buttons with your default pre-selected.

How to check all checkboxes using JS?

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

Append multiple variables(params) to url for ajax call

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.

Categories

Resources