JavaScript - Saving Onclick Values In Hidden Field!
Hi all, I'm a beginner in JavaScript can someone please help me to resolve this issue and thanks in advance for your help!
What I'm trying to do is.. When you select multiple <div> get the value of each one and save in separate hidden fields accordingly. What needs to happen is... Click div 1 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2 Click div 2 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2 Here's what I've come up with so far (currently I'm using JQuery) The problem with this is that no matter what div I click in which order it only updates the 1st hidden field Code: <div id="click1" name="click1" value="123" onclick="abc()"/>Click 1</div> <div id="click2" name="click2" value="225" onclick="def()"/>Click 2</div> <input id="passenger_1" name="passenger_1" type="hidden" value="none" /> <input id="passenger_2" name="passenger_2" type="hidden" value="none" /> <script> function abc() { var pasvalue = $('#click1').attr('value'); var pas1_value = $('#passenger_1').attr('value'); var pas2_value = $('#passenger_2').attr('value'); if(pas1_value == "none"){ $('#passenger_1').attr('value', pasvalue); }else if (pas2_value == "none"){ $('#passenger_2').attr('value', pasvalue); }} function def() { var pasvalue = $('#click2').attr('value'); var pas1_value = $('#passenger_1').attr('value'); var pas2_value = $('#passenger_2').attr('value'); if(pas1_value == "none"){ $('#passenger_1').attr('value', pasvalue); }else if (pas2_value == "none"){ $('#passenger_2').attr('value', pasvalue); }} </script> Similar TutorialsI 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... My website contains a ton of hidden divs. I thought this would make everything easier for the user because now they can stay on one page and view tons of content but it is making my page load very slowly. Is there a way to not load the pages hidden content until the user clicks the link and makes it visible? I see various tutorials online but I am having trouble learning how to translate that to my site. So again this content is hidden, and an onclick makes it visible, but I would like the onclick to make it visible and load for the first time. Thank you for reading, link to site and code below. Source: By clicking the info or photo tabs you will see the toggle for hidden divs Code for my tabs: PHP Code: <?php if( $page <= 1 and !$public ) { ?> <div id="mngl-profile-tab-control"> <ul> <li id="mngl-board-tab-button" class="dark"><a href="javascript:mngl_set_active_tab('board');"><span><?php _e('Board', 'mingle'); ?></span></a></li> <li id="mngl-info-tab-button"><a href="javascript:mngl_set_active_tab('info');"><span><?php _e('Info', 'mingle'); ?></span></a></li> <li id="mngl-log-tab-button"><a href="javascript:mngl_set_active_tab('log');"><span><?php _e('Log', 'mingle'); ?></span></a></li> <li id="mngl-fav-tab-button"><a href="javascript:mngl_set_active_tab('fav');"><span><?php _e('Favorites', 'mingle'); ?></span></a></li> <li id="mngl-display-photo-tab-button"><a href="javascript:mngl_set_active_tab('display-photo');"><span><?php _e('Photos', 'mingle'); ?></span></a></li> <li id="mngl-video-tab-button"><a href="javascript:mngl_set_active_tab('video');"><span><?php _e('Videos', 'mingle'); ?></span></a></li> </ul> </div> <?php } ?> Code for one of the tabs content. The class mngl-hidden is just a display:none PHP Code: <div id="mngl-fav-tab" class="mngl-profile-tab mngl-hidden"> <div style="color:#171717; font-weight:bold;"><?php echo $user->first_name . "'s Favorites >> For Motivational Posts You Enjoy"?></div> <?php //require_once(MNGL_MODELS_PATH . "/MnglUser.php"); foreach ($fav_posts as $fav_post) { $author = MnglUser::get_stored_profile_by_id($fav_post->author_id); $owner = MnglUser::get_stored_profile_by_id($fav_post->owner_id); if($author and $owner) $this->display_board_post($fav_post,$public); } /*$this->display_board_post('5705',$public);*/ //echo count($fav_posts).'--'.$page_size; ?> <?php if( count($fav_posts) >= $page_size ) { ?> <!-- <div id="mngl-older-posts"><a href="javascript:mngl_show_older_posts( <?php echo ($page + 1) . ",'" . (($public)?'activity':'boards') . "','" . (($public)?$mngl_user->screenname:$owner->screenname) . "'"; ?> )"><?php _e('Show Older Posts', 'mingle'); ?></a></div>--> <?php } ?> </div> Javascript that Sets Active Tab Code: function mngl_set_active_tab( tab ) { jQuery('#mngl-profile-tab-control li').removeClass('mngl-active-profile-tab'); jQuery('#mngl-' + tab + '-tab-button').addClass('mngl-active-profile-tab'); jQuery('.mngl-profile-tab').hide(); if((tab != 'board') && (tab != 'fav')){ jQuery('.mngl-board-post').hide(); } else { jQuery('.mngl-board-post').show(); } jQuery('#mngl-' + tab + '-tab').show(); } I have a hidden field whose value is a text string, "xyz". I want to write the value to the page so that the user can see it but not edit it. Can't I just use document.write(form.field.value)? Why isn't it working?
I have a simple script connect to a radio button. Based on which option, the matching div appears with a text box - and one with a radio button. If they change their mind and click another radio button, it'll switch to the new div, but keep the content in the old. How do I clear that out? I looked for a snippet, but they're all for clearing default text in a field when you click it. I want something a little different. Here's what I'm using: Code: <script> $(document).ready(function() { $("div.desc").hide(); $("input[name$='hear']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#" + test).show(); }); }); </script> <input type="radio" name="hear" value="dcranch"> DC Ranch Community <br /> <input type="radio" name="hear" value="friend"> From a friend <br /> <div style="display: none;" id="dcranch" class="desc"> <input type="checkbox" value="Yes" name="resident" /> If so, are you a DC Ranch resident? )</div><br /> <div style="display: none;" id="friend" class="desc"> Name? <input type="text" name="how1" /></div><br /> Hey Guys, I have the following hidden field within a form: Code: <input type="hidden" name="test12" value="test12" /> I also have the following function which does something if that field exists: Code: if(document.formName.test12.value == "thisdata") { //do something } The problem I'm having is that if the hidden field doesn't display (which based on conditional logic, sometimes happens), a JS error is thrown on the page. What is the best way to carry out this check effectively without throwing an error if the field does not exist? Thanks in advance. I have a script where I move randomly users from one multiple selectfield to another and that part works perfectly, but... When I want to submit the form I don't get any users passed along, course they are not "selected". I have then read around on the net and I need to create an elemet with a hidden input field where all the randomly selected users is inserted to with comma separation, but dont know how?!?! This is what I got: Code: function randomusers(){ var given = 3, used = {}, randnum, opts = $('#select1 option'), olen = opts.length; function ran() { // generate a unique random number randnum = Math.floor(Math.random() * olen); return used['u'+randnum] ? ran() : randnum; } for (var i = 0; i < given; i++) { // get the correct quantity of randoms used['u'+ran()] = true; } opts.filter(function(index) { // remove all options that are not one of the randoms return !!used['u'+index]; }).appendTo('#select2'); } I have tryied to insert this: appendTo('#select2' + '<input type="hidden" name="test[]" value="" />'); but that didn't seem right... Please help :-) 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 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> Okay, new to this magical thing called Javascript and LOVING it. Don't know how I avoided it all these years. Running into a stupid issue and I am sure it is just something I am missing. I have a hidden field in my page with the default value of HELLO. I am trying to make a change based on the default value, but I obviously am doing something wrong because it won't display my hidden field value. Any help would be greatly appreciated. Code: <html> <head> <script> function checkForm() { var testing = document.getElementById("testing").value; document.getElementById("result").innerHTML = testing; } </script> </head> <body> <input type="hidden" name="testing" value="HELLO" /> <input type="submit" value="submit" onClick="checkForm()"; /> <div id="result"></div> </body> </html> Hi, I was tasked with creating a JavaScript quiz... I succeeded in doing so but part of the requirement was to use hidden fields for the answers. Would this be possible using the code I currently have: Thanks Code: <html> <head> <script type="text/javascript"> function valid() { cor = "0" incor = "0" test0 = document.myform.elements[0].value; test1 = document.myform.elements[1].value; test2 = document.myform.elements[2].value; test3 = document.myform.elements[3].value; test4 = document.myform.elements[4].value; test5 = document.myform.elements[5].value; test6 = document.myform.elements[6].value; test7 = document.myform.elements[7].value; test8 = document.myform.elements[8].value; test9 = document.myform.elements[9].value; if (test0 == "64") { alert("Congratulations you got question one correct!"); ++cor } else alert("Sorry, you got question one incorrect!"); if (test1 == "56") { alert("Congratulations you got question two correct!"); ++cor } else alert("Sorry, you got question two incorrect!"); if (test2 == "7") { alert("Congratulations you got question three correct!"); ++cor } else alert("Sorry, you got question three incorrect!"); if (test3 == "8") { alert("Congratulations you got question four correct!"); ++cor } else alert("Sorry, you got question four incorrect!"); if (test4 == "100") { alert("Congratulations you got question five correct!"); ++cor } else alert("Sorry, you got question five incorrect!"); if (test5 == "1947") { alert("Congratulations you got question six correct!"); ++cor } else alert("Sorry, you got question six incorrect!"); if (test6 == "1") { alert("Congratulations you got question seven correct!"); ++cor } else alert("Sorry, you got question seven incorrect!"); if (test7 == "7") { alert("Congratulations you got question eight correct!"); ++cor } else alert("Sorry, you got question eight incorrect!"); if (test8 == "132") { alert("Congratulations you got question nine correct!"); ++cor } else alert("Sorry, you got question nine incorrect!"); if (test9 == "5280") { alert("Congratulations you got question ten correct!"); ++cor } else alert("Sorry, you got question ten incorrect!"); //else ++incor alert("you got " + cor + " right\n You got " + cor/10 * 100 + "% correct!"); } </script> </head> <body> <form name="myform"> <table border="1" cellpadding="10"> <tr><td>1. 64 added to what number gives a sum of 128?</td><td><input type="text" name="q1"></td></tr> <tr><td>2. The product of 8 and 7 is?</td><td><input type="text" name="q2"></td></tr> <tr><td>3. 35 divided by 5 is:</td><td><input type="text" name="q3"></td></tr> <tr><td>4. 40 divided by 5 is:</td><td><input type="text" name="q4"></td></tr> <tr><td>5. What is the area of rectangle that measure 5 by 20?</td><td><input type="text" name="q5"></td></tr> <tr><td>6. What is 3054 subtracted from 5001?</td><td><input type="text" name="q6"></td></tr> <tr><td>7. What is the result of 5 x 8-39?</td><td><input type="text" name="q7"></td></tr> <tr><td>8. What is the binary number 111 in decimal?</td><td><input type="text" name="q8"></td></tr> <tr><td>9. The sum of 33 and 44 and 55 is:</td><td><input type="text" name="q9"></td></tr> <tr><td>10. How many feet in a mile?</td><td><input type="text" name="q10"></td></tr> <tr><td><input type="button" onClick="valid()" value="score"></td><td><input type="reset"></td></tr> </form> </table> </body> </html> Hi, i have a page with lots of checkboxes and hidden fields. When i tick a checkbox i want it to give the hidden filed a value. But give it no value if it is not ticked. For every checkbox i have a hidden field is with it. Both the checkbox and the hidden field send information. I have used some js scripts but they don't seem to work with more than one checkbox. Please can you help. Example: <input type="checkbox" name="box1" id="box1" value="4th July 2009,"> <input type="hidden" name="price1" id="price1" value="0"> So when box1 is ticked it then gives price1 a value. But if not ticked then the value remains at 0. I want it to give a value of 699. There will be about 100 checkboxes and hidden fields on the page. Also onclick behaviours do not work because it may still send the information if the checkbox is not checked. So for the next checkbox and hidden field i use box2 and price2. Thanks for your help. my code is below what i want this to do is take the x_cityid and add it to teh hidden field with the id of citiesid (I will do an ajax call before this but my simple javascript is not working) what am i doing wrong? function addtocitylist() { var x_cityid = document.getElementById('x_cityid'); var x_areaid = document.getElementById('x_areaid'); var scitiesid=document.getElementById('citiesid'); var areasid = document.getElementById('areasid'); if (!scitiesid) { scitiesid.value = x_cityid; } else { scitiesid.value = scitiesid + ',' + x_cityid; } scitiesid.value = scitiesid ; alert(scitiesid); } I need for the form to do the following: when age is greater than or equal to 65 enter "yes" in the hidden field when age is less than 65 enter "no" in the hidden filed return true Create a page processAge.htm that Writes the message on the page Hi name. At age # you may retire. or Hi name. At age # you are not ready to retire. Get to work. name is the name entered on the form. # is the age entered on the form. Java: Code: <script type="text/javascript"> /* <![CDATA[ */ function validateSubmission() { var retValue = true; if (document.forms[0].name.value == "") { window.alert("You did not fill in one of the following required fields: Name or Age."); retValue = false; } } function checkForNumber(fieldValue) { var numberCheck = isNaN(fieldValue); if (numberCheck == true) { window.alert("You must enter a numeric value!"); return false; } } /* ]]> */ </script> Body: Code: <form action="processAge.htm" method="get" onsubmit="makeList(); return validateSubmission(); "> <table frame="border" rules="cols" > <tr> <td valign="top"> <h2>Retirement</h2> <p>Name<br /> <input type="text" name="name" size="40" /></p> <p>Age<br /> <input type="text" name="age" size="40" onchange="return checkForNumber(this.value);" /></p> <p style="text-align: center"><input type="submit" value="Send" /><input type="reset" /> <input type="hidden" name="Retirement" /></p> </td></tr> </table> </form> Process Page: Code: <script type="text/javascript"> /* <![CDATA[ */ document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>"); var formData = location.search; formData = formData.substring(1, formData.length); while (formData.indexOf("+") != -1) { formData = formData.replace("+", " "); } formData = unescape(formData); var formArray = formData.split("&"); for (var i=0; i < formArray.length; ++i) { document.writeln(formArray[i] + "<br />"); } /* ]]> */ </script> Thanks for any help! I have a very interesting situation and I'm just looking for ideas at the moment. I have a webpage for insurance agents that the agent will login and then enter some insured information. There is a field named "agentnumber" that is on the form, but is hidden by a display:none. The field is set from the username of the person who logs in whenever the form loads the first time. The form will save automatically when the user leaves the page. I am experiencing a weird issue that every now and then, the agentnumber field is getting saved with incorrect data. After discussing it with the agent, it is being saved with the agentnumber of the agent from other companies, not from the my website. Just looking for any ideas on what may be happening as I thought browser security would prevent cross site javascript. The users are using IE 7 & IE 8. Any help would be appreciated as I'm not even sure what to look for. I have two select lists. Morning Code: <tr valign="top"> <td align="right">Morning:</td> <td><select name="wcsave_09_msession" id="wcsave_09_msession" size="1" onblur="CheckField(this.form,this,'');" onchange="display1(this,'Mastery sesson 1','Concurrent sessons 1-6');"> <option value="" selected="selected">Choose one</option> <option value="Mastery sesson 1">Mastery sesson #1</option> <option value="Concurrent sessons 1-6">Concurrent sessons #1-#6</option> </select> </td> </tr> Afternoon: Code: <tr valign="top"> <td align="right">Afternoon:</td> <td><select name="wcsave_09_asession" id="wcsave_09_asession" size="1" onblur="CheckField(this.form,this,'');" onchange="display2(this,'Mastery sesson 2','Concurrent sessons 7-12');"><!--showDiv(this.value)--> <option value="" selected="selected">Choose one</option> <option value="Mastery sesson 2">Mastery sesson #2</option> <option value="Concurrent sessons 7-12">Concurrent sessons #7-#12</option> </select> </td> </tr> In each list depending on what option is chosen, a corresponding div will show with select lists. Morning div: Code: <div id="Mastery sesson 1" style="display: none;"> <table class="special"> <tr valign="top"> <td>(9:15 a.m. - 10:15 a.m.)<br /><select name="wcsave_10_session_mmastery" id="wcsave_10_session_mmastery"> <option value="" selected="selected">Choose one</option> <option value="Mastery session #1 - Computer Lab: Searching Essentials"><strong>Mastery session #1</strong> - Computer Lab: Searching Essentials</option> </select> </td> </tr> </table> </div> <div id="Concurrent sessons 1-6" style="display: none;"> <table class="special"> <tr valign="top"> <td>Choose a session for each time slot.<br /> (9:15 a.m. - 10:15 a.m.)<br /><select name="wcsave_10_session_mconc1" id="wcsave_10_session_mconc1" onchange="toggleSelect();"> <option value="" selected="selected">Choose one</option> <option value="Concurrent session #1 - IRB 101 for Research Nurses">Concurrent session #1 - IRB 101 for Research Nurses</option> <option value="Concurrent session #2 - A Research Poster Contest as a Tool to Learn About Research/EBP">Concurrent session #2 - A Research Poster Contest as a Tool to Learn About Research/EBP</option> <option value="Concurrent session #3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature">Concurrent session #3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature</option> </select> </td> </tr> <tr valign="top"> <td>(10:30 a.m. - 11:30 a.m.)<br /><select name="wcsave_10_session_mconc2" id="wcsave_10_session_mconc2" onchange="toggleSelect();"> <option value="" selected="selected">Choose one</option> <option value="Concurrent session #4 - IRB 101 for Research Nurses">Concurrent session #4 - Making Sense of Statistics When Reading Research</option> <option value="Concurrent session #5 - Original Research Presentations">Concurrent session #5 - <em>Original Research Presentations</em></option> <option value="Concurrent session #6 - IRB Considerations with Vulnerable Populations">Concurrent session #6 - IRB Considerations with Vulnerable Populations</option> </select> </td> </tr> </table> </div> Afternoon div: Code: <div id="Mastery sesson 2" style="display: none;"> <table class="special"> <tr valign="top"> <td>(1:45 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_mmastery" id="wcsave_10_session_mmastery"> <option value="" selected="selected">Choose one</option> <option value="Mastery session #2 - Beyond the Basics of Searching!"><strong>Mastery session #2</strong> - Beyond the Basics of Searching!</option> </select> </td> </tr> </table> </div> <div id="Concurrent sessons 7-12" class="hiddenDiv"> <table class="special"> <tr valign="top"> <td>Choose a session for each time slot.<br /> (1:45 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_aconc1" id="wcsave_10_session_aconc1" onchange="toggleSelect();"> <option value="" selected="selected">Choose one</option> <option value="" selected="selected">Choose one</option> <option value="Concurrent session #7 - EBP Protocols">Concurrent session #7 - EBP Protocols</option> <option value="Concurrent session #8 - Writing for Publication">Concurrent session #8 - Writing for Publication</option> <option value="Concurrent session #9 - Original Research Presentations">Concurrent session #9 - Original Research Presentations</option> </select> </td> </tr> <tr valign="top"> <td>(3:00 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_aconc2" id="wcsave_10_session_aconc2" onchange="toggleSelect();"> <option value="" selected="selected">Choose one</option> <option value="Concurrent session #10 - Writing a Research Question Using PICO">Concurrent session #10 - Writing a Research Question Using PICO</option> <option value="Concurrent session #11 - EBP Project Presentations">Concurrent session #11 - EBP Project Presentations</option> <option value="Concurrent session #12 - The Role of the Research Facilitator">Concurrent session #12 - The Role of the Research Facilitators</option> </select> </td> </tr> </table> </div> Once two options are chosen in the divs, the Afternoon or Morning becomes disabled. Code: function toggleSelect() { var selBox0 = document.getElementById('wcsave_10_session_mconc1'); var selBox1 = document.getElementById('wcsave_10_session_mconc2'); var selBox2 = document.getElementById('wcsave_09_msession'); var selBox3 = document.getElementById('wcsave_10_session_aconc1'); var selBox4 = document.getElementById('wcsave_10_session_aconc2'); var selBox5 = document.getElementById('wcsave_09_asession'); if ((selBox0.selectedIndex !=0) && (selBox1.selectedIndex !=0)) {selBox5.disabled = true;} else {selBox5.disabled = false;} if ((selBox3.selectedIndex !=0) && (selBox4.selectedIndex !=0)) {selBox2.disabled = true;} else {selBox2.disabled = false;} } Here is the code to show/hide the divs: Code: function display1(obj,id1,id2) { var selBox0 = document.getElementById('wcsave_10_session_mconc1'); var selBox1 = document.getElementById('wcsave_10_session_mconc2'); var selBox2 = document.getElementById('wcsave_09_msession'); var selBox3 = document.getElementById('wcsave_10_session_aconc1'); var selBox4 = document.getElementById('wcsave_10_session_aconc2'); var selBox5 = document.getElementById('wcsave_09_asession'); var txt = obj.options[obj.selectedIndex].value; document.getElementById(id1).style.display = 'none'; document.getElementById(id2).style.display = 'none'; if ( txt.match(id1) ) {document.getElementById(id1).style.display = 'block';} if ( txt.match(id2) ) {document.getElementById(id2).style.display = 'block';} } function display2(obj,id1,id2) { txt = obj.options[obj.selectedIndex].value; document.getElementById(id1).style.display = 'none'; document.getElementById(id2).style.display = 'none'; if ( txt.match(id1) ) {document.getElementById(id1).style.display = 'block';} if ( txt.match(id2) ) {document.getElementById(id2).style.display = 'block';} } What I want to do is set the sub div dropdown selectedIndex == 0 when Morning or Afternoon is set to Choose one. In essence clearing the values when the div is hidden so the other fields are no longer disabled. Any ideas? I thought this would have been fairly simple but it appears the onchange event isn't triggered when a hidden field is populated by other javascript without user input. I have a simple search box and autocomplete/suggestion ajax thingie going on. What I want to do is have my "Go" submit button disbled until AFTER a user has populated the hidden field "cid". A user populates this field automatically when they click on a suggested option from the ajax autocomplete doofer. Here's what I've tried at the moment but failed on. Code: <form action="index.php" method="GET" name="qsform" id="qsform"> <input type="hidden" name="p" id="p" value="compdetails" style="border:1px solid #000000;" /> <input type="text" name="quicksearch" id="quicksearch" value="Find Company" style="border:1px solid #000000;" onFocus="clearText(this)" onBlur="clearText(this)" /> <input type="hidden" name="cid" id="cid" value="" style="border:1px solid #000000;" /> <input type="submit" name="go" id="go" value="Go" disabled="true" onmouseover="if (document.qsform.cid.value!='') { document.qsform.go.disabled=false; }" /> </form> 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? 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> --> 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> |