Forum Moderators: open

Message Too Old, No Replies

onsubmit stops to validate but not to return href

JS newbie, don't know how to stop "the other" action on submit

         

Don_Hoagie

8:16 pm on Sep 12, 2005 (gmt 0)

10+ Year Member



Ok, so I learned how to stop the submit if form fields are invalid... and i'm proud of that.

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">

Bernard Marx

8:36 pm on Sep 12, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Why is there an onclick handler on that submit button?

Presumeably, the form's onsubmit handler looks like:

onsubmit="return validateFn(this)"

If the form is submitted, the reciving page is where you have the "Thank you".
What am I missing here?

Don_Hoagie

10:58 pm on Sep 12, 2005 (gmt 0)

10+ Year Member



Judging by the posts i've seeen you make before, i'm sure it's ME who's the one missing something... nevertheless:

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"?

Bernard Marx

11:25 pm on Sep 12, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ah, but you shouldn't trust anybody, least of all me.

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).

Don_Hoagie

1:52 am on Sep 13, 2005 (gmt 0)

10+ Year Member



Yeah, I think maybe the issue here is that i'm doing all client side coding on my own, and then meeting up with the server script guys next week... so apparently i'm jumping the gun by trying to get my form to send to a thank you page on its own. I'll relax and have a beer, and wait for next week.

Thank you sir for the clarifications

Bernard Marx

7:22 am on Sep 13, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, I think you're right, but it is possible. Here's a trivial example. The message showing is done within the validation function. However, the message doesn't actually have time to appear before the page moves on (When it comes to screen events, things don't always happen in the order one would expect), so the submission is actually done using the submit() method, which is put inside a setTimeout.

(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>