|
JavaScript - If Form Option Selected Show Hidden Field
I'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>
-->
Similar TutorialsHi, 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 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> 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>
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! I have been staring at this code for too long and need some help. I want to pass a value received through the Url to another screen with new data by a form using the method="get". I have tried several different ways, my latest attempt was to use a hidden field hoping that would add to the url string but it isn't working. Thank you in advance Here is my code, its not pretty 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Field Location</title>
<link rel="stylesheet"
href="css/INTERPRETING_TR_CONTROL_ELECTRICAL_READINGS.css"
type="text/css" media="screen" />
</head>
<body>
<div>
<form id="form1" name="form1" method="get" action="./nameplateInformation.html">
<h3>Where is this field located?</h3>
<select name="fieldValue" id="fieldValue"
title="Where is this field located">
<option value="field1">Inlet Field</option>
<option value="field2">Second Field</option>
<option value="field3">Third Field</option>
<option value="field4 ">Outlet Field</option>
</select>
<script type="text/javascript">
(function(){ // Import GET Vars :D
document.getVars = [];
var urlHalves = String(document.location).split('?');
if(urlHalves[1]){
var urlVars = urlHalves[1].split('&');
for(var i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
var urlVarPair = urlVars[i].split('=');
document.getVars[urlVarPair[0]] = urlVarPair[1];
}
}
}
})();
prceptType = document.getVars.preceptType;
document.write('<input type="hidden" name="preceptType" value='+preceptType+' />');
</script>
<input type="submit" value="Submit" />
<input type="button" name="backButton" value="Back"
onclick="parent.location = './welcome.html'" /> <input type="button"
name="homeButton" value="Home"
onclick="parent.location = '../index.html'" /></form>
</div>
</body>
</html>
I have modified a free JS function from he http://www.tangorangers.com/examples...post/index.php To dynamically add text fields to the form. My work-in-progress version is he http://jimpix.co.uk/junk/test/6.html On the form, I have a hidden text field: Code: <input type="hidden" name="hiddenCount" value="" /> What I'd like to do is to increment the hiddenCount each time the "Add" fields button is clicked. This is the button: <input id="add_contact()" onclick="add_contact()" value="Add" type="button"> And this is the JS function: Code: var contact_counter = 0;
function add_contact()
{
if (contact_counter < 9)
{
contact_counter++;
var newFields = document.getElementById('add_contact').cloneNode(true);
newFields.id = 'contact';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + contact_counter;
}
var insertHere = document.getElementById('add_contact');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
}
I'm new to JS. I could just about edit the JS function to slightly modify it from the tangorangers version (I only changed it v. slightly). To somehow increment the value in the hidden field each time the button is pressed is beyond me though! Any advice much appreciated. Thanks I need when I click to type into a form field, I need an onclick event to show another form field. I would assume this would be a hiddin div or an on click event to post another form field. So in theory just because I actually clicked into one form field...another form field shows up underneath it...can anyone help... I have a form in an iframe that submits nicely. Here is one of the hidden fields that gives the page to redirect to after submitting the form: Code: <input type="hidden" name="rtrn" value="http://www.domain.com/thanks.html" target="_parent"> The parent target doesn't work, does anyone know how I get the thanks page to replace the page containing the iframe? 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 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.) 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>
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 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, I am hoping someone can help me with following search form. As you can see I have created a form but I don't know how to fix the coding so when a user select a category it will add a different hidden filed for that option for example: When the user selects category "Men" the hidden filed Code: <INPUT TYPE="HIDDEN" NAME="REFERRER" VALUE="http://men.com/acatalog/"> will be added and when the user selects category "Kids" the hidden filed Code: <INPUT TYPE="HIDDEN" NAME="REFERRER" VALUE="http://kids.com/acatalog/"> will be added and so on... Here is my form coding I am using: Code: <form name="simplesearch" method="get" action="" onsubmit="ssite=document.getElementById('sitelist');this.action=ssite.options[ssite.selectedIndex].value;return true;">
<input type="hidden" name="page" value="search" />
<input type="hidden" name="PR" value="-1" />
<input type="hidden" name="TB" value="A" />
<input type="hidden" name="NOLOGIN" value="1" /><input align="top" class="main_search_box" name="SS" type="text" value="search for ..." onfocus="this.value='';">
Search within:
<select id="sitelist">
<option value="">Select Catagory</option>
<option value="http://kids.com/cgi-bin/ss000001.pl">kids</option>
<option value="http://men.com/cgi-bin/ss000001.pl">men</option>
<option value="http://women.com/cgi-bin/ss000001.pl">women</option>
</select><input type="submit" class="button" name="ACTION" value="Go!">
</form>
Also I have one more question how do I make the "Select Catagory" a Must Choose and if not chosen to give message that say"Please Select a Category" Thank you in advance for any help you can give me... I am a bigginer so please go easy on me 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>
|
|||||||