...

View Full Version : how to make submit behave like real submit?



low tech
07-19-2010, 06:23 AM
Hi all

Is using the real form submit button a problem in any way? Can it actaully send a form when a person uses 'enter' in a text field.



When I use this submit, it triggers my validation which is great.


<input type="submit" value="OnSubmit validate" />


However this way doesn't seem to trigger my validation although It may solve the above form send problem (if that realy exists). How do I get it to act the same as real submit so it will trigger validation like onsubmit above?


<input type="button" value="Send Feedback" onclick="this.form.submit()" />

LT

does any of that make sense?

all ideas helpful and appreciated

RandomUser531
07-19-2010, 06:17 PM
Is using the real form submit button a problem in any way? Can it actaully send a form when a person uses 'enter' in a text field.

Assuming your function is called validate and it returns true on success, just use:

<form onsubmit = "return validate( this )" ... >Then the form cannot submit until validated.
Never call the submit method in preference to using a submit-type button, it makes the form script-dependent.

Old Pedant
07-19-2010, 09:22 PM
Never call the submit method, it makes the form script-dependent
?????????

HUH??? If you have <form onsubmit="return validate();"> you *ARE* script-dependent!!! If the user disables javascript, that validation is *GONE*!

So if you are *depending* on JS validation--if you aren't also doing server-side validation--it really doesn't matter.

I'm guessing that Phil was referring to exactly that: If the user disables JS he expects to do server-side validation. And that's a reasonable model if you have server-side capabilities.

But if you really want to do it as you described, and you are willing to depend on JS being enabled, it's easy:


<form ... onsubmit="return validate(this);" >
...
<input type="button" onclick="if ( validate(this.form) ) this.form.submit();" />

That is, have the button invoke the same validation that the onsubmit would.

low tech
07-20-2010, 02:54 AM
Thank you Phil Ippen and Old Pedant

My form does have server side valiadation of sorts --- it strip unwanted stuff from text area and checks the email name etc. Tho It doesn't seem to act as I think it should.

Anyway, the form and teh site is semi js dependant -- ie even with js off most of the site is still accessable but a noscript notice is there to inform the user. The form page simply tells them alternative ways to contact.

I tried this code which I found, but I couldn't get it to work hence the post.


function validate(form) {
// validate form
if (formIsValid) {
form.submit();
return true;
}
else {
return false;
}
}

So now i'm doing this
<input type="submit" value="Send" />

<form action="feedback.php" method="post" name="feedback_1" onsubmit="return validate(this.form)"; >

Thank you to all. Very helpfu.

LT

Old Pedant
07-20-2010, 03:07 AM
function validate(form) {
// validate form
if (formIsValid) {
form.submit();
return true;
}
else {
return false;
}
}
That's bad code!!! If you invoke that function from <form onsubmit=> or from <inputy type=submit> then it will try to submit the form *TWICE*!!!

And if you invoke it from <input type=button> then you don't need the "return" lines, at all.

So it makes no sense at all to use that code.

low tech
07-20-2010, 05:16 AM
Hi Old Pedant

I'm using the way as posted above BUT

I did try that 'bad code' I found tho I didn't realsie it was bad --- didn't work for me anyway.

I also came across this code --- but not tried.


<form name="myform" action="handle-data.php">

<script type="text/javascript">
function submitform()
{
if(document.myform.onsubmit &&
!document.myform.onsubmit())
{
return;
}
document.myform.submit();
}
</script>

can be found here
http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

Old Pedant
07-20-2010, 09:24 PM
You did not quote the *ENTIRE* code there!


<form name="myform" action="handle-data.php">
Search: <input type='text' name='query' />
<a href="javascript: submitform()">
<img src="go.gif" width="33" height="19" border="0" />
</a>
</form>
<script type="text/javascript">
function submitform()
{
if(document.myform.onsubmit &&
!document.myform.onsubmit())
{
return;
}
document.myform.submit();
}
</script>

That is *ONLY* to be used for <a> tags invoking a form submit. Something that has always seemed pointless to me, but which is possible.

But WHY would you use

<a href="javascript: submitform()">
<img src="go.gif" width="33" height="19" border="0" />
</a>
instead of just


<input type="image" src="go.gif" style="width: 33px; height: 19px; border: none;" />

??????????

(Of course, that code is pretty old hat, anyway, using width=, et al., instead of a <style>.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum