2017-04-19 49 views
-2

我的下拉收音機的菜單是這樣的:如何顯示上選擇一個無線電特定的無線電輸入框下拉菜單中的JavaScript

<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的功能。這將由第3臺電臺完成。意思是如果用戶選擇第三個廣播,它應該打開一個帶有提交按鈕的文本框,用戶將通過該按鈕輸入手動產品ID。 此外,輸入值應該可以通過「someFunction()」,我打電話「onclick」事件。理想情況下(前2個無線電)在「someFunction()」定義我可以通過使用「this.value」訪問所選無線電的值。我如何做到這一點,在第三個電臺將通過使用輸入框接受手動產品ID?

我是javascript的新手。你能幫我做這件事嗎?

+0

如果第三無線電打開輸入型文本使用DOM.innerHTML和u得到這將在輸入用戶寫入值。 –

+0

請創建一個小提琴,以便能夠很好地理解您的問題。還有一個複選框在你的HTML中有相同的ID,你不能在同一頁面的不同元素中使用相同的ID。 –

+0

我爲你做了個例子。 https://jsfiddle.net/bke6Lf1v/ – Ashraf

回答

0

下面的代碼可能會有所幫助: -

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

您需要添加一個隱藏的div和顯示輸入和提交按鈕元素。

.hidden{ 
    display:none; 
} 

最初當你點擊它顯示在第三個單選按鈕,here.Once你輸入一些ID在文本框中,然後單擊前兩個單選按鈕,您可以輸入您的帳號將會被隱藏,你只需要通過它的id來獲取該輸入元素的值。當你熱提交按鈕時也可以完成。

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

DEMO:https://jsfiddle.net/sarojsasmal/Lehkfkuq/8/

+0

@ kutta,我不知道爲什麼我無法添加鏈接。您可以複製鏈接並粘貼以檢查。 –

+0

爲簡單起見,我使用了jquery,但是同樣也可以在不使用jquery的情況下實現 –

+0

我可以知道downvote的原因嗎? –

0

我的客戶要求的基礎上,做了一個箱子。

的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

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

JSBIN

相關問題