如何在javascript的radio下拉菜单中显示选择特定收音机时的输入框_Javascript_Html_Forms

如何在javascript的radio下拉菜单中显示选择特定收音机时的输入框

javascript html forms

如何在javascript的radio下拉菜单中显示选择特定收音机时的输入框,javascript,html,forms,Javascript,Html,Forms,我的收音机下拉菜单如下： <form id="productlist" onchange=""> <label class="radio"> <input type="radio" class="region_id" id="product" value="prod1" name="region" onclick="someFunction()">Product_id 1 </label> <label class="radio">

我的收音机下拉菜单如下：

<form id="productlist" onchange="">
<label class="radio">
<input  type="radio" class="region_id" id="product" value="prod1" name="region" onclick="someFunction()">Product_id 1
</label>
<label class="radio">
<input type="radio" class="region_id" id="product" value="prod2" name="region" onclick="someFunction()">Product_id 2
</label>
<label class="radio">
<input type="radio" class="region_id" id="product" value="" name="region" onclick="someFunction()">Manual Product   </label>

此表单使用户可以从下拉列表中选择特定产品。但是我想增加用户手动输入产品id的功能。这将由第三台收音机完成。意味着如果用户选择第三台收音机，它应该打开一个带有提交按钮的文本框，用户将通过该按钮输入手动产品id。另外，输入的值应该可以被我在onclick事件中调用的某个函数访问。理想情况下，在someFunction定义中的前两个收音机中，我可以使用此.value访问所选收音机的值。如果第三台收音机使用输入框接受手动产品id，我该怎么做

我是javascript新手。你能帮我做这个吗。

下面的代码可能会有帮助：-

 <html>
        <head>
          <script type="text/javascript">
            function show() { 
            document.getElementById('area').style.display = 'block';
            document.getElementById('submit').style.display = 'block'
            }
            function hide() { 
            document.getElementById('area').style.display = 'none'; 
            document.getElementById('submit').style.display = 'none'
                            }
          </script>
        </head>
        <body>        
          <form name="radios">
            <INPUT TYPE=RADIO NAME="X" VALUE="H" onclick="hide();"/>A 
            <INPUT TYPE=RADIO NAME="X" VALUE="L" onclick="hide();"/>B 
            <INPUT TYPE=RADIO NAME="X" VALUE="LL" onclick="show();"/>C
            <TEXTAREA id="area" style="display: none;" NAME="data" ROWS=10 COLS=50></TEXTAREA>   
            <INPUT TYPE=submit value="submit" id="submit" style="display:none" onclick="show();"/>
          </form>
        </body>
    </html>

您需要添加一个div来隐藏和显示input和submit按钮元素

.hidden{
  display:none;
}

最初，当您单击显示的第三个单选按钮时，它将被隐藏，您可以在此处输入id。一旦您在文本框中输入一些id并单击前两个单选按钮，您只需通过其id获取该输入元素的值。当您热按submit按钮时，也可以这样做

<form id="productlist" onchange="">
    <label class="radio">

      <input  type="radio" class="region_id" id="product" value="prod1" name="region" onclick="someFunction()">Product_id 1
    </label>
    <br>
    <label class="radio">
      <input type="radio" class="region_id" id="product" value="prod2" name="region" onclick="someFunction()">Product_id 2
    </label>
    <br>
    <label class="radio">
      <input type="radio" class="region_id" id="thirdChk" value="" name="region" onclick="someFunction()">Manual Product   
    </label>

    <div class="hidden" id="manualProductIdContainer">
        <input type="text" id="productId" placeholder="Enter product id">
        <button type="button" id="btnSubmit">Submit</button>
    </div>    
</form>

<script>
    $(document).ready(function() {
        $(document).on('click', '#thirdChk', function() {
            $('#manualProductIdContainer').removeClass('hidden');
        });
        $(document).on('click', '#btnSubmit', function() {
            var productId = $('#productId').val();
            if(productId){
              alert(productId);
            }
            else{
              alert("please enter something in the textbox")
            }
        })

    });

    function someFunction() {
        var productId = $('#productId').val();
        if(){
            alert(productId);
        }           
    }
</script>

演示：

我根据您的要求制作了一个箱子

Javascript

(function() {
  var output=document.getElementById('output');
  var getCustomValue;
  this.someFunction = function(id) {

    if (id === undefined || id==="") {
      document.querySelector('#custom-wrapper').style.display = 'block';

 output.innerHTML=getCustomValue;

    } else {
      document.querySelector('#custom-wrapper').style.display = 'none';

      console.log(id);
      output.innerHTML=id
    }
  }
  this.setCustomerValue = function() {
    getCustomValue = document.querySelector('#custom-value').value;
    document.querySelector('#product3').setAttribute("value",getCustomValue);

    document.querySelector('#custom-wrapper').style.display = 'none';
   output.innerHTML=getCustomValue
  }
})();

HTML

如果第三台收音机打开输入类型文本，请使用DOM.innerHTML并获取用户将在输入中写入的值。请创建一个提琴，以便更好地理解您的问题。还有一点，所有的复选框在你的HTML中都有相同的id，你不能在同一个页面中的不同元素有相同的id@库塔，我不知道为什么我不能添加链接。您可以复制链接并粘贴以检查这一点。为了简单起见，我使用了jquery，但不使用jquery也可以实现同样的效果

<body>
  <form id="productlist">
    <label class="radio">
      <input type="radio" class="region_id" id="product1" value="prod1" name="region" onclick="someFunction(this.value)">Product_id 1
    </label>
    <label class="radio">
      <input type="radio" class="region_id" id="product2" value="prod2" name="region" onclick="someFunction(this.value)">Product_id 2
    </label>
    <label class="radio">
      <input type="radio" class="region_id" id="product3" value="" name="region" onclick="someFunction()">Manual Product
      <div id="custom-wrapper">
        <input type="text" id="custom-value" value="">
        <input type="button" onclick="setCustomerValue()" value="Add Product" />
      </div>
    </label>

    <div id="output">

    </div>
</body>