execute javascript onclick or onsubmit?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
scatty1985
Forum Newbie
Posts: 24
Joined: Fri Dec 18, 2009 8:57 am

execute javascript onclick or onsubmit?

Post by scatty1985 »

Hi,

I'm learning PHP Javascript and HTML. I've been playing with a piece of code that will pass a password from a user to the $_POST global but some Javascript must first hash the password before the next page can sanitise and submit the data to a database.

I have some code which does it using the onclick event for a button. But I have tried to adapt the code to use a submit button and run when the onsubmit event is called. However, for reasons I don’t know the latter doesn’t seem to work... Can anyone explain why?

Code: Select all

<!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>Sign up</title>
<script type="text/javascript" src="sha-512.js"></script>
 
<script type="text/javascript">
 
function encode() {
    var iForm = document.getElementById("inputForm");
    var sForm = document.getElementById("submitForm");
    sForm.username.value = hex_sha512(iForm.pass.value);
    sForm.submit();
    }
 
</script>
 
</head>
 
<body>
<h1>Sign up</h1>
<form id="inputForm" action="#" method="post">
<table>
<tr><td>Username : </td><td><input type="text" name="username" /></td></tr>
<tr><td>Password : </td><td><input type="password" name="pass" /></td></tr>
<tr><td colspan="2" align="center"><input type="button" name="submit" value="Submit" onclick="encode();" /></td>
</table>
</form>
 
<form id="submitForm" action="submit.php" method="post">
<input type="hidden" name="username" />
<input type="hidden" name="password" />
</form>
 
 
</body>
</html>
 
This is what doesnt work... When I click submit the page stayes the same...

Code: Select all

<!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>Sign up</title>
<script type="text/javascript" src="sha-512.js"></script>
 
<script type="text/javascript">
 
function encode() {
    var iForm = document.getElementById("inputForm");
    var sForm = document.getElementById("submitForm");
    sForm.username.value = hex_sha512(iForm.pass.value);
    sForm.submit();
    }
 
</script>
 
</head>
 
<body>
<h1>Sign up</h1>
<form id="inputForm" action="#" method="post" onsubmit="encode();">
<table>
<tr><td>Username : </td><td><input type="text" name="username" /></td></tr>
<tr><td>Password : </td><td><input type="password" name="pass" /></td></tr>
<tr><td colspan="2" align="center"><input type="submit" name="submit" value="Submit" /></td>
</table>
</form>
 
<form id="submitForm" action="submit.php" method="post">
<input type="hidden" name="username" />
<input type="hidden" name="password" />
</form>
 
 
</body>
</html>
User avatar
AbraCadaver
DevNet Master
Posts: 2572
Joined: Mon Feb 24, 2003 10:12 am
Location: The Republic of Texas
Contact:

Re: execute javascript onclick or onsubmit?

Post by AbraCadaver »

I don't think you use this: sForm.submit();

If I remember correctly, in an onsubmit routine you return true; to submit the form or return false; to cancel submission of the form.
mysql_function(): WARNING: This extension is deprecated as of PHP 5.5.0, and will be removed in the future. Instead, the MySQLi or PDO_MySQLextension should be used. See also MySQL: choosing an API guide and related FAQ for more information.
Post Reply