2016-08-17 50 views
0

我有兩種形式。我希望用戶可以通過上面的一個單選按鈕選擇其中的一個。表單通過輸入無線電ID啓用(選中)

我想要做的是獲得單選按鈕的值,並通過此值使其中一個窗體啓用。

所以我試着用JavaScript和輸入射頻ID,但我沒有成功:

<script> 
 
    window.addEventListener('load', init); 
 
    function init(){ 
 
     var radio = document.getElementsByName ("questions"); 
 
      for (var i=0; i<radios.length; i++) { 
 
      if(radio[i].getElementById.checked == "questions_1") { 
 
      radio[i].addEventListener(seleccionar); 
 
     } 
 
    } 
 

 
    function trigger() { 
 
     elementsForm = document.forms['question'].elements; 
 
     for (var y=0; y<elementsForm.length; y++) { 
 
     elementsForm[y].disabled=false; 
 
     } 
 
    } 
 

 
</script>

這裏是我的代碼(HTML和CSS):

.category_1 { 
    height: 50px; 
    padding-top: 2%; 
} 

.question { 
    display: inline-flex; 
    margin-left: 5%; 
} 

.q-text { 
    font-weight: 600; 
} 

.q1 { 
    width: 44%; 
} 

.q2 { 
    width: 44%; 
} 

.form { 
    display: inline-flex; 
    margin-left: 5%; 
} 

.form.q1 { 
    width: 44%; 
} 

.form.q2 { 
    width: 44%; 
} 

.data { 
    margin-top: 5%; 
} 

.data label { 
    opacity: 0.5; 
} 

input[type=text] { 
    width: 100%; 
} 

select { 
    width: 100%; 
} 

textarea { 
    width: 98%; 
} 

input[type=submit] { 
    display: block; 
    margin: auto; 
} 
<body> 

<div class="category_1"> 

    <div class="question q1"><input type="radio" name="question" value="question_1" id="question_1"> 
    <div class="q-text">QUESTION 1</div></div> 

    <div class="question q2"><input type="radio" name="question" value="question_2" id="question_2"> 
    <div class="q-text">QUESTION 2</div></div> 

</div> 

<div class="form q1"> 
<form name="q1" method="post" action=""> 

<div class ="data"> 
    <label for="others">Name:</label> 
    <input type="text" name="name" disabled>  
</div> 

<div class="data"> 
     <label for="others">Select an item:</label> 
     <select name="items-q1" disabled> 
      <option value="it1">item 1</option> 
      <option value="it2">item 2</option> 
      <option value="it3">item 3</option> 
      <option value="it4">item 4</option> 
     </select> 
</div> 

<div class="data"> 
     <label for="others">Anything else?</label> 
     <textarea name="more" disabled></textarea> 
</div> 

<div class="data"> 
     <input type="submit" value="submit" disabled> 
</div> 
</form> 
</div> 


<div class="form q2"> 
    <form name="q2" method="post" action=""> 

<div class ="data"> 
    <label for="others">Name:</label> 
    <input type="text" name="name" disabled>  
</div> 

<div class ="data"> 
<label for="others">Choose an option:</label><br> 
<input type="radio" name="option" value="o1" disabled><label for="others">1</label> 
<input type="radio" name="option" value="o2" disabled><label for="others">2</label>  
</div>  


<div class="data"> 
     <label for="others">Anything else?</label> 
     <textarea name="more" disabled></textarea> 
</div>  


<div class="data"> 
     <input type="submit" value="submit" disabled> 
</div> 
</form> 
</div> 
</body> 

我真的是ppreciate任何建議。所有的

回答

0

首先,我注意到你用錯了名字 獲得收音機的 「問題」 不是 「問題」

<script> 
    var rad = document.getElementsByName('question'); 
    for(var i = 0; i < rad.length; i++) { 
     rad[i].onclick = function() { 
     if(this.value == "questions_1") { 
     //input logic to display form 
     //This is where you run isTrue() Function 
      isTrue(data); 
     } 
     else{ 
     //This is where you run isFalse() function 
     isFalse(data); 
     } 
      }; 
     } 
//Function to run if its true 
    function isTrue(data){ 
     //something equals something 
    } 

//Function to run if its false 
function isFalse(data){ 
    //something equals something 
} 
</script> 

Reference Link

+0

這工作,但如何在條件爲真的情況下如何在要執行的代碼中添加函數?例如 – virtual8870

+0

'' – virtual8870

+0

if在其真實時運行,其他運行在假時運行。我已經編輯了答案來說清楚。 –

0

<script> 
 
var rad = document.getElementsByName('question'); 
 
for(var i = 0; i < rad.length; i++) { 
 
    rad[i].onclick = function() { 
 
     if(this.value == "question_1") { 
 
     e1(); 
 
     }else { 
 
     e2();  
 
     } 
 
    }; 
 
} 
 
    
 
function e1() { 
 
    var eform1 = document.querySelectorAll('.q1 input[type=text], .q1 select, .q1 textarea, .q1 input[type=submit]'); 
 
    for(var i = 0; i < eform1.length; i++) { 
 
    eform1[i].disabled = false; 
 
    } 
 
} 
 
    
 
function e2() { 
 
    var eform2 = document.querySelectorAll('.q2 input[type=text], .q2 input[type=radio], .q2 textarea, .q2 input[type=submit]'); 
 
    for(var i = 0; i < eform2.length; i++) { 
 
    eform2[i].disabled = false; 
 
    } 
 
}  
 
</script>

相關問題