JavaScript help reqd

ejr22 · 30 Nov 2010 at 17:55

Hi all,

New to JavaScript so please forgive my ignorance.

I am trying to do a bit of form validation but because my lecturer is fairly useless at explaining things I thought I'd turn to you.

Basically it is just a form with 4 fields; 1st Name, Surname, Address, Amount.
It needs to produce pop-ups if there is nothing entered in one of the fields on submit, and also if there is a number other than 1-10 in the amount. Secondly it needs to create a pop-up if the submission of the form is successful.

I have got the first bit sorted but can't work out how the "success" pop-up is generated. Please could someone advise what I am missing/what is wrong in my code?

If everything in the form is correct it just clears itself.

Thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {
    alert(alerttxt);return false;
    }
  else
    {
    return true;
    }
  }
}
function success_form(thisform,alerttxt)
{
	with (thisform)
	{
		if (validate_form(thisform, "Your Order was sucessful!")==true)
		{alert(alerttxt);return true;}
}
}
function validate_form(thisform)
{
	var numEntered=document.personaldetails.amount.value;
{
with (thisform)
  {
  if (validate_required(firstname,"First Name must be filled out!")==false)
  {firstname.focus();return false;}
  if (validate_required(surname,"Surname must be filled out!")==false)
  {surname.focus();return false;}
  if (validate_required(address,"Address must be filled out!")==false)
  {address.focus();return false;}
  if (validate_required(amount,"Amount must be filled out!")==false)
  {amount.focus();return false;}
  if((numEntered>=1)&&(numEntered<=10))
{
return true;
} 
else
{
alert("You must enter an amount between 1-10");
return false;}
  }
}
}
</script>
<link href="lecture10.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form name="personaldetails" onsubmit="return validate_form(this)" method="post">
  <p>
  First Name: 
  <input type="text" name="firstname" size="30">
  </p>
  <p>
  Surname:    
  <input type="text" name="surname" size="30">
  </p>
  <p>
  Address: <input type="text" name="address" size="30">
  </p>
  <p>
  Amount: <input type="text" name="amount" size="5">
  </p>
  <p>
  <input type="submit" value="Submit">
  </p>
</form>

	

</body>
</html>

Pho · 30 Nov 2010 at 19:16

You could just replace:

return true; (the one on line 46)

with:

alert('You win!');

Randomface74 · 30 Nov 2010 at 19:37

Code:

function validate_form()
{
    if (document.getElementById("firstname").value == "")
    {
         alert("First Name must be filled out!");
         return false;
    }

    // etc

     return true;
}

fez · 1 Dec 2010 at 10:40

No jquery allowed?

ejr22 · 1 Dec 2010 at 12:12

Pho's solution worked.
Thanks