|
JavaScript - Remove Drop Down Option Based On Radio Button Choice
I have a radio button that asks Does your URL exist or need to be purchased? and a drop down menu that lists different types of web projects (i.e. new website and website redesign).
What I'm trying to achieve is, if the user selects that the URL exists, I would like the drop down menu option new website to be removed from the list. Form: Code: <form> <input type="radio" name="website_status" value="exists"/> Exists <input type="radio" name="website_status" value="purchase_required"/> Needs to be purchased <select name="projects"> <option></option> <option value="new_website">New Website</option> <option value="website_redesign">Website Redesign</option> </select> </form> JavaScript: [CODE] <script> window.onload = initForms; function initForms() { for (var i=0; i<document.forms.length; i++) { document.forms[i].onsubmit = function() {return validForm();} } } function validForm() { var inputarray = document.getElementsByTagName("input"); var selectarray = document.getElementsByTagName("select"); var textarea = document.getElementsByTagName("textarea"); if (inputarray[0].checked == true) { selectarray[0].remove(options[1]); return false; } </script> I've been experimenting with this for the last couple hours and am getting nothing! Could someone please point me in the right direction? Similar TutorialsWhat I would like to do is have a page with a dropdown menu, and depending on which option the user chooses from the dropdown, reload the page and display a particular iframe below the dropdown, based on the users choice. Also, a default iframe would load (the one connected to the default choice in the select box). Hopefully that makes sense. I was trying to make this work with PHP (without having the user having to click a submit button) but I couldn't find a way to make it happen.
I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery Dear All, The things needs to be work like if I click one of the NA radio button all other radio buttons and comments ,text box, span text needs to be disabled. But the code used below is disabling all the fields. Also if first question NA radio button is clicked first question all other fields should be disabled and shown with red color. If I click on the 2nd question first question fields needs to be enabled and only 2nd question needs to be enabled. The questions will be dynamically loaded based on some other conditions. I am stuck with something on the below. Could you please help to achieve the below concept? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script language="javascript"> function enable_text(status) { status=status; var form = document.forms[0]; var rads = form.elements.radio1; for (var i=0; i < rads.length; i++) { var color = rads[i].checked? "red" : ""; document.getElementById("check"+i).style.backgroundColor = color; document.getElementById("check"+i).disabled = status; } } </script> <body onload=enable_text(false);> <div> <form name="form1" method="post" action=""> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td class="PortletText1" nowrap><strong>ALL Data</strong></td> <td class="PortletText1" nowrap><strong>YES</strong></td> <td class="PortletText1" nowrap><strong>NO</strong></td> <td class="PortletText1" nowrap><strong>N/A</strong></td> <td class="PortletText1" nowrap><strong>Comments</strong></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="PortletText1" nowrap>Data 1:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check0"/></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check1" /></td> <td class="PortletText1" nowrap> <input type="radio" name="radio1" id="check2" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text0" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 2:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check3" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check4" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check5" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text1" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 3:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check6" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check7" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check8" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text2" name="other_text"/></td> </tr> <tr> </div> </form> </body> </html> </body> </html> thanks in advance. Regards sona I would like to display one of two different <div> tags based on a radio button. In essence, this would be the "basic" and "advanced" options as the user end. Can this be done easily or will it be complex? I am a complete JS noob. I have been googling for hours trying to find a way to implement what I think is a simple thing - but alas my deadline is here, and I need to solve this and seek guidance from courteous experts! In a nutshell I have a simple form that has radio buttons: Code: <p><input id="amount" name="amount" type="radio" value="125" />$125</p> <p><input id="amount" name="amount" type="radio" value="75" />$75</p> <p><input id="amount" name="amount" type="radio" value="50" />$50</p> <p><input id="amount" name="amount" type="radio" value="25" />$25</p> <p><input id="amount" name="amount" type="radio" value="other" /><input id="other_amount" name="other_amount" type="text" maxlength="7" style="width:100px;" /> Other ($10 minimum donation)</p> The point of the form is to assign the value to "amount" for sending on to a paypal form. The problem is, I need the value of "amount" to change (be assigned) if they chose "other". To take the value from the text input box "other_amount" and assign it to "amount" but only if they chose the 5th radio button. I have some JS that I hacked together that checks to see if they chose the 5th radio button. attempts to assign the "other amount" to "amount" and then pops up an alert (only so I know the script is pushing the right value - wont be needed when complete.) However, Even though the alert pops up with the proper "other_amount" as if it has been assigned properly, the data is not sent on properly I presume, as it is the only aspect of the paypal donation amount form that is not working or providing the next page with the right "amount" pre-determined. Code: <script type="text/javascript">
<!--
function get_radio_value()
{
if (document.donation.amount[4].checked)
{
document.getElementById('amount').value = document.donation.other_amount.value;
alert(document.getElementById('amount').value);
}
}
//-->
</script>
Help please! Many thanks in advance! Deadline agh! Hi i have 2 radios : what i need is once i choose the 1st radio i will get 1st DDL with folollwing element : Orange Apple Kiwi if i chose the 2nd radio i should have the 2nd DDL with : Potato Tomato legume ? thanks I have a button given like this: <a href="test.php"><input class="test" type="test"></a> I have a CSS that defined the button as an image, and on hover the button changes. However, on hover, I'd like there to come a drop down that for example link to test 1, test 2, test 3. Is this possible? Thank you! form is .asp scenario: I have 3 radio buttons above number of boxes (dropdown). I want the dropdown selection box greyed out on selecting Electronic (radio button) Physical (radio button) Image (radio button) Electronic (radio button) Number of Boxes [dropdown box] Thanks for your help I am new to coding. Hi Guys, I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need. Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box. For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines. Below is the HTML to give you an idea of what I mean. Code: <table> <tr> <td> </td> <td><label class="bold">Yes</label></td> <td><label class="bold">No</label></td> </tr> <tr> <td><label for="property_q1"> - Is this your house?</label></td> <td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td> <td><input name="property_q1" id="property_q1" type="radio" value="No" /></td> </tr> </table> <br /> <div id="fine">It's fine, don't worry about filling it in.</div> <div id="fill" style="display:none">Please fill in the form below.</div> <table> <tr> <td> </td> </tr> <tr> <td><textarea name="info" id="info" cols="60" rows="5"></textarea></td> </tr> </table> <input type="submit" /> I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place. My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript. So I am appealing to the javascript programmer nation for some assistance in this endeavor. Any help would be greatly appreciated, Thanks. I have just used an Analysis Quiz tool (on this page http://javascript.about.com/library/blquizf.htm) to create a quiz which doesn't have right or wrong answers but adds the scores of the answers together. It all works nicely, HOWEVER I require 5 answers as opposed to the maximum of four which has been offered on this site. The (partial) code is: Code: var quiz = new Array(); var r = 0;
var analPage = 'result.html';
quiz[r++] =('93726~71~1. How often do you have a drink containing alcohol?~Never~Once a month or less~2 to 4 times a month~2 to 3 times a week~0~3');
quiz[r++] =('48844~37~How many units of alcohol do you have on a typical day when you are drinking?~1-2~3-4~5-6~7-9~0~3');
I thought it would be straight forward and I could add another option at the end of each string and then change the scoring e.g. quiz[r++] =('93726~71~1. How often do you have a drink containing alcohol?~Never~Once a month or less~2 to 4 times a month~2 to 3 times a week~4 or more times a week~0~4'); but this didn't work ... please help! Thank you Ok so I have a select box where the value must be passed via the form. If the users selects choice B or Choice C then I want a specific div to show. If they choose choice A then I want the div to hide or remain hidden. It should be hidden on page load. Code: <select name="Event_Type_ID">
<option value="1">Choice A</option>
<option value="2">Choice B</option>
<option value="3">Choice C</option>
</select>
<div id="showme">
Content to show if EITHER Choice B or C is chosen. Otherwise this div should be hidden.
</div>
Can anyone lead me in the right direction? Thanks! Hi, I have a web form that I'm creating and it has some expandable checkboxes that need to be restricted based on choice. This is my criteria: If someone chooses checkbox number 1, they cannot choose any other checkbox. If someone chooses checkbox number 2, they may also choose number 3 but not 1 or 4, they must also answer the question that appears below. If someone chooses checkbox number 3, they may also choose number 2 but not 1 or 4, they must also answer the question that appears below. If someone chooses checkbox number 4, they cannot choose any other checkbox, and must answer the questions that appears below. One more caveat: If checkbox number 2 is chosen, and they've filled in all three lines of the question below, I need for them to dynamically add more lines as needed. I have attached my web form so you can see what I've done. I've researched these options and tried code from various examples but I can't seem to get it to work. Does anyone know how to accomplish all of this? Thank you in advance! I am facing an issue where a link on my website opens in a new window if you simply click on it. However, if you right click and say open in new window or new tab, it opens the same window (URL) again from where the link is clicked. Self Service Option is a link and the JSP calls a function getSelfServSite() when the link is clicked. This is how the code flows in my case function getSelfServSite() { getToTheLink("${myConfigInfo.selfServiceURL}"); // this is because the URL is configurable } function getToTheLink(url) { window.open (url, "currentWindow", ""); } What am I doing wrong. I want it to go to the right link no matter how the user click it. Please advise. Thanks I've got a form that performs a calculation upon submit. I want it to perform a different calc depending on the choice from a drop down box in the form. Are there any examples of this? or can someone explain how i do it? thanks Hi, I've checked the boards and was unable to find something that matched the code that I have. The code basically uses radio buttons to populate results to a drop-down list depending on the radio button they choose. I'm having trouble figuring out where and how to add the redirection url for each of the value choices in the drop down. I was told something about using window.location('http://url.here') and then to populate the location parameter with the array value. Does this mean I have to redo my script or can another piece of code be added on to make it work. How do I alter my existing code? Thanks in advance for any help I can get: Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var services = new Array();
services['Tutoring'] = ['Grady', 'Holy Innocents', 'North Springs', 'Paideia', 'Riverwood', 'School Not Listed?'];
services['Recording'] = ['John Doe'];
function changechoice(choice)
{
var serviceList = services[choice];
changeSelect('service', serviceList, serviceList);
document.getElementById('service').disabled = false;
document.getElementById('service').onchange();
}
function changeservice(serviceValue)
{
document.getElementById('output').innerHTML = serviceValue;
return;
}
function changeSelect(fieldID, newValues, newOptions)
{
selectField = document.getElementById(fieldID);
selectField.options.length = 0;
if (newValues && newOptions)
{
for (i=0; i<newValues.length; i++)
{
selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
}
}
}
</script>
</head>
<body>
<table width="400" align="center" colspan="2" border="0" rowspan="2">
<tr>
<td width="200" align="left">
Pick an option:
</td>
</tr>
<td width="200">
<br>
<ul>
<input type="radio" name="choice" value="Tutoring" onclick="changechoice(this.value);"> Tutoring<br />
<input type="radio" name="choice" value="Recording" onclick="changechoice(this.value);"> Recording<br />
</ul>
</td>
<br>
<td width="200" align="center" valign="top">
<br>
<select name="service" id="service" onchange="changeservice(this.value);" disabled="disabled">
<option> -- Choose an Option -- </option>
</select>
</td>
</table>
</body>
</html>
Hello All, I'm trying to find a script that would be able to do the following: The are two drop down boxes, the first one populating the second (state/county --> town) The first box is single choice, the second is multiple choice. I'm looking for a script that would be able to deal with generating the code for all possible values that could be chosen in the second drop down box. The drop down boxes are part of a form which allow people to search for educational courses within areas of a state/county. I've had a good root around the internet but am rapidly getting confused ... many thanks in advance. Si. Hey guys.... me again.... tried doing this a few different ways but it seems no matter what I do the last option won't remove for some reason..... if it's the only option, it won't remove either. as it's the last one. Here is my code.. PHP Code: function removeCats() { // Set selected category list var sel_cats = document.getElementById('cat_sel'); for (i = sel_cats.length-1; i >= 0; i--) { // Check if the cat is selected if (sel_cats.childNodes[i].selected == true) { // Remove the category sel_cats.removeChild(sel_cats.childNodes[i]); } } } Thanks again guys! I'm taking a beginning javascript class and have been trying to figure out one last part of a homework assignment and am just not seeing how to work it out. Any help is greatly appreciated! What I'm having trouble with is doing the text verification. When a user selects an option from the select list they then need to type in the text area given. If the user doesn't type the word selected in the list then an error message should appear under the text area. If you look at my code you'll see that I have the text_check() function doing the verification. I can get it to work when there is only one option but once I add the other two it stops working. I've tried if... else and other variations, but can't seem to nail it down. Thanks! Code: function select_function()
{
var medical=document.getElementById("medical_list")
var selected_item=medical.selectedIndex
if (selected_item==0)
{
document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Medication" + "</span>"+ " Information"
var comments=document.getElementById("comments");
comments.focus();
}
if (selected_item==1)
{
document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Hospitalization" + "</span>"+ " Information"
var comments=document.getElementById("comments");
comments.focus();
}
if (selected_item==2)
{
document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Physician" + "</span>"+ " Information"
var comments=document.getElementById("comments");
comments.focus();
}
}
function text_check()
{
var user_comments=document.getElementById("comments").value.toLowerCase();
var med_comment=user_comments.indexOf('medication');
var hosp_comment=user_comments.indexOf('hospitalization');
var phys_comment=user_comments.indexOf('physician');
mySelectList = document.getElementById("medical_list");
if (mySelectList.value='Medication' && med_comment==-1)
{
document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Medication"+"</span>"+" somewhere in the text";
}
if (mySelectList.value='Hospitalization' && hosp_comment==-1)
{
document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Hospitalization"+"</span>"+" somewhere in the text";
}
if (mySelectList.value= 'Physician' && phys_comment==-1)
{
document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Physician"+"</span>"+" somewhere in the text";
}
}
function submit_alert()
{
alert("You submitted the form")
}
function clear_error()
{
document.getElementById("word_error").innerHTML="";
}
function changeDR()
{
var my_textarea=document.getElementById("comments");
var comment_string=my_textarea.value;
var doctor=comment_string.indexOf('Dr.');
var comment_string2='';
if (comment_string < 0)
{
comment_string2=comment_string
} else {
comment_string2=comment_string.replace('Dr.','Doctor')
}
my_textarea.value=comment_string2;
}
</script>
</head>
<body style="background-color: silver">
<h2>Medical History</h2>
Select Category: <br>
<select id="medical_list" onChange="select_function();">
<option>Medication</option>
<option>Hospitalization</option>
<option>Physician</option>
</select>
<br><br><br>
<div id="enter_info">Enter Your <font color="blue">Medication</font> Information:</div>
<br>
<form method="post" action="">
<textarea id="comments" cols="60" rows="15" onBlur="text_check();" onFocus="clear_error();" onkeyup="changeDR();">
</textarea><br>
<div id="word_error"></div><br>
<input type="submit" value="Submit Information" onClick="submit_alert();"/>
</form>
</body>
</html>
I have an options list that is generated from a database. It currently has ~125 options in it. I've received the request that the user be able to either enter the corresponding number or select the option from the list. How can I update the "selected" attribute in the options list based on a number that may be entered in another text entry box? |
|||||||