Mortekai Posted July 17, 2009 Share Posted July 17, 2009 I am trying to figure out a way to display the choices made in a form below in a div. Basicly I want a form with checkboxes, dropdowns and radiobuttons and when pressing the submit button it should display the choices below in a div... So, can I do this using getElementById to set variables or do i use the Elements array somehow? Link to comment https://forums.phpfreaks.com/topic/166303-solved-display-orderform-values-in-a-div/ Share on other sites More sharing options...
rhodesa Posted July 17, 2009 Share Posted July 17, 2009 Either way should work. You can either call them all individually with getElementById() or write something generic that loops over all the form elements. If you are looping though, just remember that you will need several cases, as text boxes, checkboxes, and radio buttons are all handled differently Link to comment https://forums.phpfreaks.com/topic/166303-solved-display-orderform-values-in-a-div/#findComment-877005 Share on other sites More sharing options...
Mortekai Posted July 17, 2009 Author Share Posted July 17, 2009 I am trying getElementByID(), but it's not really working... Link to comment https://forums.phpfreaks.com/topic/166303-solved-display-orderform-values-in-a-div/#findComment-877026 Share on other sites More sharing options...
rhodesa Posted July 17, 2009 Share Posted July 17, 2009 Can you post some code? Link to comment https://forums.phpfreaks.com/topic/166303-solved-display-orderform-values-in-a-div/#findComment-877029 Share on other sites More sharing options...
Mortekai Posted July 17, 2009 Author Share Posted July 17, 2009 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> </head> <script language="javascript" type="text/javascript"> function submitForm(){ var dryck=""; var namn = document.getElementById("form1").value; /////////////////// if (document.getElementById("form1").elements[2].checked) dryck="glögg"; else if (document.getElementById("form1").elements[3].checked) dryck="glögg"; document.writeln(dryck + namn); } </script> <body> <form id="form1" name="form1" method="post" action=""> <table border="2" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC"> <tr> <td align="right">Namn</td> <td align="left"><label> <input name="name" type="text" id="name" size="45" /> </label></td> </tr> <tr> <td align="right">Dryck</td> <td align="left"><label> <input type="radio" name="radio" id="radio1" value="radio" /> Glögg<br /> <input type="radio" name="radio" id="radio2" value="radio" /> Julmust<br /> <input type="radio" name="radio" id="radio3" value="radio" /> Sprit</label></td> </tr> <tr> <td align="right">Dresskod</td> <td align="left"><label> <select name="select" id="select"> <option>select:</option> <option>Julmössa</option> <option>Bikini</option> <option>Finkostym</option> </select> </label></td> </tr> <tr> <td align="right">Önskemål</td> <td align="left"><label> <input type="checkbox" name="checkbox" id="checkbox1" /> Kräkas<br /> <input type="checkbox" name="checkbox" id="checkbox2" /> Somna<br /> <input type="checkbox" name="checkbox" id="checkbox3" /> Dö<br /> </label></td> </tr> <tr> <td align="right"> </td> <td align="right"><label> <input type="submit" name="button" id="button" value="Skicka" onClick="submitForm" /> </label></td> </tr> </table> </form> </body> </html> I think I am way off with this one Link to comment https://forums.phpfreaks.com/topic/166303-solved-display-orderform-values-in-a-div/#findComment-877033 Share on other sites More sharing options...
Mortekai Posted July 17, 2009 Author Share Posted July 17, 2009 Ok...I have this now: <script language="javascript" type="text/javascript"> function submitForm(){ var namn = document.getElementById("name").value; /////////////////// var cbs = document.forms[0].elements["radio"]; for(var i=0; i<cbs.length; i++){ cbs[i].checked = true; } document.writeln(namn + cbs); } </script> The output gives the name and [object NodeList] , so how can I output the value of the boxes instead? Link to comment https://forums.phpfreaks.com/topic/166303-solved-display-orderform-values-in-a-div/#findComment-877044 Share on other sites More sharing options...
Mortekai Posted July 17, 2009 Author Share Posted July 17, 2009 I am not sure what I am trying to do with the accursed checkboxes and radiobuttons really... Do I fetch the whole group and then loop through to find the checked one and then pick out the value...or how do I do this? Picking out the value of one ID is not so difficult, but the concept of filtering through groups of inputs is still not clear to me... Link to comment https://forums.phpfreaks.com/topic/166303-solved-display-orderform-values-in-a-div/#findComment-877055 Share on other sites More sharing options...
rhodesa Posted July 17, 2009 Share Posted July 17, 2009 I envision something like: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script language="javascript" type="text/javascript"> function submitForm(){ var form = document.getElementById('form1'); var output = ""; for(var i = 0;i < form.length;i++){ var ele = form[i]; if(ele.tagName == 'SELECT'){ output += "Select '"+ele.name+"': "+ele[ele.selectedIndex].value+"<br />"; }else if(ele.type == 'radio'){ if(ele.checked){ output += "Radio Button '"+ele.name+"': "+ele.value+"<br />"; } }else if(ele.type == 'checkbox'){ if(ele.checked){ output += "Checkbox '"+ele.name+"': "+ele.value+"<br />"; } }else{ output += "Other '"+ele.name+"': "+ele.value+"<br />"; } } document.getElementById('output').innerHTML = output; return false; } </script> </head> <body> <form id="form1" name="form1" method="post" action="" onsubmit="return submitForm();"> <table border="2" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC"> <tr> <td align="right">Namn</td> <td align="left"> <input name="name" type="text" id="name" size="45" /> </td> </tr> <tr> <td align="right">Dryck</td> <td align="left"> <input type="radio" name="radio" id="radio1" value="Glögg" /> Glögg<br /> <input type="radio" name="radio" id="radio2" value="Julmust" /> Julmust<br /> <input type="radio" name="radio" id="radio3" value="Sprit" /> Sprit </td> </tr> <tr> <td align="right">Dresskod</td> <td align="left"> <select name="select" id="select"> <option>select:</option> <option>Julmössa</option> <option>Bikini</option> <option>Finkostym</option> </select> </td> </tr> <tr> <td align="right">Önskemål</td> <td align="left"> <input type="checkbox" name="checkbox[]" id="checkbox1" value="Kräkas" /> Kräkas<br /> <input type="checkbox" name="checkbox[]" id="checkbox2" value="Somna" /> Somna<br /> <input type="checkbox" name="checkbox[]" id="checkbox3" value="Dö" /> Dö<br /> </td> </tr> <tr> <td align="right"> </td> <td align="right"> <input type="submit" name="button" id="button" value="Skicka" /> </td> </tr> </table> </form> <div id="output"></div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/166303-solved-display-orderform-values-in-a-div/#findComment-877080 Share on other sites More sharing options...
Mortekai Posted July 17, 2009 Author Share Posted July 17, 2009 That worked like a charm I'll go over it and see if I can make out how it works I owe you, big time. Link to comment https://forums.phpfreaks.com/topic/166303-solved-display-orderform-values-in-a-div/#findComment-877103 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.