Member Avatar for niths

hi all,
i am having problem with javascript validation..My problem is i am having two radio buttons
1.Single
2.Married
By default single is checked.Now when we select married i will get displayed spouse name below.Now if the person check married and didnt enter spouse name then i should get an alert. can any one help me..
Thank u..

<html>
<head>
function hideEnable(){    
document.getElementById('numDiv').style.display = 'inline';
document.getElementById('spousename').style.display = 'inline';
}
function hidedisable(){
 document.getElementById('numDiv').style.display = 'none'; 
 document.getElementById('spousename').style.display = 'none'; 
}
</head>
<body>
<form name="myform" enctype="multipart/form-data" action="joiningform.php" method="post">
<table>
<tr>
                <td align="right"> Marital Status : </td>
                <td align="left">
                    <input type="radio" id="maritalstatus1" name="maritalstatus" value="single" onclick="return hidedisable();" checked="checked"/>
                  Single
                    <input type="radio" id="maritalstatus2" name="maritalstatus" onclick="return hideEnable();" value="married">
                  Married </td>
              </tr>
              <tr>
              <td align="right">
                <DIV id=numDiv  DISPLAY: none">
                        <LABEL>Spouse Name: 
                            </LABEL></td>
                            <td align="left">
                             <input id="spousename" type="text" name="spousename" style="display: none;" >
                             </td>
                             
                        </td></DIV>
</tr>
</table>
</form>
</body>
<html>

i tried this but i didnt get..

if(document.getElementById("maritalstatus2").checked == true)
  {
      frmvalidator.addValidation("spousename","req","Please enter Spouse Name");
  }
  • 3 Contributors
  • 2 Replies
  • 157 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by paulrajj
Member Avatar for mahavir123 
<html>
<head>
<script type="text/javascript">
function hideEnable(){    
document.getElementById('numDiv').style.display = 'inline';


}
function hidedisable(){
 document.getElementById('numDiv').style.display = 'none'; 
}
function val(){
	if(document.getElementById('maritalstatus2').checked == true)
	{
    	if(document.myform.spousename.value==false)
		alert("Please enter Spouse Name");
		return false;
	}
}
</script>
</head>
<body>
<form name="myform" enctype="multipart/form-data" action="" method="post" onsubmit="return val();">
  <table><tr><td height="71" colspan="2"><table width="257" height="128">
    <tr>
      <td align="right"> Marital Status : </td>
      <td align="left"><input type="radio" id="maritalstatus1" name="maritalstatus" value="single" onClick="hidedisable()" checked="checked"/>
        Single
        <input type="radio" id="maritalstatus2" name="maritalstatus" onClick="return hideEnable()" value="married" />
        Married </td>
    </tr>
    <tr>
      <td height="25" colspan="2" align="right"><div id="numDiv" style="display:none">
          <label>Spouse Name:</label>
          <input id="spousename" type="text" name="spousename" >
      </div></td>
      <td></td>
    </tr>
    <tr>
      <td height="71" colspan="2" align="center"><input type="submit"></td>
    </tr>
  </table></td>
    </tr>
</table>
</form>
</body>
<html><html>
<head>
<script type="text/javascript">
function hideEnable(){    
document.getElementById('numDiv').style.display = 'inline';


}
function hidedisable(){
 document.getElementById('numDiv').style.display = 'none'; 
}
function val(){
    if(document.getElementById('maritalstatus2').checked == true)
    {
        if(document.myform.spousename.value==false)
        alert("Please enter Spouse Name");
        return false;
    }
}
</script>
</head>
<body>
<form name="myform" enctype="multipart/form-data" action="" method="post" onsubmit="return val();">
  <table><tr><td height="71" colspan="2"><table width="257" height="128">
    <tr>
      <td align="right"> Marital Status : </td>
      <td align="left"><input type="radio" id="maritalstatus1" name="maritalstatus" value="single" onClick="hidedisable()" checked="checked"/>
        Single
        <input type="radio" id="maritalstatus2" name="maritalstatus" onClick="return hideEnable()" value="married" />
        Married </td>
    </tr>
    <tr>
      <td height="25" colspan="2" align="right"><div id="numDiv" style="display:none">
          <label>Spouse Name:</label>
          <input id="spousename" type="text" name="spousename" >
      </div></td>
      <td></td>
    </tr>
    <tr>
      <td height="71" colspan="2" align="center"><input type="submit"></td>
    </tr>
  </table></td>
    </tr>
</table>
</form>
</body>
<html>

Try to understand

Edited by mahavir123 because: n/a
Member Avatar for paulrajj

Hi,

just copy and paste the below code and check the validation part.

<html>
<head>
<script type="text/javascript">
function hideEnable(){    
document.getElementById('numDiv').style.display = 'inline';
document.getElementById('spousename').style.display = 'inline';
}
function hidedisable(){
 document.getElementById('numDiv').style.display = 'none'; 
 document.getElementById('spousename').style.display = 'none'; 
}

function validation() {
	if(document.getElementById('maritalstatus2').checked == true) {
		if(document.getElementById('spousename').value == '') {
			alert("Please enter spouse name");	
			return false;
		} else {
			return true;
		}
	}
}

</script>
</head>
<body>
<form name="myform" enctype="multipart/form-data" action="joiningform.php" method="post" onSubmit="return validation();">
  <table>
    <tr>
      <td align="right"> Marital Status : </td>
      <td align="left"><input type="radio" id="maritalstatus1" name="maritalstatus" value="single" onclick="return hidedisable();" checked="checked"/>
        Single
        <input type="radio" id="maritalstatus2" name="maritalstatus" onclick="return hideEnable();" value="married">
        Married </td>
    </tr>
    <tr>
      <td align="right"><div id="numDiv"  style="display:none">
        <LABEL>Spouse Name: </LABEL></td>
      <td align="left"><input id="spousename" type="text" name="spousename" style="display: none;" ></td>
      </td>
      </div>
    </tr>
    <tr>
    	<td align="center" colspan="2"><input type="submit" name="submit" value="Submit">
    </tr>
  </table>
</form>
</body>
<html>

I think the mahavir's code is working fine. if yes leave my part.

Edited by paulrajj because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.