Question

我对HTML和Javascript还是很陌生，我正在尝试做一个简单的程序，在其中填写表格，当我点击“提交”时，结果被保存（无论是否在文本文件中，处于警报状态或其他任何状态，我只想能够保存结果）。到目前为止，我已经有了这段代码：

                h2 {margin-top: 50px}
                input {margin-top: 50px}
                label {display: inline-block; width: 180px; text-align: left; margin-top: 15px}

        <h1>Form</h1>
        <form enctype="multipart/form-data" method="post">  

             <h2>Enter: </h2>

                <label> Gender: </label>               
                    <select name='Gender'>                
                        <option value='Female' selected>Female</option>
                        <option value='Male'>Male</option>               
                    </select><br />                
                <label>Status: </label>                
                    <select name='Status'>               
                        <option value='Single' selected>Single</option>
                        <option value='Married'>Married</option>             
                    </select><br />                     
  <input type = 'Submit' id="Submit" onclick="myFunction()" value = 'Submit'>          
  </form>

{{1}}

页面将按我的需要显示，但是当我填写值并单击“提交”时，没有任何反应。我究竟做错了什么？再说一次，我对此很陌生，因此我对所有基本知识都不太了解。我在网上查找了一些解决方案，但是到目前为止，没有任何解决方案，而且大多数解决方案似乎都是针对“文本”而非“选项”的，所以我想知道是否有一种方法可以处理这种输入。

任何帮助或参考都将非常有用。谢谢！

Answer 1

您只想稍微调整一下JavaScript，使其不超出示例范围即可。它是getElementsByName（请注意S），并且由于可以有多个，所以您将获得第0个。

<script>
function myFunction(){
var Gender = document.getElementsByName('Gender')[0].value;
var Status = document.getElementsByName('Status')[0].value;
alert(Gender + ' - '+ Status);
}
</script>

http://jsfiddle.net/cdwz6x0n/4/

Answer 2

您遇到的问题document.getElementbyName不存在，但是document.getElementsByName是您可以使用的替代方法。另外，由于您的输入设置为type="submit"，因此它试图将表单数据提交到未设置的位置，因此我将其更改为type="button"。

function myFunction() {
  var Gender = document.getElementsByName('Gender')[0].value;
  var Status = document.getElementsByName('Status')[0].value;
  alert('Gender: ' + Gender + ', Status: ' + Status);
}

h2 {
  margin-top: 50px
}

input {
  margin-top: 50px
}

label {
  display: inline-block;
  width: 180px;
  text-align: left;
  margin-top: 15px
}

<h1>Form</h1>

<h2>Enter: </h2>

<form enctype="multipart/form-data" method="post">
  <label> Gender: </label>
  <select name='Gender'>
    <option value='Female' selected>Female</option>
    <option value='Male'>Male</option>
  </select><br />
  <label>Status: </label>
  <select name='Status'>
    <option value='Single' selected>Single</option>
    <option value='Married'>Married</option>
  </select><br />
  <input type='button' id="Submit" onclick="myFunction()" value='Submit'>
</form>

单击按钮后如何从表单中获取结果（JavaScript和HTML）

2 个答案: