Forum Moderators: open
HOWEVAH!
What I am not so keen on is how to stop a user's invalid submit button click from sending them to the "thank you" page... right now an invalid submission gets you both the "please include a valid email address" alert AND the "Thanks for your info!" page. Not good. I imagine you do a return false dependent on validation, just like the prime function of the submit button... but I don't know how to tie that URL script in with the validation of a form. Help would be much appreciated. This is my HTML for the submit button... I can post the JS for the form too, but the field validation and everything works correctly so I don't think it's needed:
<input type="submit" onclick="window.location.href='thankyou.html'" value="Submit Inquiry">
The onSubmit action is within my opening <form> tag:
onSubmit="return validateform(this)"
The onclick script is located on the actual submit button and...
ohhhhhhhhhhhhhhhh.
So are you saying that I just have the submit button use an onsubmit handler, and then if the script returns true... what do i do? Set up the JS so a return true builds a new page that says "thank you"?
I'm saying that, whatever happens, I can't see a use for an onclick handler on the submit, since you can act on that event within whatever function is called by the onsubmit handler.
Furthermore, as long as
1) You have onsubmit="return validationFn(this)"
2) The function returns {valid: true; invalid: false}
Then either
invalid:
nothing happens.
valid:
The form is sent, which means that the page will relocate to the [choose yer server script] page that is receiving the submission.
You have to have the "Thank You" on the receiving script page. There's nowhere else for it. I can't see room for "doing" anything about it on the sending page
(or maybe I've just been staying up too late).
Thank you sir for the clarifications
(The submit method doesn't fire the onsubmit event)
So it works, but I think it's a little unconventional ¦ silly.
Try it for fun.
<html>
<head>
<title>Thank You</title>
<style>
#message
{
visibility: hidden;
color: black;
font: 20px/22px sans serif;
border: solid 1px red;
width: 300px;
}
</style>
<script language="javascript">
function isValid(form)
{
if( form.theinput.value )
{
document.getElementById('message').style.visibility = 'visible';
form.thebutton.disabled = true;
setTimeout(function(){ form.submit() }, 1500);
}
return false;
}</script>
</head>
<body>
<div id="message">Thank you for your valuable input</div>
<form name="theform" onsubmit="return isValid(this);">
<input name="theinput" type="text" value="" />
<input name="thebutton" type="submit" value="submit">
</form></body>
</html>