Javascript/ HTML 传输表单控件提交答案

【问题标题】：Javascript/ HTML Transferring form Controls to submitJavascript/ HTML 传输表单控件提交
【发布时间】：2014-08-06 11:28:44
【问题描述】：

我一直在尝试创建一个包含 5 个文本框、1 个下拉菜单和一个文本区域的表单。我的意图很简单；从下拉列表中选择一个选项（除了第一个，即“--Select--”），将内容输入到文本框和文本区域。单击提交后，上述所有输入信息都应附加到特定链接，这些链接硬编码到每个下拉选项中。

我的挑战是，当我单击提交时，控件没有传递给新表单，即打开了所需的页面，但没有输入表单字段。我已经交叉验证并确认 id 是正确的。我猜我在验证中犯了一个错误。请指出我的错误..

Javascript 代码

<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 代码

    <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

【问题讨论】：

obj 来自哪里？
我认为您无法打开新的浏览器窗口以及值。所以我认为您首先需要将输入的值放入 cookie 中，然后您可以在页面上解析值。

标签： javascript html forms submit getelementbyid

【解决方案1】：

请检查。

<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.stackoverflow.com">stackoverflow</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>

【讨论】：

您好 user3875452，感谢您的编辑，代码似乎部分工作，尽管在删除 'form.elements[i].value' 部分后，链接没有被拉出，而是全部应该附加到链接的其他字段正在打开..有什么方法可以纠正这个错误？
我的建议是将 form.elements[i] 分配给变量并在 indow.open.eg 中使用此变量。价值="www.google.com"; window.open('https://'+value+a+b+c+d+e+f,'_blank');
更具体地说，下拉列表中的每个选择都有一个链接，当我单击下拉列表中的选项并单击提交时，该链接应与这些附加字段一起在新页面中打开。 ..现在只有新标签与字段一起打开，但实际链接没有打开..
完美它就像一个魅力:) 我还有一个关于下拉菜单的问题。如果要添加另一个下拉菜单，我可以使用相同的方法吗？因为对于我添加的下一个下拉菜单，所选值应显示在文本框中..这可能吗？