|
JavaScript - Want To Show A Particular Form Field When An Option Is Selected
Hi,
I'm new to JavaScript. I'm trying to create my form in such a way that if 'Premium' is selected, a the text box with label 'membership no' is displayed and if 'bronze' is select, the drop-down list 'sponsor' is displayed instead....here's what my form looks like... PHP Code: <form id="form1" name="form1" method="post" action=""> <p> <label for="select">Membership:</label> <br /> <select name="select" id="select"> <option value="Premium" selected="selected">premium</option> <option value="Bronze">bronze</option> </select> </p> <p>Membership No:<br /> <input type="text" name="textfield" id="textfield" /> </p> OR<br /> Sponsor: <br /> <select name="select2" id="select2"> <option value="329">329</option> <option value="234">234</option> </select> </form> appreciate the help Similar TutorialsI've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show. I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful. Code: <select id="Program" name="Program" size="1" onchange="
$other = document.getElementById('other_program').style;
$invoice = document.getElementById('invoice');
if (selectedIndex==6) {
$other.visibility='visible';
if ($invoice.value == 'General Fund') $invoice.value='';
} else {
$other.visibility='hidden';
if (selectedIndex==1) {
$invoice.value='Renegade Fund';
} else {
$invoice.value='Please Specify';
}
}
">
<option selected="selected" value="Not Selected"> - - Select One - - </option>
<option value="Athletics">Athletics</option>
<option value="Drum Line">Drum Line</option>
<option value="Renegade Fund">Renegade Fund</option>
<option value="General Scholarships">General Scholarships</option>
<option value="President's Circle">President's Circle</option>
<option value="Other">Other</option>
</select>
<span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>
<!-- the following is the new select group ive set up
<span id="alumni">
<select id="select-alumni" name="select-alumni" size="1">
<option selected="selected" value="Not Selected">Yes or No</option>
<option value="Yes-alumni">Yes</option>
<option value="Not-alumni">No</option>
</select>
</span>
-->
ive been racking my brain looking for a code solution for this....im a html and css pro....and a javascript NOOB lol heres what im tryna do....i have a form...that has a Code: <option> in it for 6 dropdown options.... in one of those possible options.. when SELECTED...i want the div layer that i currently have under it...to appear and i cant seem to figure it out....heres my code in its entirety i want budget div...to appear when the option website design is selected Code: <label for="subject">What are you interested in?<em>•</em></label>
<select type="text" value="Choose a Service" name="subject" id="subject" />
<option selected> -- Select A Design Service --</option>
<option id="website"> Website Design </option>
<option> Twitter </option>
<option> Ning or Tumblr </option>
<option> Flyers </option>
<option> Business Card or Brochure</option>
<option>Other</option>
</select><br />
<div id="budget" style="display:none;"><label> Do you know your budget for this Project? </label> <input style="width:auto" type="radio" name="message" value="Not Sure"> Not sure
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="$400-$800"> $400-$800
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="$800-$1200"> $800-$1200
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="over $1200"> over $1200
</div>
Hi, Is there anyone who could help me figure out how to Change a Hidden Fields Name based on selected option. The hidden fields name is sent off and I need to change the name depending on what option they select. For if they select MyList the hidden field name needs to be SelectLists[40] or if they select testlist the hidden field name needs to be SelectLists[41]. This is probably way, way off but I've done this and it doesn't work. Any help would be greatly appreciated, thanks. <script language="JavaScript"> function changelist() { //here we assign the value of the hidden input to x x=eval(document.getElementByName("SelectLists[40]"); if(document.getElementById("SelectLists[40]").selected=true x=SelectLists[40] else(document.getElementById("SelectLists[41]").selected=true x=SelectLists[41] else(document.getElementById("SelectLists[42]").selected=true x=SelectLists[42] //now we assign the new value to the input document.getElementById("theHiddenInput").name=x; //and now we test alert(document.getElementById("theHiddenInput").name) } </script> <input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes"> <select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()"> <option value="SelectLists[40]" name="SelectLists[40]" id="SelectLists[40]">MyList</option> <option value="SelectLists[41]" name="SelectLists[41]" id="SelectLists[41]">testlist</option> <option value="SelectLists[42]" name="SelectLists[42]" id="SelectLists[42]">testlist2</option> Greetings, I am trying to make a form that collects "Number of Children" a parent has. If they select "4" from the select input, then I want to slidetoggle out the appropriate divs, one for each child. Code: <select id="NumberofChildren" name="NumberofChildren">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
The div IDs to display are 1child, 2child, 3child, 4child, 5child. I have been able to use slidetoggle in the past when attached to a button, but this one has me lost. Anyone know how to accomplish this? Your help is greatly appreciated! Thank you! Is it possible to have a form's textarea background image fadeout to an alternate bg image, when that textarea is selected (by clicking the textarea or tabbing to it)? I've never seen this done before, but I'd really like to do it..
Hi folks. Looking to see if anyone could tell me where I'm going wrong with this script... I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page. Here is the script: Code: <script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[428]"]').change(function(){
var d = $('input[name="item_meta[428]"]').val();
var n = new Date(d).getDay();
if(n == 0)
val v = 'Sunday';
else if(n == 1)
val v = 'Monday';
else if(n == 2)
val v = 'Tuesday';
else if(n == 3)
val v = 'Wednesday';
else if(n == 4)
val v = 'Thursday';
else if(n == 5)
val v = 'Friday';
else if(n == 6)
val v = 'Saturday';
$('input[name="item_meta[429]"]').val(v).change();
});
});
</script>
I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday". Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday". It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc. Any assistance would be greatly appreciated. Sam. I have a select box with a few options. When the page loads I need to get the selected option in this select box and alert its inner text. Yet everything I try out on the net that should work wont work in IE, all other browser its fine. Please can someone show me the TRUE and correct way to get the inner text of a option from a select box in IE? Thanks! I have a dropdown box with 2 options: Free or Upgraded I need to do 2 separate things depending on which one is chosen. If Free, then set the value in fourth text field to 9999 else, set value in Fourth field to 5555. Code: <head>
<script type="text/javascript">
function calculate()
{
var myLevel = eval(document.earningsform.level.value)
var memberType = eval(document.earningsform.type.value)
if(memberType==free){
document.earningsform.fourth.value = 9999;
}
else{
document.earningsform.fourth.value = 5555;
}
</script>
</head>
<body>
<table>
<form action="calculator.php" method="POST" name="earningsform">
<tr>
<td align="center">My Level: </td><td><input type="text" name="level" value="50" size="10"></td><td></td>
</tr>
<tr>
<td align="center">Member Type: </td><td>
<select name="type">
<option value="upgraded" name="upgraded" selected="selected">Upgraded</option>
<option value="free" name="free">Free</option>
</select></td>
<td></td>
</tr>
<tr>
<td align="center">4th Level: </td><td><input type="text" name="fourth" size="10" value="5"></td><td>7.5</td>
</tr>
</form>
</table>
</body>
I have a simple form with an options drop down box: Code: <form method="POST" name="form"> <select autocomplete="off" id="input" name="input" onchange="this.form.submit();goHere();"> <option>Choose...</option> <option>Question1</option> <option>Question2</option> <option>Question3</option> </select> I wish to identify the option chosen in the function but not by its value, by its position: Code: <script>
function goHere(){
var s = document.getElementById("input");
if (s.selectedIndex == -1) return;
var u = s.form.elements[i];
alert(u);
</script>
I was hoping that variable "u" would be either 0, 1, 2, or 3. How can I get a variable to alert me the position of the selected option in the form? I think it is elements[i]. Hello everybody, I have a javascript adding new options to a drop down select menu getting the information from the database. The code is as written below: Code: function setOptions1() {
var selbox2 = document.egitimgiris.alttipID;
selbox2.options.length = 0;
selbox2.options[selbox2.options.length] = new Option('Option1','22')
selbox2.options[selbox2.options.length] = new Option('Option2','23')
selbox2.options[selbox2.options.length] = new Option('Option3','24')
selbox2.options[selbox2.options.length] = new Option('Option4','25')
}
I want one of them to be added as selected. I will put an "if" check and if it the value of the option and the value in the database is equal I want that option to be added as "selected". Is this possible? If yes, how? Please help. Thanks and regards telmessos I couldn't think of a way to explain my idea thoroughly, but I'm learning javascript and I have an html <select> form selected by using getElementById. Now, how do I access the data within the option tags to write to a variable? I know there are many simple ways of making it so that the value of the options are the html color name rather than hex code, but I'm doing this to learn javascript. I have experience with ruby (ok, not THAT much, but I understand the concepts). Anyway's the code explains my problem much better, so here it is: Code: <body>
<form action= "">
<fieldset>
<select id="selColor">
<option value="FFFFFF">White</option>
<option value="#A9A9A9">Gray</option>
<option value="#000000">Black</option>
<option value="#FF0000">Red</option>
<option value="#FFA500">Orange</option>
<option value="FFFF00">Yellow</option>
<option value="#9ACD32">Green</option>
<option value="#0000FF">Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#9400D3">Violet</option>
</select>
<input type="button"
value="Change Color"
onclick="changeColor()" />
</fieldset>
</form>
<script type="text/javascript">
//<![CDATA[
function changeColor() {
var selColor = document.getElementById("selColor")
var color = selColor.value
var colorid =
if (confirm("would you like to change color to "+colorid+"?")) {
document.body.style.backgroundColor = color
}
}
//]]>
</script>
</body>
I haven't initialized var colorid, but I'm trying to set it to either of the highlighted parts of the following piece of my code. <option id=" white " value="FFFFFF"> White </option> I want to access that part of the option tags of the element that the user selects. So, without changing the hex values to the color equivalent, how do I access the name of the selected option tag? ( I could make an if/switch statement to translate the hex color into a name and put it into the variable, but I would like to know how to do what I'm asking in case I run into a similair problem.) Hi, I am using following code-- Code: <td>
<centre>
<select id=\"extenddays\" size=\"1\" name=\"extenddays\">
<option value\=\"2\"> 2 </option>
<option value\=\"4\"> 4 </option>
<option value\=\"7\"> 7 </option>
</select>
<a href=?ext_days=\"extendform.extenddays.value\" & ?extfid=" . $data->{'fid'} ." \" >
<INPUT TYPE=\"SUBMIT\" NAME=\"extend\" VALUE=\"extend\" />
</a>
</centre>
</td>
Here, I want that when I click on 'extend' button, it should redirect to the url given in the href.. But while forming url run time , it is not retrieving the value of "extenddays" ( which is selected option value).. Please help. Cheers, Shashikant Shinde 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? like for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine. the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same?? this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state. I don't want the city option to change upon a normal page refresh. how do I go about this? below are the city, hotel select options & iframe Code: <form name="hotelslist" id="hotelslist">
<select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();">
<option value="Baddeck">Baddeck</option>
<option value="Banff">Banff</option>
</select>
<select id="hotelnames" name="hotelnames" onChange="loadHotel();">
<option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option>
</select>
</form>
<iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe>
below is my javascript functions Code: function loadHotel() {
var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value;
window.frames["hotelframe"].location = destURL; }
var i;
function hotel_list(i){
var hotelslist = document.getElementById("hotelslist");
hotelslist.hotelnames.options.length=0;
switch(i)
{
case 0: //Baddeck
hotelslist.hotelnames.options[0] =new Option('Inverary Resort, Baddeck','http://www.test0.com');
break;
case 1: //Banff
hotelslist.hotelnames.options[0] =new Option('Banff Caribou Lodge & Spa','http://www.test1.com');
hotelslist.hotelnames.options[1] =new Option('Banff Ptarmigan Inn','http://www.test2.com');
hotelslist.hotelnames.options[2] =new Option('Banff Rocky Mountain Resort','http://www.test3.com');
hotelslist.hotelnames.options[3] =new Option('The Rimrock Resort','http://www.test4.com');
hotelslist.hotelnames.options[4] =new Option('Fairmont Banff Springs','http://www.test5.com/');
break;
}
}
can some one please advise on a cross browser solution? thanks in advance. Omar. Hey, I need help with a javascript function to show a div when 3 "Yes" radio buttons are clicked. Heres my code: Code: <form> <ul id="quiz-list"> <li>1. My bed partner complains that I snore. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>2. My bed partner says I hold my breath while asleep. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>3. I wake at night gasping for breath. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>4. I have no energy in the daytime. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>5. I'm tired all the time. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>6. I wake up at night with a dry mouth. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>7. I often wake in the morning with a headache. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>8. I'm at least 20 Ibs. overweight. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>9. I have high blood pressure. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>10. I sweat a lot at night. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>11. I wake up with my heart pounding. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>12. I wake up with my heart skipping beats. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>13. I'm losing interest in sex. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>14. I can't stay awake during the day. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>15. I can't concentrate on my work. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>16. I have had work accidents because I'm tired. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>17. I'm irritable most or all of the time. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>18. My neck collar size is larger than 17". <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>19. I've fallen asleep while driving at night. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>20. I have to pull off the road to nap. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> </ul> If you answered YES to 3 or more of the above questions you may have Sleep Apnea - a potentially serious breathing disorder that can lead to heart attack, stroke, or high blood pressure in later life. <div id="extra"> <!--cforms name="Quiz Form"--> </div> </form> My goal is that when I click on the submit button, I just want to display an alert box with the values selected, and also look at this in the console.log. Can anyone help me? Thanks. Code: <html>
<head>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init() {
$ ("#t").submit(function() {
var g = showCheckedValues();
console.log(g);
alert(g);
});
function showCheckedValues() {
// Gather all values of checked checkboxes with name "bedrooms".
var checked = $('input[name=bedrooms]:checked').map(function() {
return this.value;
}).get();
}}
</script>
<body>
<form id="t">
<input type="checkbox" name="bedrooms" value="1">1 bedroom<br>
<input type="checkbox" name="bedrooms" value="2">2 bedroom<br>
<input type="checkbox" name="bedrooms" value="3">3 bedroom<br>
<input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br>
<input type="submit" name="save-changes"></input>
</form>
</body>
</html>
I have a telephone input on my form. It is an optional input for users. The prompt begins with the user having to select a phone type from a select menu, and then continue to the text fields to enter the digits. I would like to have the text fields disabled unless any of the types of phone are selected, but not if a type isn't selected. Here's my HTML code so far: Code: <select name="phoneType1"> <option value="" selected="selected">Type...</option> <option value="Home">Home</option> <option value="Work">Office</option> <option value="Cell">Cell</option> </select> (<input type="text" id="phAreaCode1" name="phAreaCode1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phPrefix1')"/>) - <input type="text" id="phPrefix1" name="phPrefix1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phLine#1')"/> - <input type="text" id="phLine#1" name="phLine#1" size="5" maxlength="4"/> ext.<input type="text" name="phExtension1" size="4" maxlength="4"/> I know that all I need to do to disable the text fields is to type in "disabled" before the name of the field. But, I don't know how to enable it when "Home," "Office," or "Cell" is selected. Thanks for any help. |
|||||||