JavaScript - Retrieve Values From Iframes, Insert Into Hidden Form
Hi there!
I have two iframes, within each iframe are four drop down list boxes. On my main page I have one text input box and one text area input box. Aim: 1. Retrieve all the values. 2. Place them into a hidden form. 3. Submit the hidden form data to a Google Docs Spreadsheet. I need to export: (in this order, all are within form tags) "List1,2,3,4" (drop down lists) from form "initiatorform" within frame "initiatorframe" which is "initiator.html" "List5,6,7,8" (drop down lists) from form "finisherform" within frame "finisherframe" which is "finisher.html" "ComboName" (Text input box) and "Description" (text area input) from form "indexform" within "Index.html" I've been trying different pieces of code for the last few days with no luck. I've been using an alert to test whether the value has been recorded but it won't even pop up at all. I've been trying to use this example. Is this the correct format for what I'm trying to do? Code: <script language="JavaScript" type="text/javascript"> <!-- function whatever(iframeid,iframename){ mmspobj=document.getElementById(iframeid); if (mmspobj.tagName=='IFRAME'){ mmsiobj=window.frames[iframename].document.getElementId('myfield1ID').value; alert(mmsiobj); } alert(mmsiobj); } //--> </script> I'm just trying to retrieve the value atm, once its working I can set the hidden form data. I'm sorry if this is something simple but I've been teaching myself over the last week while making Google Apps. Any help would be greatly appreciated. Similar Tutorialsi have a archive of data that i want to be loaded in iframes since i have reached a length limit within that page. so what i have is a script that put in a value into a text area, but now i am trying to convert it to putting an src value inside an i frame. i am not the best with javascript so any help would be great. Code: <script type="text/javascript"> function ddl_changed(obj) { var pr = prim.options[prim.selectedIndex].value; var s1 = document.getElementById('s1'); s1.src = pr; } </script> body <div class="prim" align="center"> Database <select id="prim" onchange="ddl_changed(this)"> <option value=" ">Choose a data set</option> <option value="/ds2">data set 1</option> <option value="/ds3">data set 2</option> </select> </div> <iframe name="s1" id="s1" src=" "><p id="noframe">Your browser does not support frames</p> </iframe> thanks 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? 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> i'm trying to "post" the selected checkboxes (name and value) into a mysql database; i've search "docter google" for some answers and read that the "easiest" way to do this is to collect the checkboxes and put the values and names in to an hidden textfield ( function setvalue() ) and collect this textfield in a new page with php; but this doesn't work. it seems that the variable naamtest is empty (when i load a word into this var arv it does work) can someone find my error? Code: <script type="text/javascript"> function shift(which) { var counter = 0; // counter for checked checkboxes var i = 0; // loop variable var veck = "";// final url variable var beginsaldo = 79; var namen_array = ""; var va_array = ""; var namen = ""; var valu = ""; var input_obj = document.getElementsByTagName('input'); // get a collection of objects with the specified 'input' TAGNAME for (i=0; i < input_obj.length; i++){ // loop through all collected objects if (input_obj[i].type == 'checkbox' && input_obj[i].checked == true){ // if input object is checkbox and checkbox is checked then ... counter++; // ... increase counter var valcheck = input_obj[i].value; // waarde van de geselecteerde checkbox in variable steken test = Number(valcheck); // absolute rekenwaarde van variable maken beginsaldo -= test; //beginsaldo verminderen met de checkbox value if (counter > 0){ var naam = input_obj[i].name + ' '; var val = input_obj[i].value + ' '; namen = namen + naam; valu = valu + val; namen_array = namen.split(" "); va_array = valu.split(" "); var naamtest = namen_array; }}} if (counter > 10){ alert ("u mag maar 10 renners selecteren"); var tr = which.parentNode; while ( tr.tagName.toUpperCase() != "TR" ) { tr = tr.parentNode; if ( tr == null ) return; // something went very wrong! } var tds = tr.getElementsByTagName("td"); tds[0].getElementsByTagName("input")[0].checked = false; } else if (beginsaldo < 0){ alert ("uw saldo is te laag om dit uit te voeren"); var tr = which.parentNode; while ( tr.tagName.toUpperCase() != "TR" ) { tr = tr.parentNode; if ( tr == null ) return; // something went very wrong! } var tds = tr.getElementsByTagName("td"); tds[0].getElementsByTagName("input")[0].checked = false; } else{ var tr = which.parentNode; while ( tr.tagName.toUpperCase() != "TR" ) { tr = tr.parentNode; if ( tr == null ) return; // something went very wrong! } var tds = tr.getElementsByTagName("td"); if ( tds[0].getElementsByTagName("input")[0] == which ) { tds[2].innerHTML = tds[0].innerHTML; tds[0].innerHTML = " "; tds[3].innerHTML = tds[1].innerHTML; tds[1].innerHTML = " "; tds[2].getElementsByTagName("input")[0].checked = true; } else { // this code is optional!! tds[0].innerHTML = tds[2].innerHTML; tds[2].innerHTML = " "; tds[1].innerHTML = tds[3].innerHTML; tds[3].innerHTML = " "; tds[0].getElementsByTagName("input")[0].checked = false; } function setValue() { var arv = naamtest.join(); // This line converts js array to String document.f2.arv.value=arv; // This sets the string to the hidden form field. }}} </script> I've been trying to get a form to control iframes, but new to javascript I basically want to input the url from a form & display it in an iframe, but cant figure out how to link the url from the form to the iframe The code im using atm Code: <html> <head> <title> SearchLite v2 - search multiple sites at once</title> <STYLE TYPE="text/css"> .txt { BACKGROUND-COLOR: lavender; BORDER-BOTTOM-COLOR: lavender; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-COLOR: lavender; BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-COLOR: lavender; BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-COLOR: lavender; BORDER-TOP-WIDTH: 0px; HEIGHT: 22px; WIDTH: 599px; } .cellht { HEIGHT: 50px; } .cell { BACKGROUND-COLOR: lavender; } </STYLE> <script> function win() { frmlen = document.myform.elements.length; idiv=1; for (var icnt=0;icnt<frmlen;icnt++) { //loop thru all FORM elements and look for checkboxes which have been checked if (document.myform.elements[icnt].type=="checkbox" && document.myform.elements[icnt].checked) { //make IFRAME visible document.getElementById("f"+idiv).style.visibility = 'visible'; //make textbox that shows heading with name of site being searched, visible document.getElementById("t"+idiv).style.visibility = 'visible'; //build the URL strSite = document.myform.elements[icnt].value; strSearch= escape(document.myform.mytext.value); url = strSite + strSearch; //set SRC property of IFRAME to dynamically built URL document.getElementById("f"+idiv).src = url; //show only the domain name part of the URL dmn=url.substring(7); document.getElementById("t"+idiv).value= dmn.substring(0,dmn.indexOf("/")); idiv+=1; } } } function hide() { for (var icnt=1;icnt<13;icnt++) { //hide all IFRAME s document.getElementById("f"+icnt).style.visibility = 'hidden'; //hide all the camouflaged textboxes that display the title document.getElementById("t"+icnt).style.visibility = 'hidden'; } } </script> </head> //Form1 i want to use for the url ........... <form> Enter URL1: <input type="text" name="Enter Url" /> </form> //Form2 i want to use for the url ........... <form> Enter URL2: <input type="text" name="Enter Url" /> </form> <body onload="hide()"> <form method=post action="" name="myform"> <table border=0 align='center'> <tr><td colspan=3 height='30%'><font size="5">SEARCH</font><i><font size="5" color="blue">LITE</font></i> v2 -search multiple sites at once and view results on a single page </td><td colspan=2> </td></tr> <tr > <td COLSPAN=3 ><input type="text" name="mytext" size="55"></td> <td COLSPAN=3><input type="button" value="Find" onClick="win()"> <input type="reset" value="Reset" onclick="hide()"> <a href="mailto:dotnut@hotmail.com">Feedback</a></td> </tr> <tr > //Want to change the value= replaced by the value in the form <td class="cell"><input type="checkbox" name="1" value="http://www.google.com/search?hl=en&btnG=Google+Search&q=">Google</td> <td class="cell"><input type="checkbox" name="2" value="http://www.dictionary.com/search?q=">Dictionary</td> <tr><td COLSPAN=5 HEIGHT='50' CLASS='cellht'><input type='text' id='t1' class='txt'></td></tr> <tr><td COLSPAN=5><IFRAME id='f1' FRAMEBORDER=1 SCROLLING='yes' WIDTH=600 HEIGHT=360></IFRAME><br></td></tr> <tr><td COLSPAN=5 CLASS='cellht'><input type='text' id='t2' class='txt' ></td></tr> <tr><td COLSPAN=5><IFRAME id='f2' FRAMEBORDER=1 SCROLLING='yes' WIDTH=600 HEIGHT=360></IFRAME><br></td></tr> </table> </form> </body> </html> thnx I am trying to get around using server side scripting for an issue on a webpage. I have a basic html form like this: Code: <html> <body> <FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR> <INPUT TYPE="text" NAME="inputbox" VALUE=""><P> <INPUT TYPE="button" NAME="button" Value="Click" onClick="testResult (this.form)"> </body> </html> I know I can use JavaScript to capture the data like this: Code: function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); } Instead of alerting it, can I save the data in an iframe? Will it stay there once they leave the page? I want the iframe to eventually contain info from lots of people's answers. I am wanting to simulate saving the answers to a text file on the server. I'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!=""); That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()"> </body> <div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;"> <img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/> Loading... </div> </html> formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> Given 2 iframes named leftbox and rightbox The asp file in the "leftbox" lists the "title" field from a SQL table. Each record is listed in an HTML table and each record includes an edit button. When the edit button is clicked, the sql record's text field is opened for editing in an asp file in the "rightbox". When I click "Update" in "rightbox", the updates are posted to the SQL table. I then want both the "leftbox" and "rightbox" to update to reflect the changes. In the asp file that posts the updates, the function Code: function addPost (u) { parent.leftbox.location.replace ("displayposts.asp"); parent.rightbox.location.replace ("changepost.asp?u="+u); } is called after the updating is completed Code: ...... cn.open cn.execute sql %> <script language="javascript" type="text/javascript" > addPost(<%=uniq%>); </script> With Firefox this does exactly what I want. However, the code seems to be ignored by IE7 and IE8. When I click "Update" in IE, the "leftbox" doesn't change and the "rightbox" disappears. I can find no IE error. I would appreciate any help. Mac Hi guys, I'm new to the forum, and new to JavaScipt. Here's my problem. I create a form dynamically with Java Script dependin on certail actions a user choose. The end result is a form asking the user to confirm sending one or more SMS message via a mesage gateway outside of my system. Confirmation will then trigger a funtion with one or more statements like this: [CODE] document.frmSMS.action ="http://www.infobip.com/Addon/SMSService/SendSMS.aspx?user=User&password=Password&sender=Sender&SMSText=Friendly Reminder from Joe Bloggs Pty Ltd: You have an outstanding amount of R 4,534.00 that is 135 days ovedue. Please settle to as soon possible.&IsFlash=0&GSM=27826555959"; document.frmSMS.submit(); [ICODE] The target site then responds with either an error code (i.e. -10) or a reference number. The question is - How do I retrieve the error code?? Your assistance will be appreciated. NicOos hello, i have a form in my header that is hidden and i have it show when you click a link, the problem is, when the form appears, it pushes everything down below it, any ideas on how to get around this?
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 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 Say I have a form so long that i want to group sections by category and have them expandable, using css to display:none or display:block these groups. If a user selects an option or two in one of these divs, then fills in some fields, then hides the div... is it going to cause problems when they submit the form if the div is hidden? Thanks! edit: let me ask another question too--what if we add validation into the mix. What happens if a field in a hidden div does not pass validation? Hi All, I'm pretty sure that this will need a javascript solution but could an admin please move it if I have placed it in the wrong section! Basically I am populating a span id with a number value... Code: <div id="behaviour_management" style="overflow: auto;"> Behaviour Management <br><br> <span id="behaviour_management_rating">4</span> What I need to do is grab that value... 4 in this case and pass it to a hidden field or via another method so that it because part of the form for processing on the next page. I've tried a couple of things but I am very shakey on javscript and have a very limited knowledge of it. I've basically tried (and managed) to assign the value to a javscript var by using getElementByID... Code: <script type="text/javascript"> function getRatings() { var s1 = document.getElementById('behaviour_management_rating').innerHTML; } </script> Code: <input type="image" name="submit" src="images/search_list_btn.png" onclick="getRatings()"/> my next plan was to pass that var to a hidden input at which point I am becoming stuck. Can someone tell me if this is even possible and if so perhaps they would be kind enough to point me in the right direction. Any help would be greatly appreciated.. Many thanks Greens85 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 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? Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <LINK rel="stylesheet" type="text/css" href="<?php $path = $_SERVER['DOCUMENT_ROOT']; $path .= "/php/fleet/includes/website.php"; include_once($path); ?>/php/font.css"></style> </head> <body> <script type="text/javascript"> var showndiv=false; function show() { document.getElementById('fleet1').innerHTML=""; if (showndiv){document.getElementById(showndiv).style.display = 'none'; } theval=Number(document.getElementById('tb').value); switch (theval){ case 120: showndiv='fleet2' break; case 121: showndiv='fleet3' break; case 122: showndiv='fleet4' break; default: document.getElementById('fleet1').innerHTML="Sorry, nothing found" return; } document.getElementById(showndiv).style.display = 'block'; } </script> <script type="text/javascript"> ///////////////////////////////////////////////////// // Between the quotation marks, list the id values of each div. var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4"; ///////////////////////////////////////////////////// IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," "); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,""); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,""); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," "); var IDlist = IDvaluesOfEachDiv.split(" "); function ShowAllDivs() { for(var i=0; i<IDlist.length; i++) { document.getElementById(IDlist[i]).style.display = ""; } } function HideAllDivs() { for(var i=0; i<IDlist.length; i++) { document.getElementById(IDlist[i]).style.display = "none"; } } </script> <form name="myForm"> <input type="text" id="tb"> <input type="button" value="Search" onclick="show()"> </form> <div id="fleet1" style="display:block"> </div> <div id="fleet2" style="display:none" class="fleetdiv"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W599 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table> <table align="right"> <TR> <TD> <a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr> </table> <div id="fleet3" style="display:none"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W601 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table></div> <div id="fleet4" style="display:none"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">122</FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W602 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table></div> </body> </html> http://nctfleetlist.co.uk/div3.php |