form validation. Radio button check doesn't work and some other problems in form

Question

<!DOCTYPE html>
<html>
<head>
<title>SignUp</title>
<link rel="stylesheet" href="style/style.css">
<style type="text/css">
#signup{ 
    margin-left:200px;
    margin-top:90px;
}
#signup input{
    margin:2px 0px 20px 10px;
    background-color:#EAEAEA;
}

#signup button{
    font-size:16px;
margin-top:50px;
margin-left:150px;
width:100px;
height:31px;
background-color:#333333;
text-align:center;
color:#FFF;
}   
</style>
<script>
function signup()
{
var x1=document.forms["signUpForm"]["username"].value;

var x2=document.forms["signUpForm"]["email"].value;

var x3=document.forms["signUpForm"]["password1"].value;

var x4=document.forms["signUpForm"]["password2"].value; 

var x5="";                                                      /* document.forms[0].radios is an array filled with all radio buttons. Loop through all of                                                       them and see if it is checked. If one is, transfer the value of that radio button to                                                         user_input.*/
var atpos=x2.indexOf("@");
var dotpos=x2.lastIndexOf("."); 
if(document.getElementById('gender_Male').checked) {
    x5="Male";

}else if(document.getElementById('gender_Female').checked) {
  x5="Female";
}

if (x1==null || x1==""|| x2==null || x2==""||  x3==null || x3=="" || x4==null || x4=="" || x5=="")
  {
  alert("Please fill all the required fields");
  return false;
  }

else if (x3!=x4){
    alert("Psswords do not match");
  return false;
}

else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x2.length)
  {
  alert("Not a valid e-mail address");
  return false;

  }
else{

    return document.forms[0].action = "signupdata.php";
}
}

</script>

</head>
<body>
<?php include_once("template_pageTop.php"); ?>
<div id=signup>
<h2>Sign Up Here </h2>
<form  method="post" name="signUpForm" >
<table  border="0" cellpadding="2">
  <tr>
    <td >UserName:*</td>
    <td ><input type="text" name="username" size="30"  ></td>
  </tr>
  <tr>
    <td>Email:*</td>
    <td><input type="text" name="email" size="30" ></td>
  </tr>

  <tr>
    <td>Password:*</td>
    <td><input type="password" name="password1" size="30" ></td>
  </tr>
  <tr>
    <td>Confirm Password:*</td>
    <td><input type="password" name="password2" size="30" ></td>
  </tr>

  <tr>
    <td>Gender:*</td>
    <td ><input type="radio" name="gender" value="male" id="gender_Male">Male<br/>
        <input type="radio" name="gender" value="female" id="gender_Female">Female</td>
  </tr>

  <tr>
      <td><button  onclick= "signup()" >SignUp</button> </td>

      <td><button type="reset" >Cancel</button> </td>
  </tr>

</table>

</form>
</div>
</body>
</html>

There are several things I need to improve in this form.

If there are no errors how to make the signup page visible.(After clicking signUp mine goes to a blank signupdata.php page.How to stop this)
how to check if the radio button (gender) has been filled.My form desn't check that.
When a field is not filled and after error message pops all the filled areas (including correctly filled) vanishes.Is there a way to stop this and keep all the correctly filled data.

I am completely new to web design.Any help please.

possible duplicate of [How can I check whether a radio button is selected in javascript?](http://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-in-javascript) — Mr. Alien, Apr 18 '13 at 12:15
"See if checkbox is selected?" Did you search your favorite search engine? That is a JavaScript 101 task. — epascarello, Apr 18 '13 at 12:16
Welcome. Try searching the site. There's a lot of useful stuff already here. — ColBeseder, Apr 18 '13 at 12:16

score 1 · Answer 1 · answered Apr 18 '13 at 12:17

1

If the radio button is mandatory it is good to ckeck by default one of the radio buttons.

<input type="radio" name="gender" checked  value="male" >Male<br/>
        <input type="radio" name="gender" value="female">Female</td>

answered Apr 18 '13 at 12:17

PSR

39,804
41
111
151

score 0 · Answer 2 · answered Apr 18 '13 at 12:27

0

    <input type="radio" name="gender" checked  value="male" id="male" >Male<br/>
    <input type="radio" name="gender" value="female" id="female">Female</td>

  if(document.getElementById('male').checked) {
      //Male radio button is checked
  }else if(document.getElementById('female').checked) {
      //Female is checked
  }

answered Apr 18 '13 at 12:27

swetha

132
5

Thanks for your help.It works.But is there a way without making one radio default,to check if a radio button is selected.Why doesn't mine work?And also after filling all data when sign up is pressed mine goes to a blank signupdata.php page.How to stop this and make it stay on this same page?Also any help to my question 3 please. – clarkson Apr 18 '13 at 17:10
You can use return false() after every validation to stay on the same page untill all ur form fields are filled up. And If you dont want to check any of the radio button try using both the validations means you need to validate both male checked and female checked. Pls try out this way. – swetha Apr 19 '13 at 04:44
Sory I dont understand what you mean by return false90. – clarkson Apr 19 '13 at 17:42
sorry I don't understand what you mean by return false().I do return false everywhere except the last else clause.I think why it directs to signupdata.php balnk page is because I am returning ,else{ return document.forms[0].action = "signupdata.php"; } – clarkson Apr 19 '13 at 17:44

form validation. Radio button check doesn't work and some other problems in form

2 Answers2