www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript/ HTML Transferring form Controls to submit

  1. #1
    Join Date
    Dec 2013
    Posts
    14

    Question Javascript/ HTML Transferring form Controls to submit

    Hi Folks,

    I have been attempting to create a form with 5 text boxes, 1 drop down and a text area. My intention is simple; select an option from the Drop down( except the first i.e "--Select--"), enter the contents into the text box and text area. Once I click submit all the above entered information should get appended to specific links that is hard coded into each drop down option.

    My challenge here is that when I click submit, the controls are no getting passed to the new form i.e. the desired page opens,but the form fields do not get entered. I have cross verified and confirmed that the ids are correct.. I'm guessing that i have made a mistake in the validation. Kindly point out my mistake..

    Code:
    <script type="text/javascript">
    function dpdown(form)
    {
        var a="&name="+document.getElementById('name').value;  //textbox
        var b="&job_id="+document.getElementById('job_id').value;//textbox
        var c="&major"+document.getElementById("major').value;//textbox
        var d="&native="+document.getElementById('native').value;//textbox
        var e="&age="+document.getElementById('age').value;//textbox
        var f="&details="+encodeURIComponent(document.getElementById('details').value);//textarea
        var i, counter = 0;
        var ddl = document.getElementById("jobs");//dropdown
        var selectedValue = ddl.options[ddl.selectedIndex].value;
    	for(var i=0; i < obj.options.length; i++)
             {   
                  if(obj.options[i].selected) // to check if the person has chosen a suitable degree
    		   if (selectedValue == "selectdegree")
                         {
                           alert("Please select your correct degree");
                         } 
                       else
                        {
           		        ++counter;	 
                           window.open('https://'+form.elements[i].value+a+b+c+d+e+f,'_blank'); // when the submit button is clicked, all the above fields should get appended to a preset link which has been hardcoded for each degree.
                        }
              }
    }
    
    function cleartext()// to clear the form (works correctly)
    {
     document.form.details.value='';
    }
    HTML Code:
    <form onsubmit="dpdown(this); return false;"> // at the beginning of the form
    '
    '
    '
    '
     <input type="submit" value=" Create form" /> // not working
     <input type='reset' value='Clear Ticket' name='reset' onclick="return resetForm(this.form);cleartext();"> // works well
    I apologize for not posting the entire code as the rest of the information is private.

    Thanks in advance for your help.

    Regards
    Severus

  2. #2
    Join Date
    Dec 2013
    Posts
    14

    resolved Issue Resolved [Solution to the above question]

    <html>
    <head>
    <script language="javascript">
    function dpdown(){
    var a="&name="+document.getElementById('name').value; //textbox
    var b="&job_id="+document.getElementById('job_id').value;//textbox
    var c="&major"+document.getElementById('major').value;//textbox
    var d="&native="+document.getElementById('native').value;//textbox
    var e="&age="+document.getElementById('age').value;//textbox
    var f="&details="+encodeURIComponent(document.getElementById('details').value);//textarea
    var i, counter = 0;
    var ddl = document.getElementById("jobs");//dropdown
    var selectedValue = ddl.options[ddl.selectedIndex].value;
    for(var i=0; i < ddl.length; i++)
    {
    if(ddl.options[i].selected) // to check if the person has chosen a suitable degree
    if (selectedValue == "selectdegree")
    {
    alert("Please select your correct degree");
    }
    else
    {
    ++counter;
    value=ddl.options[i].value;
    window.open('https://'+value+a+b+c+d+e+f,'_blank'); // when the submit button is clicked, all the above fields should get appended to a preset link which has been hardcoded for each degree.
    }
    }
    }

    function cleartext()
    {
    document.form.details.value='';
    }
    </script>
    </head>
    <body>
    <form>
    <input type="text" id="name"/>
    <input type="text" id="job_id"/>
    <input type="text" id="major"/>
    <input type="text" id="native"/>
    <input type="text" id="age"/>
    <input type="textarea" id="details"/>
    <select id="jobs" >
    <option value="www.google.com">google</option>
    <option value="www.yahoo.com">yahoo</option>
    <option value="www.webdeveloper.com">Web developer</option>
    </select>
    <input type="button" value=" Create form" onclick="dpdown();"/>
    <input type='reset' value='Clear Ticket' name='reset' onclick="return resetForm(this.form);cleartext();">
    </form>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles