HTML表单选项(是或否）然后下拉文本区域

HTML Form Option (Yes or No) Then Dropdown Text Area

本文关键字：然后 文本 区域 选项 表单 HTML      更新时间：2023-09-26

我想要的是有一个文本区域，当我在入站上输入"是"时，如果我点击"是"，它将在底部或左侧打开一个文本区，这样我就可以输入入站项目的名称
如果回答"否"，则不应显示文本区域（默认为否）
之后，我仍然希望它在我单击提交按钮时显示
请看一下我的片段，这样你就会有想法了。

注意：默认为"否"

<html>
    <body>
         
        <form id="myForm">
        Name: <br><input type="text" name="Name" placeholder="Name" size="40"/><br/>
        Phone: <br><input type="text" name="Phone No" placeholder="Phone Number"/><br/>
       
       INBOUND: <br><select name="INBOUND" placeholder="INBOUND"><option>No<option>Yes</select><br/>
        <button type="button" onclick="ShowText();">Submit</button>
        </form>
        <p>Result:</p>
        <p><textarea cols=40 rows=7 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';
                }
            }M
            function selectText(textField) 
              {
                textField.focus();
                textField.select();
              }
            </script>
    </body>
</html>

以下是完整的运行示例。

希望这能帮助你

<html>
        <body>
         
        <form id="myForm">
        Name: <br><input type="text" name="Name" placeholder="Name" size="40"/><br/>
        Phone: <br><input type="text" name="Phone No" placeholder="Phone Number"/><br/>
       
       INBOUND: <br><select name="INBOUND" id="INBOUND" onchange="showTextArea()" placeholder="INBOUND"><option>No<option>Yes</select><br/>
        <button type="button" onclick="ShowText();">Submit</button>
        </form>
        <p>Result:</p>
        <p><textarea cols=40 rows=7 id="show" onClick='selectText(this);'></textarea></p>
          
          <div id="location" style="display:none;"><p>Location:</p>
        <p><textarea cols=40 rows=7  onClick='selectText(this);'></textarea>
            </div>
            </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';
                }
            }M
            function selectText(textField) 
              {
                textField.focus();
                textField.select();
              }
              function showTextArea() 
              {
                var e = document.getElementById("INBOUND");
                var strUser = e.options[e.selectedIndex].value;
                if(strUser == 'Yes')
                  {
                    document.getElementById('location').style.display = "block";
                  }
                else
                  {
                    document.getElementById('location').style.display = "none";
                    }
                
              }
            </script>
        
        
        
        
        
        
        </body></html>

相关文章：