I have 2 checkboxes inside a form and both those checkboxes were wrapped inside a form.
For one of form I have added the attribute autocomplete="off".
Below is the code snippet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<form name="chkBoxForm" >
<div>
<input type="checkbox" value="100" name="product"/>My Checkbox1
</div>
</form>
<form name="chkBoxForm" autocomplete="off">
<div>
<input type="checkbox" value="200" name="product"/>My Checkbox2
</div>
</form>
</body>
</html>
Now my problem here if we check those checkboxes manually and if we press F5, then the checkbox with attribute autocomplete="off" got unchecked. But the checkbox which doesn't have that attribute remains checked. This happens in FireFox 22.
This behavior varies from Browser to Browser.
In IE, both the checkboxes remains checked and in Chrome both the checkboxes were unchecked.
But when I press enter in the address bar, it gets unchecked in all the browsers.
Can someone tell me how to have those checkboxes unchecked always when we press F5?
I am aware that this can be handled through Javascript.
Is there any other html way of handling this?
No, there is no way in simple HTML. Javascript might be your only solution at this time..
Loop through all inputs in javascript, check if they're indeed a checkbox and set them to unchecked:
var inputs = document.getElementsByTagName('input');
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type == 'checkbox') {
inputs[i].checked = false;
}
}
wrap it up in a onload listener and you should be fine then :)
jQuery < 1.6
jQuery
$('input[type=checkbox]').removeAttr('checked');
Or
<!-- checked -->
<input type='checkbox' name='foo' value='bar' checked=''/>
<!-- unchecked -->
<input type='checkbox' class='inputUncheck' name='foo' value='bar' checked=''/>
<input type='checkbox' class='inputUncheck' name='foo' value='bar'/>
$('input.inputUncheck').removeAttr('checked');
jQuery >= 1.6 (pointed out by Wilfred Hughes)
jQuery
$('input[type=checkbox]').prop('checked', false);
Or
<!-- checked -->
<input type='checkbox' name='foo' value='bar' checked=''/>
<!-- unchecked -->
<input type='checkbox' class='inputUncheck' name='foo' value='bar' checked=''/>
<input type='checkbox' class='inputUncheck' name='foo' value='bar'/>
$('input.inputUncheck').prop('checked', false);
If you have a checkbox with an id checkbox_id, you can set its state with JS with prop('checked', false) or prop('checked', true)
$('#checkbox_id').prop('checked', false);
One quick solution that came to mind :-
<input type="checkbox" id="markitem" name="markitem" value="1" onchange="GetMarkedItems(1)">
<label for="markitem" style="position:absolute; top:1px; left:165px;"> </label>
<!-- Fire the below javascript everytime the page reloads -->
<script type=text/javascript>
document.getElementById("markitem").checked = false;
</script>
<!-- Tested on Latest FF, Chrome, Opera and IE. -->
An easy way , only HTML, no javascript, no jQuery
<input name="box1" type="hidden" value="0" />
<input name="box1" type="checkbox" value="1" />
This is browser specific behavior and is a way for making filling up forms more convenient to users (like reloading the page when an error has been encountered and not losing what they just typed). So there is no sure way to disable this across browsers short of setting the default values on page load using javascript.
Firefox though seems to disable this feature when you specify the header:
Cache-Control: no-store
See this question.
Well I guess you can use checked="false". That is the html way to leave a checkbox unchecked.
You can refer to http://www.w3schools.com/jsref/dom_obj_checkbox.asp.
Related
Thanks in advance for the help on this. I have a special requirement on my page where I needed a checkbox to "act" like a radio button, so only one can be checked at a time. To achieve that I used this snippet below"
<script>
$('input:checkbox').on('change', function() {
$('input:checked').not($(this)).closest('.w-checkbox').click();
});
</script>
It works perfectly on Chrome. However, it doesn't work on Safari and allows more than one checkbox to be clicked. I was wondering if anyone had ideas on how to solve this because I have tried many alternatives and unfortunately need to have the checkbox
The proper way to uncheck a checkbox is by changing the checked property.
$('input:checkbox.w-checkbox').change(function() {
$('input:checkbox.w-checkbox').not(this).prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="w-checkbox" />
<input type="checkbox" class="w-checkbox" />
<input type="checkbox" class="w-checkbox" />
I'm trying to select a radio button with an id (lets say the ID is "radio") and then automatically click a button with a type of submit inside of a form with an id of "multifee". I want these two things to automatically happen upon page load. Any suggestions on how to do this with javascript?
<form method="post" action="#" id="multifees" onsubmit="feeForm.submit(this); return false;">
<input type="radio" name="fee[1][options][]" id="radio" value="1" class="validate-one-required-by-name">
<button type="submit" class="button">Add</button>
</form>
So far I have no javascript started because I'm not even sure where to begin.
When declaring your radio button, you can add the attribute checked so that it is autoselected even when the page loads.
<input type="radio" name="fee[1][options][]" id="radio" value="1" class="validate-one-required-by-name" checked>
If you want to auto-submit, you can just make Javascript click for you.
<script type="text/javascript">
document.getElementById('sumbit').click();
</script>
If you want the script to work, you have to place the script after <body> so that the element can been loaded onto the page or else it won't know what button to look for since it may not have been loaded yet. Make sure to give your submit button an id as well.
$('#radio').check();
$('#submit').click();
EDITS: with javascript
document.getElementById('radio').checked=true;
document.getElementById("multifees").submit();
In pure Javascript try this in a window.onload handler:
document.getElementById('radio').check();
document.getElementById('submit').click();
Based on what you're asking for, there are really only a couple things you need.
A radio list which one is preselected:
<form name="thisForm" id="thisForm" method="post" action="[your destination]">
<input type="radio" name="choice1" value="choice1" checked /> choice<br />
<input type="radio" name="choice1" value="choice2"/> choice2<br />
<input type="radio" name="choice1" value="choice3"/> choice3<br />
</form>
And a Javascript function to submit the form:
<script type="text/JavaScript" language="JavaScript">
function submitForm() {
document.getElementById("thisForm").submit();
}
// submitForm();
</script>
I have the call to the function commented out on purpose, or you would throw you page into an infinite loop.
You can check the radio button (#radio) like so:
document.getElementByID("radio").checked = true;
Or actually within the html using the checked property:
<input type="radio" checked>
To auto-submit:
document.getElementsByClassName("button").click();
Or:
document.getElementByID("multifees").submit();
I have four radio buttons. If I select the last radio button then one textbox is appearing. I handled this scenario by jquery. Now I want to validate in such a way that if user gets this textbox means if user checked the last radio button, then he should provide some text.But in my case, if I check any one of the radio button, its telling to provide some text. The code is like:
<input type="radio" name="bus_plan" id="smallBtn" value="1" />1
<input type="radio" name="bus_plan" id="smallBtn" value="2" />2
<input type="radio" name="bus_plan" id="smallBtn" value="3" />3
<input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
<span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
<div class="reg-line" id="pr_code_id" style="display:none">
<div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
<input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
<br />
<div>
<div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:radio[name=bus_plan]").click(function(){
var values = $(this).val();
if(values == 'Promotional'){
$('#pr_code_id').show();
}else{
$('#pr_code_id').hide();
}
});
});
</script>
and in js if I alert the value of document.getElementById('bus_prcode').value then always it is showing Promotional code, which is only for last radio button value.
Your code is a bit of a mess which is the root of this problem. Remember, one element per ID.
You may also find it helpful to look at jQuery .is(), for example:
$('input[value="Promotional"]').is(':checked')
n.b. I do not suggest the above, you should use identifiers in the appropriate way first.
Also worth noting that your code works fine for me using Chrome. See an example (which I have expanded for you) here: http://jsbin.com/ofujal/3/
You should not have an element with the same ID (your radio buttons). Also, you're getting the textbox by running document.getElementById('bus_prcode') and not the radio button. You should give a unique ID to your last radio button, e.g. btnPromotional, then bind click to it:
$("#btnPromotional").click(...)
There is a problem with jquery mobile, form element- checkbox. So, i have a code in .cs file:
email = Request.Form["Email"];
password = Request.Form["password"];
rememberMe = Request.Form["remember_me"].AsBool();
As usually, this code have to fill variables with form data, but state of jquery mobile checkbox doesn't use 'checked' HTML markup. (http://jquerymobile.com/test/docs/forms/checkboxes/index.html)
It's just change class in label like 'ui-checkbox-off/ui-checkbox-on'.
So, is it possible without big amount of code to check state of checkbox, created by jquery mobile?
Thx.
Maybe you can do something like this?
<div data-role="fieldcontain" id="divCheckbox">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>
JS
$("#divCheckbox").click(function() {
var checkbox = $(this).find("input[type='checkbox']");
var label = $(this).find(".ui-checkbox-on");
checkbox.prop("checked", label.length);
});
Not 100% sure but at least the DOM changes (see http://jsfiddle.net/rcSza/4/) Otherwise you can do something with a hidden field..
Hoping someone has a solution to this weirdness on Firefox 3.
I basically have 3 radio buttons and 3 text input fields (see following code):
<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked" onclick="SetVals();" />
<input type="text" name="text1" id="text1" />
<input type="radio" name="group1" id="custom" value="custom_img" onclick="SetVals();" />
<input type="text" name="text2" id="text2" />
<input type="radio" name="group1" id="vector" value="vector_img" onclick="SetVals();" />
<input type="text" name="text3" id="text3" />
Now, every time I click on a specific Radio Button, the text input elements for the other two buttons should get cleared and also become disabled (see following code).
function SetVals() { // using JQuery + straight JS for this...
$(document).ready(function() {
$(":radio").click(function(event) {
// use event.target to determine which radio button was clicked
if (event.target.id=="preloaded") {
document.getElementByID("text1").disabled=false;
$("#text2").val("");
$("#text3").val("");
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;
} else if (event.target.id=="custom") {
document.getElementByID("text2").disabled=false;
$("#text1").val("");
$("#text3").val("");
document.getElementById("text1").disabled=true;
document.getElementById("text3").disabled=true;
} else if (event.target.id=="vector") {
document.getElementByID("text3").disabled=false;
$("#text1").val("");
$("#text2").val("");
document.getElementById("text1").disabled=true;
document.getElementById("text2").disabled=true;
}
});
});
}
Also, when the page is initially loaded, the text2 and text3 input fields are disabled via javascript as the text1 field is checked by default:
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;
The problem I'm having is that it requires 2 (two) clicks to get this to work on Firefox. On Internet Explorer, it works as expected.
So, when clicking on a radio button the first time - nothing happens. When clicking on it a second time, that's when the Onclick Event is triggered.
NOTE: I'm using JQuery for this, but have also used straight Javascript to no avail.
You can simply copy and paste my code on an editor and open the page with Firefox to see issue firsthand.
Has anybody else encountered this? Is it some sort of Firefox bug? If so, is there a work-around?
Any and all help, comments, suggestions, and input are welcome.
Thanks in advance!
Since you are using jQuery to assign the event handler for the radio button click, you can remove the onClick attribute.
This should work for you:
$(function() {
$(":radio").click(function(event) {
if (this.id == "preloaded") {
$("#text1").removeAttr("disabled");
$("#text2, #text3").val("").attr("disabled", true);
} else if (this.id == "custom") {
$("#text2").removeAttr("disabled");
$("#text1, #text3").val("").attr("disabled", true);
} else if (this.id == "vector") {
$("#text3").removeAttr("disabled");
$("#text1, #text2").val("").attr("disabled", true);
}
});
$("#text2, #text3").val("").attr("disabled", true);
});
Code example on jsfiddle.
Side note: since you are using jQuery you might as well use jQuery for almost all dom interactions since mixing the two will eventually lead to some pain. Let jQuery hide the inconsistencies in browsers.
You started using jQuery, and then returned to vanilla JavaScript... but you mis-typed the getElementById() function.
I would stick with jQuery if you have it, it will avoid IE bugs with this particular method too.
Cleaner HTML
<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked"/>
<input type="text" name="text1" id="text1"/>
<input type="radio" name="group1" id="custom" value="custom_img"/>
<input type="text" name="text2" id="text2"/>
<input type="radio" name="group1" id="vector" value="vector_img"/>
<input type="text" name="text3" id="text3"/>
and the jQuery...
$(document).ready(function(){
//bind the click event to the radio buttons
$(':radio').click(function(){
var radioID = $(this).attr('id');
if(radioID == 'preloaded'){
$('#text1').removeAttr('disabled');
$('#text2, #text3').val('').attr('disabled','disabled');
} else if(radioID == 'custom'){
$('#text2').removeAttr('disabled');
$('#text1, #text3').val('').attr('disabled','disabled');
} else if(radioID == 'vector'){
$('#text3').removeAttr('disabled');
$('#text1, #text2').val('').attr('disabled','disabled');
}
});
});
You could try the .change() event handler. I think that could work better.
EDIT: There are issues with the .change() event and IE.