在HTML表单中添加下拉选项
Add a Drop Down Option in an HTML form
我是否可以在我的两个表格上添加一个下拉选项,如性别(男性或女性选项)和验证(如果是或否),然后当我点击提交时,它会显示我输入的那个?
<form id="myForm">
Phone: <br><input type="text" name="Phone Number" placeholder="Phone Number"/><br/>
Gender: <br><input type="text" name="Gender" placeholder="Gender"/><br/>
INBOUND: <br><input type="text" name="INBOUND" placeholder="INBOUND"/><br/>
Name: <br><input type="text" name="Name" placeholder="Name"/><br/>
Status: <br><input type="text" name="Status" placeholder="Status" /><br/>
<button type="button" onclick="ShowText();">Submit</button>
</form>
<p>Result:</p>
<p><textarea cols=40 rows=8 id="show" onClick='selectText(this);'></textarea></p>
<script>
function ShowText(){
// find each input field inside the 'myForm' form:
var inputs = myForm.getElementsByTagName('input');
// declare 'box' variable (textarea element):
var box = document.getElementById('show');
// clear the 'box':
box.value = '';
// loop through the input elements:
for(var i=0; i<inputs.length; i++){
// append 'name' and 'value' to the 'box':
box.value += inputs[i].name + ': '+inputs[i].value+''n';
}
}M
function selectText(textField)
{
textField.focus();
textField.select();
}
</script>
<textarea rows="8" cols="40">
Issue:
Steps:
</textarea>
在表单中,您应该使用select而不是输入
<select name="Gender" placeholder="Gender"><option>Male<option>Female</select>
接下来,您可以使用querySelectorAll 获取input
标记和select
标记
var inputs = myForm.querySelectorAll('input,select');
综合起来:
<form id="myForm">
Gender:<select name="Gender" placeholder="Gender"><option>Male<option>Female</select><br/>
Name:<input type="text" name="Name" placeholder="Name"/><br/>
<button type="button" onclick="ShowText();">Submit</button>
</form>
<p>Result:</p>
<p><textarea cols=40 rows=8 id="show" onClick='selectText(this);'></textarea></p>
<script>
function ShowText(){
// find each input field inside the 'myForm' form:
var inputs = myForm.querySelectorAll('input,select');
// declare 'box' variable (textarea element):
var box = document.getElementById('show');
// clear the 'box':
box.value = '';
// loop through the input elements:
for(var i=0; i<inputs.length; i++){
// append 'name' and 'value' to the 'box':
box.value += inputs[i].name + ': '+inputs[i].value+''n';
}
}
function selectText(textField) {
textField.focus();
textField.select();
}
</script>
相关文章:
- 如何为下拉列表的每个选项添加一个属性
- 使用jQuery向“选择选项”添加默认属性
- 将默认选项添加到ng-if
- 从jquery中的select选项添加两个不同的数组值(text&value)
- 为selectize.js选项添加数据属性
- 将select选项添加到id中
- AngularJS ng选项添加了另一个选项
- 将选项添加到插件msDropdown生成的下拉列表的最佳方式是什么
- 将选项添加到多选并设置为选定
- 如何将空白选项添加到木偶收藏视图生成的选择中
- 如何将此选项添加到此图像选取器项目中
- 使用 XHR 更新服务器文件并将选项添加到 html 选择
- 如何使用 JavaScript 将选项添加到 HTML 表单下拉列表中
- 为什么当我将数据选项添加到骨干模型获取时,它不会触发回调
- 如何将下拉列表中的所有选项添加到 php 中的数组中
- 角度JS多选选项添加额外的?选择
- 自动选择<选项>添加到<选择>
- 如何动态地将所选选项添加到表中
- 动态地将选项添加到 Angular 选定的组合框中
- AngularJS:将选项添加到选择而不选择它