homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript form
Clicking alert box causes form data to be sent
Adam5000




msg:4205975
 6:52 pm on Sep 23, 2010 (gmt 0)

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)

?>

 

Fotiman




msg:4206004
 7:46 pm on Sep 23, 2010 (gmt 0)

You are not stopping the form from submitting. First, remove the onclick handler from your submit button and add an onsubmit event handler to your form:

<form action="insert_data.php" method="post" onsubmit="return check_fields();">

Then modify check_fields as follows (don't forget the semi-colons):

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;
}


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.

More importantly, you need to be doing some server side validation as well to prevent this sort of thing from happening. Not all users have JavaScript enabled, and those that don't have it enabled will still be able to submit your form with invalid values. So you need to validate the submitted values before generating your SQL string. In fact, as you have it now, you are probably open to SQL Injection attacks.

Adam5000




msg:4209633
 10:39 pm on Sep 30, 2010 (gmt 0)

Great job Fotiman! The code above works and says you've got a good head on your shoulders. Thanks for your input and help.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved