i am submitting data through FormData and i am trying to alert values of check boxes which are checked in my form, right now i am able to make it work for only one check box.
how can i alert values of all those check boxes which are checked.
var formData = new FormData(document.getElementById("update-form"));
$("#myCheckbox1").on('change',function(){
if($("#myCheckbox1").is(':checked'))
$('#hiddenInput1').val(1);
else{
$('#hiddenInput1').val(0);
}
});
alert(
$('#hiddenInput1').val()
);
Check Box 1:
<input type="hidden" value="0" name="visa" id="hiddenInput1">
<input type="checkbox" value="1" id="myCheckbox1">
Example Check Box 2:
<input type="hidden" value="0" name="visa1" id="hiddenInput2">
<input type="checkbox" value="1" id="myCheckbox2">
How to Alert Values of all check boxes which are checked in FormData without repeating code. i found similar example online but none were using FormData.
Form Name is : update-form
You can make use of start with attribute selector to select all checkboxes having id start with myCheckbox and attach it to change event handler.
Inside handler, you can read if checkbox is checked or not and change value of hidden input which is placed before checkbox.
See below code
$(function(){
$("input[type=checkbox][id^=myCheckbox]").on('change',function(){
var isChecked = $(this).is(':checked');
var $hiddenInput = $(this).prev('input[type=hidden]');
if(isChecked)
$hiddenInput.val(1);
else{
$hiddenInput.val(0);
}
alert($hiddenInput.val());
});
//iterate all hidden input on form submit
$('#update-form').submit(function(){
$('input[id^=hiddenUnput]').each(function(){
alert($(this).val());
});
$(this).submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Exammple Check Box 1:
<input type="hidden" value="0" name="visa" id="hiddenInput1">
<input type="checkbox" value="1" id="myCheckbox1">
Example Check Box 2:
<input type="hidden" value="0" name="visa" id="hiddenInput2">
<input type="checkbox" value="1" id="myCheckbox2">
Related
I made a very easy one HTML input column. I added JavaScript to it with a checkbox in it.
When I clicked check box checked I want write the text or unchecked the text box read only how to solve my problem. Give for example for my code
<input type="text" id="inputID" value="abc"></input>
<input type="checkbox" id="myCheck" checked>
<script>
document.getElementById('inputID').readOnly = true;
</script>
Add an event listener to the change event on the checkbox.
<input type="text" id="inputID" value="abc" readonly></input>
<input type="checkbox" id="myCheck" >
<script>
var checkbox = document.getElementById('myCheck');
checkbox.addEventListener('change', function() {
document.getElementById('inputID').readOnly = !this.checked;
});
</script>
Working fiddle
I still learning javascript, i think this is ez question, but i can't fix it with my experience (already try search some source), this my code
This is example:
PHP
<?php
<input type="checkbox" checked="checked" value="1" class="box_1">1</label> // checked
<input type="checkbox" value="2" class="box_1">2</label> //unchecked
<input type="checkbox" checked="checked" value="3" class="box_1">3</label> // checked
<input type="checkbox" value="4" class="box_1">4</label> //unchecked
<input type="checkbox" checked="checked" value="5" class="box_1">5</label> // checked
<input type="button" value="Submit" id="button-price" class="button" />
?>
I try check the check box with javasript by class, (i can't use by name&id because i use looping)
I try build condition like this Javascript :
$('#button-price').bind('click', function() {
var box = '';
$(".box_1").each(function(){ // for each checkbox in class box_1(1-5)
if(this).attr("checked","true"){ // if this checked box is true
var value = (this.value).toLowerCase(); // take the value
box = box + value; // store to box
}
});
});
when click button then take value and store to box,
I know there error in here if(this).attr("checked","true"){
what it should be writing the condition?
Try using prop instead of attr
if($(this).prop('checked')) {
}
Hope this helps.
You can use the jQuery .prop() method to check the checkbox state:
if ($(this).prop("checked")) { // if this checked box is true
box += $(this).val().toLowerCase(); // store to box
}
Suggestion: (this.value).toLowerCase() will work but try not mixing up jQuery code with pure javascript. Instead of it you can use the solution above.
This question already has answers here:
Posting both checked and unchecked checkboxes
(3 answers)
POST unchecked HTML checkboxes
(44 answers)
Closed 1 year ago.
How to submit value 1 if a checkbox in a checkbox array is checked, and submit 0 if it's unchecked? I tried this but no luck. I am trying to grab this array in a php array when the form is submitted. Please help!
<input id = 'testName0' type = 'checkbox' name = 'check[0]' value = '1' checked>
<input id='testNameHidden0' type='hidden' value='0' name='check[0]'>
<input id = 'testName1' type = 'checkbox' name='check[1]' value = '1' unchekced>
<input id='testNameHidden1' type='hidden' value='0' name='check[1]'>
<input type = 'submit' value = 'Save Changes'>
>
<script>
if(document.getElementById('testName0').checked){
document.getElementById('testNameHidden0').disabled = true;
}
</script>
<script>
if(document.getElementById('testName1').checked){
document.getElementById('testNameHidden1').disabled = true;
}
</script>
Simplest one, no javascript required, just put a hidden input before the checkbox:
<input type="hidden" name="check[0]" value="0" />
<input type="checkbox" name="check[0]" value="1" />
Inputs need to have the same name. If the checkbox is checked then value 1 will be submitted, otherwise value 0 from the hidden input.
Your case javascript solution, no hidden inputs needed:
<script type="text/javascript">
// when page is ready
$(document).ready(function() {
// on form submit
$("#form").on('submit', function() {
// to each unchecked checkbox
$(this + 'input[type=checkbox]:not(:checked)').each(function () {
// set value 0 and check it
$(this).attr('checked', true).val(0);
});
})
})
</script>
<form method="post" id="form">
<input type="checkbox" name="check[0]" value="1" />
<input type="checkbox" name="check[1]" value="1" />
<input type="submit" value="Save Changes" />
</form>
PHP solution, no hidden inputs needed:
<?php
// if data is posted, set value to 1, else to 0
$check_0 = isset($_POST['check'][0]) ? 1 : 0;
$check_1 = isset($_POST['check'][1]) ? 1 : 0;
?>
<form method="post">
<input type="checkbox" name="check[0]" value="1" />
<input type="checkbox" name="check[1]" value="1" />
<input type="submit" value="Save Changes" />
</form>
EDIT: the javascript solution is not valid anymore as of jquery 1.6. Based on this, a more proper solution is the following:
<script type="text/javascript">
// when page is ready
$(document).ready(function() {
// on form submit
$("#form").on('submit', function() {
// to each unchecked checkbox
$(this).find('input[type=checkbox]:not(:checked)').prop('checked', true).val(0);
})
})
</script>
<form method="post" id="form">
<input type="checkbox" name="check[0]" value="1" />
<input type="checkbox" name="check[1]" value="1" />
<input type="submit" value="Save Changes" />
</form>
A better solution that solved this for me.
Problem: Both the hidden and the checked were sending to my server.
Solution:
if len(key) == 1 {
value = false
} else {
value = true
}
This way, if len(key) is 1 I know that only the hidden field was being send. Any other scenario means that the box is checked. Simple and easy.
Well I have a much more simple code that worked well for me:
<input type="checkbox" value="true" id="checkBox">
Then the JQuery code:
var checkBoxValue = $('#checkBox').is(':checked')?$('#checkBox').val():false
I used a ternary operator to set the value on checked and unchecked condition.
I have a group of radio buttons and a single text input field. When I click on the text input the radio buttons become unchecked using JavaScript, but when I type something into the form field and then reselect a radio button I can not get the text to be deleted. Here is my code so far, If someone could help me get the text box to clear all input when I select a radio I know im close.
<input type="radio" id="radio1" name="radios" checked>
<label for="radio1">$10</label>
<input type="radio" id="radio2" name="radios" >
<label for="radio2">$25</label>
<input type="radio" id="radio3" name="radios" >
<label for="radio3">$50</label>
<input type="radio" id="radio4" name="radios" >
<label for="radio4">$100</label>
<input type="text" id="textInput">
<script>
<!-- to remove radio on text input click-->
$('#textInput').click(function () {
$.each($('input[type=radio]'), function () {
$(this).removeAttr("checked");
});
});
<!-- to remove text on text radio button click-->
$('input[type=radio]').click(function () {
$.each($('#textInput'), function () {
$(this).removeAttr("input");
});
});
</script>
Just remove their value using val(). input isn't an attribute, it's a tag name.
$.each($('#textInput'), function () {
$(this).val("");
Just use .val(), also you don't need $.each
$('input[type=radio]').click(function () {
$('#textInput').val('');
});
You have to use .val("") to set the text box value to empty.
Try this,
$('#textInput').each(function () {
$(this).val("");
});
Suppose I have four check-boxes in a form Check-a,Check-b,Check-c,Check-d.
Check-a and Check-b are already selected.I can get which check-box is checked or not unchecked by using Jquery.
Now I have unchecked Check-a. So Check-a were checked and I had made this unchecked from checked. So now Check-c and Check-d were already unchecked and Check-a is unchecked by me.I am in search of a way to track which are unchecked from checked and which were previously unchecked.
Can Anyone Tell me a way ?
Assuming the same HTML as #definitelyundefinable, this does kind of the same thing but it's slightly cleaner because it doesn't use hidden fields, and fake arrays (as strings in the hidden field)
$(function() {
var history = [];
$("input").click(function() {
history.push({
id: this.id,
checked: this.checked
});
});
// If you'd like, you can initialize the array
// with the initial values with the following line
$("input").click();
});
if you need a kind of click-history, why not just use an extra field?
html:
<form>
<div>
<input type="checkbox" name="fruit" value="o" id="orange" />
<label for="orange">orange</label>
</div>
<div>
<input type="checkbox" name="fruit" value="a" id="apple" />
<label for="apple">apple</label>
</div>
<div>
<input type="text" name="history" id="history" />
</div>
</form>
jquery script:
$("input").click(function() {
$("#history").val( $("#history").val() + $(this).val() + ";");
});
you can make it hidden and evaluate the ; separated list afterwards..