CODEWITHSUNDEEP
javascripthtml
Arif
Arif

Reputation: 1211

Radio button javascript validation

I have 2 radio buttons A & B. the B button also have one text field.

By default next button is hidden and it should appear in the following cases

  1. If user click button A
  2. User click button B and enter text in the textfield

I try this:

JavaScript

window.onload=function(){
   document.getElementById("next").style.display='none';
} 

function shownext(){
  var A = document.getElementById('A').value;
  var B = document.getElementById('B').value;
  var name = document.getElementById('name').value;
  if(A != "" || (B != "" && name != "")){
  document.getElementById("next").style.display='block';
     return false;
  }
  if(A == "" && B == "" && name == ""){
  document.getElementById("next").style.display='none';
     return false;
  }
}

HTML

<input type="radio" name="A" id="A" value="A" onClick="shownext();"/>
<input type="radio" name="A" id="B" value="B" onClick="shownext();"/>
<input type="text" name="name" id="name" onKeyDown="shownext();" onKeyUp="shownext();"/>

<a href="#q2" id="next"><img src="next.png"/></a>

Upvotes: 0

Views: 2279

Answers (1)

lanzz
lanzz

Reputation: 43158

You have a syntax error in your first if statement — you're opening more parentheses than you're closing.

Your radio buttons always have a value, so you cannot check their state by just inspecting the value. You need to inspect their checked property instead.

You also don't need both ifs, an else to the first if would be more appropriate, since you basically have only two possible outcomes (show the "next" button or hide it).

Here is a working demo of the fixed code.

Upvotes: 1

Related Questions