As you may know, Reset buttons in a form can not reset checkboxes to their initial status. How can I make that happen either with javascript or PHP or jquery or ...?
Here is the code I have:
<form method="POST">
<input type="text" name="name" id="name" value="default value" required >
<input type="checkbox" name="group[]" id="checkbox1" value="0" checked>
<input type="checkbox" name="group[]" id="checkbox2" value="1" >
<button type="reset"> Reset </button>
<button type="submit"> Submit </button>
</form>
Iterate over all your input elements and uncheck the ones which are checked.
var allInputs = $( ":input" );
for(var i = 0; i < allInputs.length; i++) {
if( $( 'input[type="checkbox"]:checked' ) )
$( this ).prop('checked', false);
}
Or as James pointed out, this could be done in one line like this:
$( 'input[type="checkbox"]' ).prop('checked', false);
Try this:
var resetForm = function(){
$('#form')[0].reset();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="POST" id="form">
<input type="text" name="name" id="name" value="default value" required >
<input type="checkbox" name="group[]" id="checkbox1" value="0" checked>
<input type="checkbox" name="group[]" id="checkbox2" value="1" >
<button type="reset" onclick="resetForm()"> Reset </button>
<button type="submit"> Submit </button>
</form>
Related
I have this HTML:
<form id="my form">
<input type="checkbox" name="interest" value="swim"/>
<input type="checkbox" name="interest" value="baseball"/>
<input type="checkbox" name="interest" value="basketball"/>
<input type="checkbox" name="interest" value="badminton"/>
<input type="checkbox" name="interest" value="running"/>
</form>
And I want to show the result in <p onclick=""></p>
How do I type javascript to reveal what I choose in "checkbox"?
First of all you have provided a valid value for id. Instead of "my form", you can put "myform" or whatever but alphanumeric values which can not start with number.
<form id="myform">
<input type="checkbox" name="interest" value="swim"/>
<input type="checkbox" name="interest" value="baseball"/>
<input type="checkbox" name="interest" value="basketball"/>
<input type="checkbox" name="interest" value="badminton"/>
<input type="checkbox" name="interest" value="running"/>
</form>
<p id="pResult" onclick="showCheckedValues(event);"></p>
In Javascript you can collect all checkboxes and in <p> element put a function which will check, checked checkboxes and place their concated values like
<script>
var checkboxes;
function showCheckedValues(ev){
var pElement = ev.target;
if(checkboxes){
var checkedValues= [];
checkboxes.forEach(function(x){
if(x.checked){
checkedValues.push(x.value)
}
});
pElement.innerHTML = checkedValues.join(',');
}
}
window.onload = function(){
checkboxes = document.querySelectorAll('input[type=checkbox]');
}
</script>
I want to add attribute checked=true with multiple inputs like this:
<form id="students" method="post">
<div class="row">
<input id="aa" name="a[]" value="Smith" type="text" class="a1" >
<input id="bb" name="b[]" value="Alen" type="text" class="b1" >
<input id="save" name="save[]" value="" type="checkbox" class="ab" disabled="disabled" >
</div>
<div class="row">
<input id="aa" name="a[]" value="" type="text" class="a1" >
<input id="bb" name="b[]" value="" type="text" class="b1" >
<input id="save" name="save[]" value="" type="checkbox" class="ab" >
</div>
<div class="row">
<input id="aa" name="a[]" value="Bill" type="text" class="a1" >
<input id="bb" name="b[]" value="Mark" type="text" class="b1" >
<input id="save" name="save[]" value="" type="checkbox" class="ab" >
</div>
<div class="row">
<input id="aa" name="a[]" value="" type="text" class="a1" >
<input id="bb" name="b[]" value="" type="text" class="b1" >
<input id="save" name="save[]" value="" type="checkbox" class="ab" >
</div>
<div class="row">
<input id="aa" name="a[]" value="Kell" type="text" class="a1" >
<input id="bb" name="b[]" value="Keith" type="text" class="b1" >
<input id="save" name="save[]" value="" type="checkbox" class="ab" >
</div>
<input type="submit" value="submit" id="submitbutton" class="insert" onclick="checkform()"/>
</form>
And each line input has no value I add attribute checked=false of checkbox. How I do. Who can help me? thanks.
This is javaScript :
<script type="text/javascript">
function checkform() {
var myForm = document.forms.students;
var myControls = myForm.elements['a[]'];
for (var i = 0; i < myControls.length; i++) {
if(myControls[i].value==""){
$(".ab").attr("checked", true); //check input had value then
}
}
}
</script>
Your question says: "... I add attribute checked=false..."
But your code says:
$(".ab").attr("checked",true); //not false like the question says
Please tell me that's not it ;)
What about something like this? Check out this JSFiddle.
You can swap them around if I misunderstood and you want inputs with something in them to be checked and not vice versa.
In the fiddle I changed it so that the button click is handled by jquery instead of the onClick() attribute of the input.
function checkform() {
var myForm = document.forms.students;
$(myForm).find('input[name="a[]"], input[name="b[]"]').filter(function(){
if(!$.trim(this.value)){
$(this).siblings('.ab').prop('checked', true)
}else{
$(this).siblings('.ab').prop('checked', false)
}
});
}
I also updated it to check both a[] and b[].
Additionally, I removed the myControls variable since you don't need it here.
This allows me to change the category of photos without leaving the page. IT WORKS.
Next step - The pre-defined category of a photo has a button with a green background and the other two have red. When making a new choice I want the pressed button to turn green and the other two buttons for that photo to turn to/stay red. The green css is c_on and the red css is c_off.
How can I set the right css to the right button with javascript/ajax/jquery?
Any help greatly appreciated. (Styles are defined correctly in my code but I could not get it to paste here properly so I used a comment).
JS:
<script type="text/javascript">
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: "test_ajax_update_code.php",
data: $(this).serialize(),
});
e.preventDefault();
});
});
</script>
CSS:
.c_on {color: #000;background-color:#F00;}
.c_off {color: #000;background-color:#0F0;}
HTML:
<img src="myfoto1.jpg" width="500" height="333" border="0"><br>
<form id="form1">
<input name="num" type="hidden" value="1373" >
<input name="shw" type="hidden" value="1" >
<input type="submit" value="1" class="c_on">
</form>
<form id="form2">
<input name="num" type="hidden" value="1373" >
<input name="shw" type="hidden" value="2" >
<input type="submit" value="2" class="c_off">
</form>
<form id="form3">
<input name="num" type="hidden" value="1373" >
<input name="shw" type="hidden" value="3" >
<input type="submit" value="3" class="c_off">
</form>
<img src="myfoto2.jpg" width="500" height="333" border="0"><br>
<form id="form1">
<input name="num" type="hidden" value="1374" >
<input name="shw" type="hidden" value="1" >
<input type="submit" value="1" class="c_off">
</form>
<form id="form2">
<input name="num" type="hidden" value="1374" >
<input name="shw" type="hidden" value="2" >
<input type="submit" value="2" class="c_on">
</form>
<form id="form3">
<input name="num" type="hidden" value="1374" >
<input name="shw" type="hidden" value="3" >
<input type="submit" value="3" class="c_off">
</form>
You can do it as follows:
// set all buttons to c_off
$('input[type="submit"]').removeClass('c_on').addClass('c_off');
// set the submitted one to c_on
$(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');
This would make your code look as follows:
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: "test_ajax_update_code.php",
data: $(this).serialize(),
});
// set all buttons to c_off
$('input[type="submit"]').removeClass('c_on').addClass('c_off');
// set the submitted one to c_on
$(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');
e.preventDefault();
});
});
I find it hard to understand exactly what you mean, but with a couple of events and booleans you should probably be able to do something like this fairly easy.
var image_1 = false
if (image_1 === true) {
//change button styles
}
var element = getElement('div.image') // example
element.addEventListener('click', function () {
image_1 = true'
}
And the wouldn't even be any ajax involved. For example you could submit when all are true.
Hope this helps
$('input:submit').on('click',function(){
$('input:submit').removeClass('c_on').addClass('c_off');
$(this).removeClass('c_off').addClass('c_on');
})
You should add a click event for each button, which allow you to remove any .c_on class, and apply it to the clicked button.
$('input[type="submit"]').on('click', function () {
$(".c_on").removeClass('c_on').addClass('c_off');
$(this).removeClass('c_off').addClass('c_on');
}}
Try this solution and check theCSS for appropriate color to the class.
UPDATE:
id must be unique. Hence I have changed the id of the forms to class.
Then I have added new data-image property to differentiate the set of buttons.
Updated Code snippets:
$(function() {
$('form').on('click', 'input[type="submit"]', function(e) {
$.ajax({
type: 'post',
url: "test_ajax_update_code.php",
data: $(this).parent().serialize(),
});
var clicked = $(this),
imageName = clicked.data("image");
clicked.removeClass("c_off").addClass("c_on");
$('input[type="submit"]').each(function() {
var self = $(this);
if (!clicked.is(self)) {
if (self.hasClass("c_on") && imageName == self.data("image"))
self.removeClass("c_on").addClass("c_off");
}
});
e.preventDefault();
});
});
.c_off {
color: #000;
background-color: #F00;
}
.c_on {
color: #000;
background-color: #0F0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img src="myfoto1.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
<input name="num" type="hidden" value="1373">
<input name="shw" type="hidden" value="1">
<input type="submit" value="1" class="c_on" data-image="img1">
</form>
<form class="form2">
<input name="num" type="hidden" value="1373">
<input name="shw" type="hidden" value="2">
<input type="submit" value="2" class="c_off" data-image="img1">
</form>
<form class="form3">
<input name="num" type="hidden" value="1373">
<input name="shw" type="hidden" value="3">
<input type="submit" value="3" class="c_off" data-image="img1">
</form>
<img src="myfoto2.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
<input name="num" type="hidden" value="1374">
<input name="shw" type="hidden" value="1">
<input type="submit" value="1" class="c_off" data-image="img2">
</form>
<form class="form2">
<input name="num" type="hidden" value="1374">
<input name="shw" type="hidden" value="2">
<input type="submit" value="2" class="c_on" data-image="img2">
</form>
<form class="form3">
<input name="num" type="hidden" value="1374">
<input name="shw" type="hidden" value="3">
<input type="submit" value="3" class="c_off" data-image="img2">
</form>
http://jsfiddle.net/KYDPd
Is there a way to make the minimum number be 0, and not allow the user to go below 0 when clicking down?
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="this.form.name.value++;" >
<input type="button" value="down" onclick="this.form.name.value--;">
</form>
If separate buttons are not necessary and HTML5 is an option you could just use this:
<form>
<input type="number" min="0" name="name" value="0" />
</form>
This should do the trick. Check what the value is before you allow each operation. Also added an onchange to the text input to inforce your minimum 0 requirement. Agree with other answer that this should be in a function though.
http://jsfiddle.net/xqV6V/1/
<form>
<input type="text" name="name" value="0" onchange="if(this.value<0){this.value=0;}" />
<input type="button" value="up" onclick="if(this.form.name.value>=0){this.form.name.value++;}" >
<input type="button" value="down" onclick="if(this.form.name.value>0){this.form.name.value--};">
</form>
You should probably put this JavaScript in a function.
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="this.form.name.value++;" >
<input type="button" value="down" onclick="if(this.form.name.value>0)this.form.name.value--;">
</form>
Additional Answer with functions.
<script>
function ud_find_text(self) {
var children = self.parentNode.getElementsByTagName('input');
for (var i = 0; i < children.length; i++) {
if (children[i].getAttribute('type') == 'text') {
return children[i];
}
}
}
function ud_inc(self) {
var text = ud_find_text(self);
text.value++;
}
function ud_dec(self) {
var text = ud_find_text(self);
if (text.value > 0) text.value--;
}
</script>
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="ud_inc(this)" >
<input type="button" value="down" onclick="ud_dec(this)">
</form>
I've got a short question colegues! Here it is: is this the fastest script way to change the input field's value when some of the 3 buttons are clicked? Here is the script:
<form name="viewtype" action="javascript:alert(document.viewtype.option.value);">
<input name="option" type="hidden" value="" />
<input name="" type="button" onclick="document.viewtype.option.value='0';"/>
<input name="" type="button" onclick="document.viewtype.option.value='1';"/>
<input name="" type="button" onclick="document.viewtype.option.value='2';"/>
<input name="" type="submit"/>
</form>
I'd do it like so:
HTML:
<form name="viewtype">
<input type="hidden" name="option">
<input type="button" value="0">
<input type="button" value="1">
<input type="button" value="2">
<input type="submit">
</form>
JavaScript:
var form = document.forms.viewtype,
buttons = form.querySelectorAll( '[type="button"]' );
[].forEach.call( buttons, function ( button ) {
button.onclick = function () {
form.elements.option.value = this.value;
};
});
form.onsubmit = function ( e ) {
e.preventDefault();
alert( this.elements.option.value );
};
Live demo: http://jsfiddle.net/9B7du/1/