Forum Moderators: open
-------------------------
Overview of my Problem
-------------------------
I want to create a form that is validated by JavaScript and then further validated by PHP (that is on the same page).
With JavaScript, if the validation doesn't pass, I want to use innerHTML to display the errors on the page so that I won't have to use pop up boxes. If validation passes, the form data is sent to the server to be further validated by PHP.
Thing is, I can't get the form to submit if it passes the JavaScript.
---------------------
What I have so far
---------------------
// javascript function that shows error on page
function changeText(){
input = document.getElementById("input");
if (un.value.length < 10) {
document.getElementById('err').innerHTML = 'Error: Input must be at least 10 characters.';
} else {
document.getElementById('err').innerHTML = '';
document.reg.submit();
// or reg.submit();
}
}
<div id="err"></div>
<form id="form" name="form" method="post" action="(thisPage)" onSubmit="return changeText()">
<p><label>
Input: <input type="text" maxlength="20" id="input" name="input" size="20" /></label><br />
</p>
<label><input id='submit' name='submit' type="button" value="Submit" onclick="changeText()" /></label></p>
</form>
The "document.reg.submit(); OR reg.submit();" is giving me this error: "Object doesn't support this property or method".
Any suggestions to solve this problem is great appreciated. Thank you for your time!
Regards,
kbts
It's in your function but not in your document. I'm presuming you want the form name to be reg:
<form id="reg" name="reg" method="post" action="(thisPage)" onSubmit="return changeText()">
Second you have return in the onSubmit, but the function doesn't return anything. So if this DID work, it would submit no matter what. You would need to return false at the end of your function.
I would just pass the form object in the call to your function and use it as a variable in the function. I would also be cautious about naming or ID'ing objects that conflict with other attributes, like input, submit or form. Working example, notable changes bolded:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype all on one line -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function changeText(frm){
var inp = document.getElementById("nm");
if (inp.value.length < 10) {
document.getElementById('err').innerHTML = 'Error: Input must be at least 10 characters.';
}
else {
document.getElementById('err').innerHTML = '';
frm.submit();
}
return false;
}
</script>
</head>
<body>
<div id="err"></div>
<form id="reg" name="reg" method="post" action="(thisPage)" onSubmit="return changeText(this)">
<p><label>
Input: <input type="text" maxlength="20" id="nm" name="nm" size="20"></label><br>
</p>
<p><input id="submitButton" name="submitButton" type="submit" value="Submit"></p>
</form>
</body>
</html>
Also note that you already have the event in onSubmit, no need to call it from the button, and if you use the input type submit instead of button, the form will still submit if Javascript is disabled (and you trap the short field with your PHP.)
Thanks for your warm welcome and quick response. :)
You're absolutely right; reg is the form name and un is nm as you put it. ;)
I tried your suggestions. The innerHTML works fine, but it doesn't seem to submit the form when it passes the javascript.
I changed the above javascript to the following to make it submit the form when pass the validation:
function changeText(frm){
inp = document.getElementById("nm");
if (inp.value.length < 10) {
err = 1;
document.getElementById('err').innerHTML = 'Error from JS: Input must be at least 10 characters.';
return false;
} else {
document.getElementById('err').innerHTML = '';
frm.submit();
return true;
}
}
Does this look alright to you?
Thank you!
kbts
action="(thisPage)"
Here is what's wrong with your latest attempt:
function changeText(frm){
inp = document.getElementById("nm");
if (inp.value.length < 10) {
.......
return false;
} else {
.......
return true;
}
}
When you return false from a Javascript function or action, you are telling the browser, "Don't allow this object to execute it's normal action." Since you are returning from the form itself on submit, you **always** want the function to return false and allow the function to decide the action.
By returning true, it's submitting twice - once for the Javascript and once for the submit button on the form.
The advantage of this is that if Javascript is disabled, the form will never execute the onSubmit, so it will then allow the form control to submit normally: i.e., it works with or WITHOUT Javascript.
Another example:
<a href="index.html" onClick="alert('you're not going anywhere'); return false;">Home page, maybe.</a>
The return false stops the anchor from executing it's normal action, to navigate to index.html - UNLESS Javascript is disabled. All you'll get is an alert. But this
<a href="index.html" onClick="alert('Home Page coming up!'); location.href='index.html'; return false;">Home page, for sure.</a>
Although a fairly worthless function, if Javascript is enabled it's going to give an alert, then send the navigation to index.html - but it's doing it by the location.href, not the actual link. The advantage is, if Javascript is disabled, you still have a valid link that will work.
I copy and pasted your code (that you posted on 4:47 pm on June 8, 2008) this time. For some reason, the form doesn't submit if it passes the JavaScript validation. However, if JavaScript was disabled, it submits fine.
Yes, I have changed action="(thisPage)" to the right action.
I'm testing this in IE7 and FF as well.
Sorry, I'm a beginner with JavaScript, so I don't fully get your function return true/false logic. I will read up more on function calling in the meantime.
Here is the code that I'm using again:
<script type="text/javascript">
function changeText(frm){
var inp = document.getElementById("nm");
if (inp.value.length < 10) {
document.getElementById('err').innerHTML = 'Error: Input must be at least 10 characters.';
}
else {
document.getElementById('err').innerHTML = '';
frm.submit();
}
return false;
}
</script>
<?php
$formSent = isset($_POST['submitButton']);
echo 'formSent: ' .$formSent. '<br/>';
?>
<form id="reg" name="reg" method="post" action="thisPage.php" onsubmit="return changeText(this)">
<p><label> Input: <input type="text" maxlength="20" id="nm" name="nm" size="20"></label><br></p>
<p><input id="submitButton" name="submitButton" type="submit" value="Submit"></p>
</form>
Please let me know if you see anything that I missed.
Many thanks,
kbts
I tried the above again. And it works. I think it "didn't work" the first time because I might have uploaded to the wrong directory.
Thank you very much for your help and patience!
Cheers,
kbts
