CODEWITHSUNDEEP
javascripthtmlformsradio-button
Erick Skrobot
Erick Skrobot

Reputation: 189

HTML radio input with (required) text option for "other"

I have a set of radio inputs with an option "other" that has a text field. My question is how I make the text field required when the other option is selected.

The code I came up with so far::

<form method="POST" action="testPage.php">
  <input type="radio" name="option" value="1">Option 1<br>
  <input type="radio" name="option" value="2">Option 2<br>
  <input type="radio" name="option" value="3">Option 3<br>
  <input type="radio" name="option" value="">Other 
  <input type="text" name="othertext" onchange="changeradioother()">
  <input type="submit" value="Submit">
</form>

<script>

  function changeradioother(){
  var other= document.getElementById("other");
  other.value=document.getElementById("inputother").value;
  }

</script>

Upvotes: 2

Views: 1875

Answers (3)

Xlander
Xlander

Reputation: 1331

You can do something like that. Going through all radio button to check which was clicked.

By the way, you did not put an id to the radio button Other.

var radio = document.querySelectorAll("input[name='option']");

for(var i = 0;i< radio.length;i++){
  radio[i].onclick = function(){
    if(this.id == "other"){
      document.getElementById('otherText').setAttribute("required", true);
    }else{
      document.getElementById('otherText').removeAttribute("required");
    }
  }
}
<form method="POST" action="testPage.php">
  <input type="radio" name="option" value="1">Option 1<br>
  <input type="radio" name="option" value="2">Option 2<br>
  <input type="radio" name="option" value="3">Option 3<br>
  <input type="radio" name="option" id="other">Other 
  <input type="text" name="othertext" id="otherText">
  <input type="submit" value="Submit">
</form>

Upvotes: 1

Shailendra Sharma
Shailendra Sharma

Reputation: 6992

There are many diff ways to this one is here give id to your radio box which is other and give id to text box. 

 function changeradioother(){
 
  if(document.getElementById("Other").checked ) {
     if(document.getElementById("inputtext").value == ''){
         alert('input required');
     }
  }
     return false
  }
<form method="POST" action="testPage.php" onsubmit="return changeradioother()">
  <input type="radio" name="option" value="1">Option 1<br>
  <input type="radio" name="option" value="2">Option 2<br>
  <input type="radio" name="option" value="3">Option 3<br>
  <input type="radio" name="option" value="" id="Other">Other 
  <input type="text" name="othertext" id="inputtext" >
  <input type="submit" value="Submit">
</form>

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

try calling a function when other radio button is clicked to set input field to required :

<script>

function changeradioother(){
	  var other= document.getElementById("other");
	  other.value=document.getElementById("inputother").value;
	  }
function setRequired(){

	document.getElementById("inputother").required=true;
}

function removeRequired(){
if(document.getElementById("inputother").required == true){
	document.getElementById("inputother").required=false;
}
}
</script>

<form method="POST" action="testPage.php">
  <input type="radio" name="option" value="1" onclick="removeRequired();">Option 1<br>
  <input type="radio" name="option" value="2" onclick="removeRequired();">Option 2<br>
  <input type="radio" name="option" value="3" onclick="removeRequired();">Option 3<br>
  <input type="radio" name="option" value="" onclick="setRequired();" id="other">Other 
  <input id="inputother" type="text" name="othertext" onchange="changeradioother()">
  <input type="submit" value="Submit">
</form>

Upvotes: 1

Related Questions