Question

我可以在我的两个表单上添加一个下拉选项，例如性别（男性或女性选项）和VERID if（是或否），然后当我点击提交时它会显示我输入的那个？

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

Answer 1

在表单中，您应使用select代替input

<select name="Gender" placeholder="Gender"><option>Male<option>Female</select>

接下来，您可以使用querySelectorAll

获取input代码和select代码

var inputs = myForm.querySelectorAll('input,select');

全部放在一起：

＆＃13;

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

＆＃13;

在HTML表单中添加下拉选项

1 个答案: