By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,785 Members | 2,074 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,785 IT Pros & Developers. It's quick & easy.

Need to have an <a> tag submit a form (cross platform solution needed)

P: n/a
Hi all.

I have a form, and several text and image links on it that should
submit the form with different actions.

I prepared a simple page with just the code that's not working.

PROBLEM: The form won't submit if the link is clicked, but will submit
if the SUBMIT button is clicked. I need to call a function to change
the form's action according to user's input before it is submitted.

Thanks in advance for any help.

The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Submit test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

<script language="javascript" type="text/javascript">
function SendForm() {
d = eval('document.forms[0]');
d.action = 'http://localhost:8080/test.php';
d.testVar.value = 'new value';
alert(d.testVar.value);
d.submit();
}
</script>
</head>

<body>
<form name="form1" method="post">
<a href="#" onclick="SendForm(); return true;">Submit</a>
<input type="submit" name="submit" value=" submit ">
<input type="hidden" name="testVar" value="original value">
</form>

<?php
// Debug stuff START --------------------------------
// Echo time, to check if the form has been submitted
echo time() . '<br />';

// See what's inside POST
var_export($_POST);
// Debug stuff END ----------------------------------
?>

</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"Sarah" <sa***@nospam.com> wrote in message
news:pd********************************@4ax.com...
<snip>
function SendForm() {
d = eval('document.forms[0]');
Using eval as a property accessor is always wrong (and you are also
quite unlikely to need to use eval for anything else) but you have
compounded the error by passing the eval function a string literal. It
will interpret 'document.forms[0]' in exactly the same way as it would
interpret the same code written directly in the source:-

d = document.forms[0];

-so there is little point in using eval here (even if it wasn't
unnecessary anyway).

<URL: http://jibbering.com/faq/#FAQ4_40 >
<URL: http://jibbering.com/faq/#FAQ4_39 >

The variable - d - is not declared as local to this function using the -
var - keyword and as a result will become a global variable.
Unnecessarily creating global variables is a common source of coding
errors due to unexpected interactions (often difficult to debut).
Generally, do not give variables more scope than they need. Which means
variables within functions should always be local unless there is a good
reason for them to be global.

<snip><form name="form1" method="post">
<a href="#" onclick="SendForm(); return true;">Submit</a>
The onclick handler should return false (not true) in order to cancel
the navigation specified in the HREF (the "#", which is normally
interpreted as navigation to the top of the current page).
<input type="submit" name="submit" value=" submit ">

<snip>

A common error in HTML forms is to give the submit button the name
"submit" (or reset buttons the name "reset"). Form element objects make
named form elements available as named properties of the form (mostly),
so a submit button named "submit" is referred to by a property of the
form object with the name "submit". However, the form object starts off
with a property called "submit", the submit method that you are
attempting to call. And the browsers response to finding a submit button
with the name "submit" is to replace the reference to the submit method
held under the name "submit" with a reference to the submit button.
Preventing JavaScript from submitting the form.

Generally, it is a bad idea to make form submission dependent on
JavaScript. Server side solutions are much better and HTML forms are
very reliable on their own.

Richard.
Jul 20 '05 #2

P: n/a
On Tue, 25 Nov 2003 02:36:50 -0300, Sarah wrote:
Hi all.

I have a form, and several text and image links on it that should submit
the form with different actions.

I prepared a simple page with just the code that's not working.

PROBLEM: The form won't submit if the link is clicked, but will submit
if the SUBMIT button is clicked. I need to call a function to change the
form's action according to user's input before it is submitted.

Thanks in advance for any help.

The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>Submit test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>

<script language="javascript" type="text/javascript"> function
SendForm() {
d = eval('document.forms[0]');
d.action = 'http://localhost:8080/test.php'; d.testVar.value = 'new
value';
alert(d.testVar.value);
d.submit();
}
</script>
</head>
Try

<body onSubmit="return SendForm()">

to make the submit button use the SendForm() routine
<form name="form1" method="post">
<a href="#" onclick="SendForm(); return true;">Submit</a>
and

<a href="javascript:SendForm(); return true;">Submit</a>

to make the link execute the SendForm() routine.

<input type="submit" name="submit" value=" submit "> <input type="hidden" name="testVar" value="original value">
</form>


--,
MVH
DaveG
Jul 20 '05 #3

P: n/a
Dave Griffiths wrote on 25 Nov 2003:
On Tue, 25 Nov 2003 02:36:50 -0300, Sarah wrote:
<snip>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>Submit test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
You are using intrinsic events, but you are not specifying a default
language. That produces invalid HTML. Include the following entity in
your HEAD block:

<META http-equiv="Content-Script-Type" content="text/javascript">

A similar line is needed if you use style attributes. Read the 'Style
Sheets' section of the HTML 4.01 specification for more information.
<script language="javascript" type="text/javascript">
The language attribute is not required: type is mandatory and always
sufficient.
function SendForm() {
d = eval('document.forms[0]');
As Mr Cornford already stated, that line does two things:

1) 'd' is created as a global variable. You don't want that.
2) Uses eval() to perform the exact same thing as would happen if it
were not present at all.

Change it to:

var d = document.forms[0];

You could also make further changes. Identifiers should always be
meaningful - 'd' is not. It is also a good idea to use the form name
rather than the index. It reduces maintenance effort.

var d = document.forms['form_name'];
d.action = 'http://localhost:8080/test.php';
Why are you specifying the action attribute here, and not in the FORM
element? A FORM element is not valid if no action has been specified.
d.testVar.value = 'new value';
It's better to use:

d.elements['testVar'].value = '...';

That will work across more browsers.

<snip>
<body onSubmit="return SendForm()">
The HTML 4.01 specification does not specify a onsubmit intrinsic
event for anything other than the FORM element. That line above,
irrespective of whether it works or not, is incorrect.
to make the submit button use the SendForm() routine
To make a button use a particular function, use this:

<BUTTON type="submit" onclick="SendForm(); return false"Submit</BUTTON> <form name="form1" method="post">
As I said earlier, a FORM element *requires* an action attribute, and
'form1' should be changed to something more meaningful.
<a href="#" onclick="SendForm(); return true;">Submit</a>


Returning true, or not specifying return at all, results in the
browser navigating to the URI specified in the href attribute. You
should return false to stop it performing that action.
and

<a href="javascript:SendForm(); return true;">Submit</a>
You should *not* use the JavaScript protocol specifier
('javascript:') inside the href attribute. Intrinsic events remove
that need. Moreover, if not recognised, the JavaScript protocol
results in a malformed URI.
to make the link execute the SendForm() routine.

<input type="submit" name="submit" value=" submit ">


It is better to use the BUTTON element for push (standard), submit,
and reset button types. You should not use the name 'submit' or
'reset' for any controls as this interferes with the JavaScript
methods of that name.

<snip>

My comments use HTML as I do not know XHTML. However, as XHTML merely
extends HTML, they are valid, all the same.

Mike

--
Michael Winter
M.******@blueyonder.co.uk.invalid (remove ".invalid" to reply)
Jul 20 '05 #4

P: n/a
Thank you all very much for taking the time to reply (and quite a fast
response I got!).

Your answers have encouraged me to take the time and re-code the whole
page with more meaningful names, controlled variable scopes, and
especially a better designed page that uses a more standard interface
with submit buttons instead of <a> links.

Again, one thousand "thanks" to members of this group.

Cheers,
Sarah.
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.