|
HTML - Form Radio Button - Only One Can Be Clicked
I have a form with radio buttons. I want it so that only one is selectable at a time and if radiobutton 1 is selected then whenever another radiobutton is selected radiobutton 1 will be deselected.
Here is the code: HTML Code: <html> <head> <title> </title> <script src="script.js"> </script> </head> <body> <form> <input type="radio" id="hbEgg" value="hb"> <label for="hb"> Hard Boiled Egg </label> <br /> <input type="radio" id="mbEgg"> <label for="mb"> Medium Boiled Egg </label> <br /> <input type="radio" id="fbEgg" value="fb"> <label for="fb"> Full Boiled Egg </label> <br /> <input type="radio" id="ebEgg"> <label for="eb"> Extra Boiled Egg </label> <br /> </form> </body> </html> Thanks in advance. Similar Tutorialsi have a form that returns the user upon a number of errors (of course) - i'm able to retain the text input data (value="<?php echo $_POST['em_name'] ?>") upon return, but i don't know how to retain the radio button or checkbox data so that they don't have to recheck it if necessary. it's in html/php... can someone help? much appreciated... GN In my HTML page, I have two forms. Form 1: Radio Button A, Radio Button B, Radio Button C Form 2: Radio Button D, Radio Button E, Radio Button F. Form 2 Radio Button are disabled. If I click on A, D will be the only button enabled, if I click on B, E will be the only button enabled, if I click on C, F will be the only button enabled. However, when I click on one of the Radio Buttons of Form 1, if I am using the Internet Explorer (version 6), the radio buttons in Form 2 are still disabled. It is not until I click on somewhere else that the proper button will be enabled. So, if I click on A, nothing will be enabled. After I click somewhere else, only after that D is enabled. Worse, if I click B, nothing happens and when I click C next, E will be the one enabled (but when I click on somewhere else, F will be enabled). This only happens in Internet Explorer. It works fine with Mozilla Firefox. I'd like to know if there's a solution to this if I am using the Internet Explorer. Here's a sample of my code: <form name="form1"> <input id="ButtonA" type="radio" name="radiobutton" value="valueA" onChange="document.form2.d.disabled=false;document.form2.e.disabled=true;document.form2.f.disabled=t rue;"> <input id="ButtonB" type="radio" name="radiobutton" value="valueB" onChange="document.form2.d.disabled=true;document.form2.e.disabled=false;document.form2.f.disabled=t rue;"> <input id="ButtonC" type="radio" name="radiobutton" value="valueC" onChange="document.form2.d.disabled=true;document.form2.e.disabled=true;document.form2.f.disabled=fa lse;"> </form> <form name="form2"> <input id="ButtonD" id="d" type="radio" name="radiobutton" value="valueD" disabled=true> <input id="ButtonE" id="e" type="radio" name="radiobutton" value="valueE" disabled=true> <input id="ButtonF" id="f" type="radio" name="radiobutton" value="valueF" disabled=true> </form> Please kindly help. Thank you. Best regards, ChrisX Hey guys. I've been using local storage for my form and so far it's worked great. Most of the form is simply having the user type in an answer but I have 4 questions that need to be as radio buttons. The problem is I need these radio buttons to be calculative values. I'm pretty sure I've got the 'setting values' part down but how do I 'set item' and 'get item' using local storage? Thanks in advance! Here's what I'm using: HTML Code: <input type="radio" name="length" value=".106" /> Less than 1 year<br /> <input type="radio" name="length" value="0" /> 1-2 years<br /> <input type="radio" name="length" value="-.053" /> More than 2 years<br /> HTML Code: localStorage.setItem("length", this.elements["length"].value);
HTML Code: localStorage.getItem("length")
Hi All, I want to change the form action clicking on radio button. I have two radio button. the default action is a1.jsp if I click on update button If I click on second radio button I want to change the form action. I want to redirect to another file (change form action if possible) if I click on second radio button How can I do that ? Thanks please reply soon. Hi All, I want to change the form action clicking on radio button. I have two radio button. the default action is a1.jsp if I click on update button If I click on second radio button I want to change the form action. I want to redirect to another file (change form action if possible) if I click on second radio button How can I do that ? Thanks please reply soon. My apologies if this belongs in a different forum. I'm creating an order form for a site and I need to add something I've never done before. I want content to be added to the form if the user clicks on a certain radio button. At the bottom of the form there are fields for the subtotal and total of the items that they're inputting at the top of the form. By clicking on a radio button I want to do either of the following. 1) A new table cell appears with text and an input field that has a number already in it. 2) The above cell and content are already on the page, and the clicking of the radio button only adds the info into the empty input. The first option I assume is a little more complicated and probably deals with CSS and/or Javascript. Option 1 is preferred but if I can only do number 2 then I'll deal. Just a note, I'm not doing any actual number calculations with this form. It's just raw numbers so there's no need to take that into consideration. Any and all help will be greatly appreciated. Hi all i have an upload form, and when the upload button/image is clicked to upload the file, i would like to have this cool ajax loader that just moves with some text under it saying "uploading...please wait". What is the easiest and best way to do this? I have looked all around javascript, etc and cant seem to find a perfect simple solution. I am adding this in my .tpl file THanks Hiya! All the codes are working well but I have trouble with the email post. When you select an item on dropdown list and then click on the submit button, the email should show Description=Memo pad R62. Problem is that it only shows Description=1 - no words, huh? You can simply copy all these codes and paste on your field so that you can see what I mean. Hope you can help me fix this. Your help much appreciated. Code: <head>
<script type="text/javascript">
var option_values = [];
option_values[0] = [
"Card A6 - R32",
"Memo Pad - R62"
];
option_values[1] = [
"Card A6 - R35",
"Memo Pad - R65"
];
window.onload = function() {
var select_list = document.getElementById("two");
document.getElementById("one").onchange = function() {
// If the selected option has no value, return
if (!this.value) {
return;
}
// Remove all options from the select list
while (select_list.hasChildNodes()) {
select_list.removeChild(select_list.firstChild);
}
// Create and append the default option
var option = new Option("Please select...", "");
select_list.appendChild(option);
// Create and append all options from the appropriate nested array
var value_array = option_values[this.value];
for (var i = 0; i < value_array.length; i++) {
option = new Option(value_array[i], i);
select_list.appendChild(option);
}
}
}
</script>
</head>
<body>
<form action="mailto:youremail@gmail.com" method="post" enctype="text/plain">
<p>Description</p>
<div>
<select id="one" name="Description">
<option value="">Please select...</option>
<option value="0">Happy Birthday Card</option>
<option value="1">Wedding Card</option>
</select>
<select id="two"></select>
</div>
<p>
<input type="submit" value="Send Email"/>
<input type= "reset" value="Clear" />
</p>
</form>
</body>
</html>
Hello Am doing a web page, and I have many radio buttons, when the user selects it, 3 other radio buttons will be selected. any suggestion how to create a radio button with border top and left........... i have an html form that uses javascript to calculate the total price of gift cards. when i use a button for submit, everything is peachy. when i use an image to submit, the form races to the top and shows the top line of the page. the text is enclosed within a div tag that has a set height with auto as the overflow command. i removed the height and overflow, thinking that the enclosure was causing this. nope! same thing happened. this is the submit code: <input type="image" src="images/buttons_contact_calculate.gif" onclick="calcard(this.form)"><input type="text" name="totalprice" size="8"><br><input type="image" src="images/buttons_contact_reset.gif" name="reset" /> the javascript code is this: function calcard(form) { $totalprice = 0; if(form.card_twentyfive.checked==true){ twentyfive = (25 * form.twentyfive_no.value); } else { var twentyfive = 0; } form.totalprice.value = twentyfive + fifty + seventyfive + onehundred + twohundred + ".00"; } As indicated in the last line, there are five if statements including the twentyfive statement shown here for an example. the css is this: .text_box { position: absolute; top: 280px; left: 0px; width: 100%; z-index: 15; } .text { position: relative; left: 0px; top: 0px; width: 473px; height: 406px; overflow: auto; padding: 0px 30px 0px 503px; font-size: 13px; font-family: "arial"; font-weight: normal; line-height: 150%; letter-spacing: 0px; text-align: justify; color: #FFFFFF; z-index: 5; } any ideas about what is going on? Does anyone know how to make the radio button transparent? I need to put a radio button on a textured background but I don't want the rectangle and actual button to show up on top of the background. I wanna the image working as a radio button. Thanks in advance! Does someone(s) know how to make a 'radio' button invisible but leave the associated text and VALUE? Thank you! hi. i have 5 radio buttons which disable when one on which is selected! but i cant post the value to the next page! how can i understand which on one is selected?! Thank you all Hey guys. Is it possible to assign a value to a radio button such as a large section of text which I have an id to. So for instance my text is <font id="someText">Words</font> I want my radio button value to correspond with that. Anyone have any ideas? -Tim Hi, i was wondering how do you show certain text such when the mouse is over the radio button. I tried <input type="radio" value="test" name="test" alt="mouse over radio"> test but the word "mouse over radio" does not pop, anyone have any idea? Thanks in advance. Hi All, I want to retrieve the value of checked radio button ? I have two radio button. Clicking on any radio button it should retrieve the value of particular checked radio button. please reply soon. Thanks Here is my code: Code: <!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" dir="ltr" lang="en"> <head> <title>Prospective Student Database</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <form action="insert.php" method="post"> <input type="radio" name="gender" value="1">Male </form> </body> </html> I am trying to follow the W3C standard, which I put in the W3C HTML validator. It keeps giving me a error of the radio button should end with '/>' instead of '>'. Like this: Code: <input type="radio" name="gender" value="1"/>Male But I checked the W3C recommendation. Even their recommendation on the radio button doesn't end with '/>' The recommendation is he http://www.w3.org/TR/html4/interact/forms.html The first example already showed. What is the problem? Thanks. Hi all, I would like to ask for your help here. How can I first have a few radio buttons on my page and when the user select one of those, a text box with a submit button will appear. The text box is for the user to key in some kind of code/password so that it will prompt the user to a url according to the code/password. Example: Code: YAH URL: www.yahoo.com Code: GOO URL: www.google.com And if the user keys the wrong code it will prompt a message box asking them to try again. If the user key the code wrongly for 3 times it will prompt to another url. Ive also attach an example of how it should look like. I would appreciate for your help. Thanks a lot! On as in pre-selected when a page loads... |
|||||||