Prevent form submission only from default action

[Stanimir Stamenkov]

I have a form without a submit button like:

<form name="form1" action=""
onsubmit="alert('submit ' + this.name);">
<div>
<label>Field 1: <input type="text" name="field1"
onchange="alert(this.name + '=' + this.value);"></label></div>
<label>Field 2: <input type="text" name="field2"
onchange="alert(this.name + '=' + this.value);"></label></div>
</form>

The form field 'change' event handlers actually perform AJAX
submission and update some part of the page without "navigating away".

Using the exact form I've given the different browsers behave
differently in handling the default action event (pressing the Enter
key), for example using Mozilla pressing Enter in a field doesn't
cause form submission, but Safari submits the form. I've found
Mozilla submits the form in response to pressing Enter if there's
only one visible field, also:

<form name="form1" action=""
onsubmit="alert('submit ' + this.name);">
<div>
<label>Field 1: <input type="text" name="field1"
onchange="alert(this.name + '=' + this.value);"></label></div>
</form>

Is it possible to detect the form is being submitted in response to
the default action event?

 

[Tuomo Tanskanen]

Using the exact form I've given the different browsers behave
differently in handling the default action event (pressing the Enter
key), for example using Mozilla pressing Enter in a field doesn't cause
form submission, but Safari submits the form. I've found Mozilla
submits the form in response to pressing Enter if there's only one
visible field, also:

I don't have access to Safari, but returning false from onSubmit on the
form doesn't do the trick for you (ie. does not submit the form)? Since
obviously as you don't have submit button, you do not want an old
fashioned submit to happen, right?

Regards, Tumi

 

[Stanimir Stamenkov]

Wed, 19 Mar 2008 12:07:33 +0200, /Tuomo Tanskanen/:

I don't have access to Safari, but returning false from onSubmit on the
form doesn't do the trick for you (ie. does not submit the form)? Since
obviously as you don't have submit button, you do not want an old
fashioned submit to happen, right?

The form is still submitted but through an AJAX library (in response
to field 'change' change events, in my case). Unconditionally
returning false from 'submit' handler prevents the library from working.

 

[henribaeyens]

I have a form without a submit button like:

<form name="form1" action=""
onsubmit="alert('submit ' + this.name);">
<div>
<label>Field 1: <input type="text" name="field1"
onchange="alert(this.name + '=' + this.value);"></label></div>
<label>Field 2: <input type="text" name="field2"
onchange="alert(this.name + '=' + this.value);"></label></div>
</form>

The form field 'change' event handlers actually perform AJAX submission
and update some part of the page without "navigating away".

Using the exact form I've given the different browsers behave
differently in handling the default action event (pressing the Enter
key), for example using Mozilla pressing Enter in a field doesn't cause
form submission, but Safari submits the form. I've found Mozilla
submits the form in response to pressing Enter if there's only one
visible field, also:

<form name="form1" action=""
onsubmit="alert('submit ' + this.name);">
<div>
<label>Field 1: <input type="text" name="field1"
onchange="alert(this.name + '=' + this.value);"></label></div>
</form>

Is it possible to detect the form is being submitted in response to the
default action event?

you could capture the key events usually associated with form submission:
click button or hit return key:

