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?

--
Stanimir

[Tuomo Tanskanen]

Stanimir Stamenkov wrote:

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.

--
Stanimir

[Tuomo Tanskanen]

Stanimir Stamenkov wrote:

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.

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/

--
Stanimir

[Stanimir Stamenkov]

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

Stanimir Stamenkov wrote:

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

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

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

--
Stanimir

[Stanimir Stamenkov]

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

Stanimir Stamenkov wrote:

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

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

--
Stanimir