Is it possible with Javascript to hide the checked-status of a radio button so that on a form submit the submit-request fails b/c of missing information?
For example: I have a group of radio buttons
<form action="?modul=daDaaaah&subModul=someCoolThingy" method="post">
<input type="radio" name="mygroup" id="nod_1" value="great" />
<input type="radio" name="mygroup" id="nod_2" value="greater" />
<input type="radio" name="mygroup" id="nod_3" value="awesome" />
<input type="radio" name="mygroup" id="nod_4" value="junk" />
<input type="radio" name="mygroup" id="nod_5" value="foo" />
<input type="submit" name="edit" value="Edit" />
</form>
Now I am checking the radio button with the id=1 and by submitting it (dunno whether I got the button correct, but I sorta guess it is correct) the server should get a request where it says mygroup=great (right?).
Now is there a way to have that radio button checked and hidden it at the same time?
I am asking b/c somehow a javascript I am using is supposedly hiding this status (everywhere but in IE) by somehow altering the DOM or what do I know and I can't seem to get the right request nor find the reason why or how it does it.
If I am being unclear, please say so.
EDIT: One javascript that has this effect can be found here http://www.frequency-decoder.com/demo/table-sort-revisited/js/paginate.js but others do so as well :(
EDIT: Changed ID-names. Still doesn't work.
One thing is you can not have ids that begin with a number. So your radio buttons should be something like rad1, rad2, etc.
If the radio has disabled="true" then the value will not be present in the request so you could check for that.
Related
Proceed </button>
<input type="checkbox" name="checkbox3" value="yes">
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
I have a checkbox and a button which will take me to next page. But, before I press the button the check box has to be ticked. If not, a label has to be displayed below the check box saying "accept to rules first". Help? Also, it would be great if i can highlight the checkbox to red if i click proceed without checking the checkbox. Can use javascript/jquery.
Try this it works
<form action="page.html">
<input type="checkbox" name="checkbox3" value="yes" required>
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
<input type="submit" name ="submit"/>
</form>
To get you started:
<input id="checkboxAgree" type="checkbox" name="checkbox3" value="yes">
function checkAgree()
{
if (document.getElementbyId("checkboxAgree").getAttribute("checked") )//checkbox is checked
{
location.href = "page.html"; //load the next page.
}
else
{
Alert("You need to check the box before you can continue");
}
}
document.getElementById("proceed-button").addEventListener("click", checkAgree ,false);
addEventListener add an onclick event to the button. When clicked this executes the function checkAgree. When the checkbox has the attribute checked it is checked and the ifwill render true. location.href will load page.html.
Please delete the a that surrounds your button.
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 would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act
Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
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(...)
I need to get the class attribute of checked radio button, with name="radio".
Used the code that's working fine in Firefox, but fails in IE.
val = $('input:radio[name=radio]:checked').attr('class');
How can i accomplish this?
There is no psuedo-class :radio. I think you meant [type=radio].
As comments says, I think you should use type instead of name. But i think you have named your input as radio because you can find this specific input. If you just use type selector you will catch every single selected radio input on page.
<input type="radio" name="radio" class="ey" /> Male<br />
So, if your page have more forms, you should specify a parent or form to avoid conflicts. Set a id for your form and try to find it by form id and radio type like this:
<form id="myForm">
<input type="radio" name="radio" class="ey" /> Male<br />
</form>
val = $("#myform input[type='radio']:checked").attr('class');
I hope it can help you :)