daveh33 Posted January 14, 2008 Share Posted January 14, 2008 I am building an online form - the 1st stage is a drop down menu asking the number of people (0-10) - i want a text box for each person to enter their name. what code is best to use to for this?? Quote Link to comment Share on other sites More sharing options...
tinker Posted January 14, 2008 Share Posted January 14, 2008 either you use javascript, or the page comes back and you regenerate the page... i'd prolly suggest the js way! Quote Link to comment Share on other sites More sharing options...
daveh33 Posted January 14, 2008 Author Share Posted January 14, 2008 how would I do it in javascript? I found this example - but dont no how to edit it with my $_POST['num'] variable <script type="text/javascript"> <!-- var linebreak = "<br />"; document.write("For loop code is beginning"); document.write(linebreak); for(i = 0; i < 5; i++){ document.write("Counter i = " + i); document.write(linebreak); } document.write("For loop code is finished!"); </script> Quote Link to comment Share on other sites More sharing options...
tinker Posted January 14, 2008 Share Posted January 14, 2008 i'd probably use a div tag and use innerHTML to rewrite that particular area with the new form (form part) As for the $_POST['num'] bit i'm not sure where this is, if it's while generating the page then see this for an example: <?php print "<javascript>function doit() { var num = ".$_POST['num']."; } </javascript>"; ?> Quote Link to comment Share on other sites More sharing options...
rhodesa Posted January 14, 2008 Share Posted January 14, 2008 This code is untested and written on the fly...but it should look something like this: <script type="text/javascript"> function loadFields ( ele ) { var fieldNode = document.getElementById('formFields'); fieldNodes.innerHTML = ''; if(!ele.value.length) return; for(var n=0;n < ele.value;n++) fieldNodes.innerHTML += '<input type="text" name="name_' + n + '" /><br />'; } </script> <form action="POST"> Select the number of people: <select name="num_people" onchange="loadFields();"> <option value=""></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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <div id="formFields"></div> </form> Quote Link to comment Share on other sites More sharing options...
daveh33 Posted January 14, 2008 Author Share Posted January 14, 2008 it creates the drop down menu ok - but doesn't seem to load the fields when you select a value tested on firefox & ie Quote Link to comment Share on other sites More sharing options...
daveh33 Posted January 14, 2008 Author Share Posted January 14, 2008 Trying the other way with the below code:- print "<javascript>function doit() { var num = ".$_POST['num']."; } </javascript>"; displays: - function doit() { var num = 10; } Quote Link to comment Share on other sites More sharing options...
tinker Posted January 14, 2008 Share Posted January 14, 2008 Yes, that demonstrates how to use PHP to output javascript, you do understand that PHP is serverside, javascript and HTML are clientside. You use PHP to generate the page, you asked how to use $_POST['num']. That wasn't a solution to your whole project! And I gotta ask, what did you expect it to output, but I bet it doesn't actually display that on the page? Quote Link to comment Share on other sites More sharing options...
Psycho Posted January 14, 2008 Share Posted January 14, 2008 If this is for a personal site, then a JS solution *may* be suitable. But, if it is for a buisiness site or a site in which errors are not acceptable, then JS is not an appropriate solution. Some user may not have JS enabled. But, you can use a combined approach. I suggest having 10 name fields available by default. Then use JS to display the drop-down and hide the appropriate name fields. So, you will get the functionality you want, but users w/o JS will still be able to enter the names. you would also want the processing page to loop through the name fields and only process ones that have a value. <html> <head></head> <body onload="changeNamesAllowed()"> <script type="text/javascript"> function changeNamesAllowed() { document.test.name_count.style.display = 'inline'; names = document.test.name_count.value; for (i=1; i<=10; i++) { display = (i<=names)?'inline':'none'; document.getElementById('name_'+i).style.display = display; } } </script> <form name="test"> Names to show: <select name="name_count" style="display: none;" onchange="changeNamesAllowed();"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select><br><br> <span id="name_1">Name 1: <input type="text" name="name_1" /><br /></span> <span id="name_2">Name 2: <input type="text" name="name_2" /><br /></span> <span id="name_3">Name 3: <input type="text" name="name_3" /><br /></span> <span id="name_4">Name 4: <input type="text" name="name_4" /><br /></span> <span id="name_5">Name 5: <input type="text" name="name_5" /><br /></span> <span id="name_6">Name 6: <input type="text" name="name_6" /><br /></span> <span id="name_7">Name 7: <input type="text" name="name_7" /><br /></span> <span id="name_8">Name 8: <input type="text" name="name_8" /><br /></span> <span id="name_9">Name 9: <input type="text" name="name_9" /><br /></span> <span id="name_10">Name 10: <input type="text" name="name_10" /><br /></span> </form> </body></html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.