라디오에서 특정 라디오 선택에 입력 상자를 표시하려면 드롭 다운 방법 메뉴는 자바 스크립트 라디오 다운 메뉴

-2

내 드롭은 다음과 같이이다 :라디오에서 특정 라디오 선택에 입력 상자를 표시하려면 드롭 다운 방법 메뉴는 자바 스크립트 라디오 다운 메뉴

<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" 이벤트에서 호출해야합니다. "someFunction()" 정의에서 이상적으로 (처음 2 개의 라디오에서) "this.value"을 사용하여 선택한 라디오의 값에 액세스 할 수 있습니다. 입력 상자를 사용하여 수동 제품 ID를 수락하는 제 3 라디오의 경우 어떻게합니까?

저는 (는) 자바 스크립트를 처음 사용합니다. 이 일을 도와 주실 수 있겠습니까?

출처

2017-04-19 kutta

경우 HTML. –

여기에서 당신의 문제를 이해하는 것이 좋을 수 있도록 바이올린을 만드십시오. 그리고 하나 이상의 체크 박스는 HTML에서 동일한 ID를가집니다. 같은 페이지에서 다른 요소에 대해 동일한 ID를 사용할 수 없습니다. –

나는 당신을 위해 모범을 보였습니다. https://jsfiddle.net/bke6Lf1v/ – Ashraf

아래의 코드는 도움이 될 수 있습니다 : -

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

출처

2017-04-19 06:25:18

당신은 숨길 사업부를 추가하고 입력을 표시하고 버튼 요소를 제출해야합니다. 처음에 당신이 표시되는 세 번째 라디오 버튼을 클릭하고 텍스트 상자에 약간의 ID를 입력하고 첫 번째 두 개의 라디오 버튼을 클릭 here.Once 당신이 당신의 ID를 입력 할 수 있습니다 때 그것은 당신을 숨겨집니다

.hidden{ 
    display:none; 
}

그것의 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/

출처

2017-04-19 06:34:35

@kutta, 링크를 추가 할 수없는 이유를 모르겠습니다. 링크를 복사하여 붙여 넣으면 체크 아웃 할 수 있습니다. –

단순화를 위해 jquery를 사용했지만 Jquery를 사용하지 않고도 동일한 결과를 얻을 수 있습니다 –

downvote의 이유를 알 수 있습니까? –

나는 귀하의 요구 사항에 기초하여 빈을했다.

자바 스크립트

(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 
    } 
})();

세 번째 라디오가 입력 텍스트를 입력 DOM.innerHTML를 사용하여 u는 사용자가 입력에 기록 될 가치를 엽니 다

<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

출처

2017-04-19 06:55:33 fruitjs

라디오에서 특정 라디오 선택에 입력 상자를 표시하려면 드롭 다운 방법 메뉴는 자바 스크립트 라디오 다운 메뉴

답변

관련 문제