document.my_form.action = whatever; (either null or some perl or php file)
var f = your text input;
var s = the submit button (if any);
s.keydown(function(e) {
if (e.keyCode == 13) {
// do some stuff
}
});
s.click(function(e) {
// do some stuff
}

 

[Henry]

On Mar 19, 11:57 am, henribaeyens wrote:

document.my_form.action = whatever; (either null

What do you expect "null" to mean in the context of a FORM element's
ACTION attribute?

or some perl or php file)
var f = your text input;
var s = the submit button (if any);
s.keydown(function(e) {
if (e.keyCode == 13) {
// do some stuff}
});
s.click(function(e) {

}

If you are going to post code that is based upon the use of some sort
of 'framework' or 'library' wouldn't it be a good idea to state what
that would be, and list all of the caveats that apply to its use (so
the OP can decide how well they fit with the context in which the
answer to the question will be used)?

 

[Tuomo Tanskanen]

Wed, 19 Mar 2008 12:07:33 +0200, /Tuomo Tanskanen/:


The form is still submitted but through an AJAX library (in response to
field 'change' change events, in my case). Unconditionally returning
false from 'submit' handler prevents the library from working.

Yes, but doing it like

<form action="fallback.php" method="post" onSubmit="yourAjaxHandler();
return false;">

or even

<form action="fallback.php" method="post" onSubmit="return
yourAjaxHandler();">

and having your handler return false does exactly what you want.

Regards, Tumi

 

[Stanimir Stamenkov]

Wed, 19 Mar 2008 17:57:52 +0200, /Tuomo Tanskanen/:

Yes, but doing it like

<form action="fallback.php" method="post" onSubmit="yourAjaxHandler();
return false;">

or even

<form action="fallback.php" method="post" onSubmit="return
yourAjaxHandler();">

and having your handler return false does exactly what you want.

The problem is I don't fully control the generated HTML code as it
is a JSF/RichFaces [1] application. The generated code looks
something like:

<form ...>
...
<input type="text" ... onchange="A4J.AJAX.Submit(...);" ... />
...
</form>

I've solved my problem adding a 'keydown' handler (I can do that):

<form ...>
...
<input type="text" ...
onkeydown="return preventDefault(event, this);"
onchange="A4J.AJAX.Submit(...);" ... />
...
</form>

Where the 'preventDefault' function definition is:

function preventDefault(evt, fld) {
if (!evt) {
evt = event;
}
if (evt.keyCode == 13) {
fld.blur();
fld.focus();
return false;
}
return true;
}

The blur-focus thing causes a 'change' event even in the browsers
which don't normally fire it when Enter gets pressed.

[1] http://labs.jboss.com/jbossrichfaces/

 

[henribaeyens]

What do you expect "null" to mean in the context of a FORM element's
ACTION attribute?



If you are going to post code that is based upon the use of some sort of
'framework' or 'library' wouldn't it be a good idea to state what that
would be, and list all of the caveats that apply to its use (so the OP
can decide how well they fit with the context in which the answer to the
question will be used)?

document.my_form.action = "deal_with_it.php";
var f = document.my_form.text_field;
var s = document.my_form.submit_form;
s.keydown(function(e) {
if (e.keyCode == 13) {
// do some stuff
}
});
s.click(function(e) {
// do some stuff
}


or

document.my_form.action = "deal_with_it.php";
var f = jQuery('input[@name=text_field]');
var s = jQuery('input[@name=submit_form]');
s.keydown(function(e) {
if (e.keyCode == 13) {
// do some stuff
}
});
s.click(function(e) {
// do some stuff
}


happy?

 

[Thomas 'PointedEars' Lahn]

I have a form without a submit button [...]

That is a Bad Thing, ...

<form name="form1" action=""
onsubmit="alert('submit ' + this.name);">

.... especially as you use the `onsubmit' intrinsic event handler attribute
which requires a submit button.


PointedEars

 

[Stanimir Stamenkov]

Wed, 19 Mar 2008 21:49:35 +0100, /Thomas 'PointedEars' Lahn/:

I have a form without a submit button [...]

That is a Bad Thing, ...

(TM)... Unfortunately I'm not the one requiring the given thing and
I'm not in full control of the content as I'm using some application
framework which generates most of it.

... especially as you use the `onsubmit' intrinsic event handler attribute
which requires a submit button.

I've used 'onsubmit' in my example only for testing purposes. In my
real page there's no such attribute. You may see my last reply to
Tuomo Tanskanen in this thread for my solution.

 

[Thomas 'PointedEars' Lahn]

Wed, 19 Mar 2008 21:49:35 +0100, /Thomas 'PointedEars' Lahn/:

I have a form without a submit button [...]

That is a Bad Thing, ...

(TM)... Unfortunately I'm not the one requiring the given thing and

Then you should be the one refusing to implement this kind of nonsense.

I'm not in full control of the content as I'm using some application
framework which generates most of it.

Then you should not use that framework unless you are able to adapt it so
that it generates content that degrades gracefully. What kind of Web
developer are you anyway?

I've used 'onsubmit' in my example only for testing purposes. In my
real page there's no such attribute. You may see my last reply to
Tuomo Tanskanen in this thread for my solution.

That only seems to be a solution. It will not work in 11% of user agents
at the minimum, and it will annoy the rest of the users. Needlessly. Can
your client afford to lose that many potential customers, the security issue
aside? I doubt it.


PointedEars

 

[Stanimir Stamenkov]

Thu, 20 Mar 2008 00:23:20 +0100, /Thomas 'PointedEars' Lahn/:

That only seems to be a solution. It will not work in 11% of user agents
at the minimum, and it will annoy the rest of the users. Needlessly. Can
your client afford to lose that many potential customers, the security issue
aside? I doubt it.

Could you elaborate more on what "will not work in 11% of user
agents" (and which ones)? What security issue do you see?

 

[Henry]

happy?

Have you explained what "null" was supposed to mean in the context of
a FORM element's ACTION attribute, named the 'framework' or 'library'
you were proposing the use of or listed the caveats that apply to the
use of that 'framework' or 'library'? The closest you have come is
implying that the 'library' may be JQuery, but have not actually said
as much, and JQuery use has so many caveats that they really should be
listed to avoid giving the impression that its use may be suitable in
situations where it could be dangerous/harmful.

 

[Thomas 'PointedEars' Lahn]

Thu, 20 Mar 2008 00:23:20 +0100, /Thomas 'PointedEars' Lahn/:

Could you elaborate more on what "will not work in 11% of user
agents" (and which ones)?

That is a rough estimate of the percentage of visitors who supposedly don't
have client-side scripting available someone (RobG?) gave here before. I
usually avoid designing according to so-called statistics, however
considering the number of possibilities that can make client-side scripting
unavailable, this figure is probably not that much off from reality. We
have discussed the issue of graceful degradation ad nauseam here already,
please search the newsgroup's archives.

What security issue do you see?

There is a security issue in some older user agents with J(ava)Script
because it allows programs running client-side to access functions of the
client operating system; this has been used to install Trojan Horses and
other malware, hence it is more likely that it is simply disabled if it is
supported.

However, the word I was looking for was probably a different one: So far
there is no indication that you are prepared server-side for the possibility
that the form is submitted without "AJAX" when your `onkeydown' attribute is
ignored for some reason.


PointedEars