Textarea锁定

Question

我设计了一个简单的调查表格，但由于某些原因，一行代码无法工作。

问题5.如果用户选择了单选按钮是，那么他们必须在文本区中输入一些内容，否则表单不能被发送。

如果不是，那么文本区应该被锁定，这样就不能输入任何内容。

代码是这样的:女士们先生们，谢谢你们的帮助

5. Are you using other non-franchise service centres? 
<br>
*if yes is there any other reason you would do so other than price
<br>
<input type="radio" name="question5"
<?php if (isset($question5) && $question5=="Yes") echo "checked";?>
value="Yes">Yes
<br>
<input type="radio" name="question5"
<?php if (isset($question5) && $question5=="No") echo "checked";?>
value="No">No
<br>
<textarea name="question5" rows="5" cols="40"><?php echo $question5 </textarea>

Answer 1

Option1:隐藏文本区域

​

function check5(selectedType){
  if (selectedType == 'Yes'){
    document.getElementById('5textarea').style.display = 'block'; 
	
  } else{
    
    document.getElementById('5textarea').style.display = 'none';
  
  }
}

5. Are you using other non-franchise service centres? 
<br>
*if yes is there any other reason you would do so other than price
<br>
<input type="radio" name="question5"  value="Yes" onclick="check5(this.value)"> Yes
<br>
<input type="radio" name="question5" value="No" onclick="check5(this.value)"> No
<br>

<textarea id="5textarea" name="question5" rows="5" cols="40" style="display:none"></textarea>

​

Option2:启用/禁用文本区(未测试的)：

5. Are you using other non-franchise service centres? 
<br>
*if yes is there any other reason you would do so other than price
<br>
<input type="radio" name="question5"  value="Yes" onclick="check5(this.value)"> Yes
<br>
<input type="radio" name="question5" value="No" onclick="check5(this.value)"> No
<br>
<textarea id="5textarea" name="question5" rows="5" cols="40" disabled="true"></textarea>

并将javascript更改为：

function check5(selectedType){
if (selectedType == 'Yes'){
  document.getElementById("5textarea").disabled = false;

} else{

  document.getElementById("5textarea").disabled = true;
}
}

Answer 2

你必须用javascript来做这件事，因为PHP只能在服务器上运行，不能在浏览器的中运行！

在此代码中，如果不需要文本区域，则禁用该文本区域，如果选中"Yes“，并且文本区域没有包含足够的文本，则在提交表单时会出现一个错误：

​

// Javascript:
function validate() {
    var radioYes = document.getElementById('radioYes');
    var textarea = document.getElementById('textarea');
    
    if (radioYes.checked && textarea.value.length < 10) {
        alert('Enter at least 10 characters!');
        textarea.focus();
        return false;
    }
}

function toggle(value) {
	document.getElementById('textarea').disabled = value;
}

/* CSS: */
* {
    font-family: sans-serif;
    margin: 4px;
}

<!-- HTML/PHP: -->
<form action="#">
    5. Are you using other non-franchise service centres?<br>
    *if yes is there any other reason you would do so other than price?<br>
    
    <input type="radio" name="question5" value="Yes" onchange="toggle(this.selected)" id="radioYes">Yes<br>
    <input type="radio" name="question5" value="No" onchange="toggle(!this.selected)">No<br>
    
    <textarea id="textarea" name="question5" rows="5" cols="40" disabled></textarea><br>

    <input type="submit" value="Send" onclick="return validate()" />
</form>

​

JSFiddle