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

If user click button A
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>

Switch to jQuery? Also, you would like to have same name for both radio buttons. — hjpotter92
– hjpotter92, Commented Jan 21, 2013 at 7:31
@BackinaFlash ya by mistake I give different names, I want to fix this code instead of switching to jQuery — Arif
– Arif, Commented Jan 21, 2013 at 7:38

lanzz · Accepted Answer · 2013-01-21 07:46:32Z

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 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.

answered Jan 21, 2013 at 7:46

lanzz

43.4k12 gold badges93 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Radio button javascript validation

JavaScript

HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JavaScript

HTML

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related