SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
Jun 12, 2008, 08:20 #1
- Join Date
- Apr 2006
- Location
- San Jose, US
- Posts
- 27
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Form help - Display input filed dynamically
Hi, I have the following example form in which I want if users click on the checkbox [NOT the submit button], the input text field will be added right away somewhere on the same page, then everything will be submitted when users click on the Submit button.
Right now when I clicked, the page refreshes.
The real list of checkboxes is pretty long, about 30 items. I'm not sure what is a good way of doing this.
Thanks for help!
Code:<form name="contact"> <input type="checkbox" name="Distributor" value="MSN" onclick="generate_formId();" /> MSN<br /> <input type="checkbox" name="Distributor" value="Yahoo" onclick="generate_formId();" /> Yahoo!<br /> <input type="checkbox" name="Distributor" value="Google" /> Google<br /><br /> <script type="text/javascript"> function generate_formId(){ var Distributor_id = new Array() Distributor_id[0]="http://www.msn.com"; Distributor_id[1]="http://www.yahoo.com"; Distributor_id[2]="http://www.google.com"; for (var i=0; i < document.contact.Distributor.length; i++){ if (document.contact.Distributor[i].checked){ document.write('<input name="form_id" type="text" value="'+Distributor_id[i]+'" />');}} //return false; } </script> <input type="submit" value="submit" onclick="generate_formId();" /> </form>
-
Jun 12, 2008, 08:59 #2
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code javascript:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" media="screen" /> <style type="text/css"></style> <script type="text/javascript"> function generate_formId() { var Distributor_id = new Array() Distributor_id[0]="http://www.msn.com"; Distributor_id[1]="http://www.yahoo.com"; Distributor_id[2]="http://www.google.com"; var dataEl = document.getElementById('data'); while(dataEl.childNodes.length > 0) dataEl.removeChild(dataEl.firstChild); var checkboxes = dataEl.parentNode.getElementsByTagName('INPUT'); for(var i = 0; i < checkboxes.length; i++) { if(checkboxes[i].getAttribute('type') == 'checkbox' && checkboxes[i].checked) { var form_id = document.createElement('INPUT'); form_id.setAttribute('type', 'text'); form_id.value = Distributor_id[i]; form_id.name = 'form_id'; dataEl.appendChild(form_id); dataEl.appendChild(document.createElement('BR')); } } } </script> </head> <body> <form name="contact" id="form"> <input type="checkbox" name="Distributor" value="MSN" onclick="generate_formId();" /> MSN<br /> <input type="checkbox" name="Distributor" value="Yahoo" onclick="generate_formId();" /> Yahoo!<br /> <input type="checkbox" name="Distributor" value="Google" /> Google <br /> <br /> <div id="data"></div> <input type="submit" value="submit" onclick="generate_formId();" /> </form> </body> </html>
-
Jun 12, 2008, 10:10 #3
- Join Date
- Apr 2006
- Location
- San Jose, US
- Posts
- 27
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks a lot!
Bookmarks