Radio button javascript validation

Question

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>

Answer 1

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 if s, 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 .