Javascript form

Greetings and thanks to everyone who has helped so far.

I'm almost there as far as the registration form goes. If there are no errors, everything works.

I'm using a form to put data into a MySql database. It involves two pages. The first page is an html page that contains the form itself. Users enter data into the input boxes and then click on the submit button. And when the submit button is clicked, the data from the input boxes is sent to a PHP page that inputs the data into the MySql table.

And I'm using Javascript to check for errors like empty fields and passwords that don't match.

An abridged version of the code I'm using is posted below.

And if there are no errors, everything works.

But, for example, if one of the fields is empty, an alert box pops up and says "At least one of the fields is empty."

And when I click on the "Ok" button in the alert box, the data in the field is automatically sent and the empty field is entered in the MySql table resulting in a blank field in the table.

What am I doing wrong? What I want is for the information to be sent to the PHP page only when there are no errors.

Help!

Page one

<html>
<head>
<title>registration form</title>
</head>

<body>
<script type="text/javascript">

function check_fields()
{
var usr_name = document.getElementById('u_name')
var passwrd = document.getElementById('pass')
var reenter_passwrd = document.getElementById('reenter_pass')

if (usr_name.value.length==0 || passwrd.value.length==0 || reenter_passwrd.value.length==0)
{
alert("At least one field is empty.")
}

else
{
document.forms[0].submit();
}
}

</script>

<form action="insert_data.php" method="post">

Username: <input type="text" name="user_name" id="u_name">
<br>
Password: <input type="password" name="pass_word" id="pass">
<br>
Reenter Password; <input type="password" name="reenter_pass_word" id="reenter_pass">
<br>
<input type="submit" value="Submit" onClick="check_fields()">

</form>

</body>
</html>

Page two titled "input_data"

<?php
$con = mysql_connect("host_address","database_name","password");

if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("my_db", $con);

$sql="INSERT INTO subjects (username, password)
VALUES ('$_POST[user_name]','$_POST[pass_word]')";

if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}

echo "1 record added";

mysql_close($con)

?>


function check_fields() 
{ 
  var usr_name = document.getElementById('u_name');
  var passwrd = document.getElementById('pass');
  var reenter_passwrd = document.getElementById('reenter_pass');
  if (usr_name.value.length==0 || passwrd.value.length==0 || reenter_passwrd.value.length==0) { 
    alert("At least one field is empty.");
    return false;
  } 
  return true;
}

Javascript form

Clicking alert box causes form data to be sent

Adam5000

Fotiman

Adam5000

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week