/    Sign up×
Community /Pin to ProfileBookmark

Submit Button outside the <form /form>

For design reasons, I want to place the submit button on an image that is outside the <form /form> peramaters.

The form that I created works perfectly with the button inside, using this submit command string:

<INPUT TYPE=”image” value=”Submit Form_1″ img alt=”Send Now!” height=37 src=”images/bg_12.gif” width=241>

However, I have been wracking my brain and every web resource that I know of to come up with a way to execute the submit function from an image outside the box. Here is what I have come up with so far:

<input type=”image” onclick=”document.getElementById(‘form_1’).reset()” src=”images/bg_12.gif” alt=”Send Now!” width=241 height=37 img>

I am open to any ideas (either to tweak the above code, or try something new).

Thanks in advance for any help!!

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@DokMay 15.2007 — How about this ?
[CODE]<input type="image" onclick="document.getElementById('form_1').[COLOR="Red"]submit()[/COLOR]" src="images/bg_12.gif" alt="Send Now!" width=241 height=37 img>[/CODE]
Copy linkTweet thisAlerts:
@texascoffeeauthorMay 15.2007 — Nope. After 3 days, 200 banannas, 28 redbulls and 4 hours of sleep -- I am at the end of putting this thing together and can't quite get there.

Here is a little more info..

<form method="POST" action="formmail.php" >

<input type="hidden" name="recipient" value="###" >

<FORM id=form_1 blah, blah, blah /FORM>

<input type="image" onclick="document.getElementById('form_1').reset()" src="images/bg_12.gif" alt="Send Now!" width=241 height=37 img>

The above works perfectly when I include

<INPUT TYPE="image" value="Submit Form_1" img alt="Send Now!" height=37 src="images/bg_12.gif" width=241>

inside the <> form..

agk! *beats head against wall*
Copy linkTweet thisAlerts:
@DokMay 15.2007 — This works for me (IE 7)
[code=html]<form id="form1">
<input type="text" name="f1" value="f1" />
</form>
<input type="button" value="Submit" onclick="document.getElementById('form1').submit();" />[/code]
Copy linkTweet thisAlerts:
@texascoffeeauthorMay 15.2007 — I was missing "" around form_1 ---> thanks!

However, it is still coming up with an error on the page on submit. Is there a way to refer to /formmail.php in a more simple way?

Here is the code (sry in advance for the length). I have checked and rechecked... I just don't see anything different that what you posted:

<form method="POST" action="formmail.php" >

<input type="hidden" name="recipient" value="###" >

<FORM id="form_1" style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; WIDTH: auto; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; HEIGHT: auto" >


<DIV class=black style="PADDING-LEFT: 21px; PADDING-TOP: 13px">First Name/Last Name</DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 5px">

<TABLE cellSpacing=0 cellPadding=0 width=200 border=0>

<TBODY>

<TR>

<TD width=102><INPUT class=formss style="BORDER-RIGHT: #5a5d4e 1px solid; BORDER-TOP: #5a5d4e 1px solid; BORDER-LEFT: #5a5d4e 1px solid; WIDTH: 96px; BORDER-BOTTOM: #5a5d4e 1px solid; HEIGHT: 19px" input type="text" name="first_name" value=" "></TD>

<TD><INPUT class=formss style="BORDER-RIGHT: #5a5d4e 1px solid; BORDER-TOP: #5a5d4e 1px solid; BORDER-LEFT: #5a5d4e 1px solid; WIDTH: 96px; BORDER-BOTTOM: #5a5d4e 1px solid; HEIGHT: 19px" input type="text" name="last_name" value=" "></TD></TR></TBODY></TABLE></DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 8px"><img alt="#" height=2 src="images/line_1.gif" width=193></DIV>

<DIV class=black style="PADDING-LEFT: 21px; PADDING-TOP: 7px">Current Address</DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 7px"><INPUT class=formss style="BORDER-RIGHT: #5a5d4e 1px solid; BORDER-TOP: #5a5d4e 1px solid; BORDER-LEFT: #5a5d4e 1px solid; WIDTH: 198px; BORDER-BOTTOM: #5a5d4e 1px solid; HEIGHT: 19px" input type="text" name="address" value=" "></DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 4px"><INPUT class=formss style="BORDER-RIGHT: #5a5d4e 1px solid; BORDER-TOP: #5a5d4e 1px solid; BORDER-LEFT: #5a5d4e 1px solid; WIDTH: 198px; BORDER-BOTTOM: #5a5d4e 1px solid; HEIGHT: 19px" input type="text" name="address2" value=" "></DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 8px"><img alt="#" height=2 src="images/line_1.gif" width=193></DIV>

<DIV class=black style="PADDING-LEFT: 21px; PADDING-TOP: 6px">City/State/ZIP</DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 7px">

<TABLE cellSpacing=0 cellPadding=0 width=200 border=0>

<TBODY>

<TR>

<TD width=132><INPUT class=formss style="BORDER-RIGHT: #5a5d4e 1px solid; BORDER-TOP: #5a5d4e 1px solid; BORDER-LEFT: #5a5d4e 1px solid; WIDTH: 126px; BORDER-BOTTOM: #5a5d4e 1px solid; HEIGHT: 19px" input type="text" name="city" value=" "></TD>

<TD>

<DIV style="PADDING-LEFT: 0px; PADDING-TOP: 1px"><SELECT class=formss style="WIDTH: 66px; HEIGHT: 19px" name="state"><OPTION class=formss selected>AL</OPTION>

<option value>AK</option>

<option value>AZ</option>

<option value>AR</option>

<option value>CA</option>

<option value>CO</option>

<option value>CT</option>

<option value>DE</option>

<option value>DC</option>

<option value>FL</option>

<option value>GA</option>

<option value>GU</option>

<option value>HI</option>

<option value>ID</option>

<option value>IL</option>

<option value>IN</option>

<option value>IA</option>

<option value>KS</option>

<option value>KY</option>

<option value>LA</option>

<option value>ME</option>

<option value>MD</option>

<option value>MA</option>

<option value>MI</option>

<option value>MN</option>

<option value>MS</option>

<option value>MO</option>

<option value>MT</option>

<option value>NE</option>

<option value>NV</option>

<option value>NH</option>

<option value>NJ</option>

<option value>NM</option>

<option value>NY</option>

<option value>NC</option>

<option value>ND</option>

<option value>OH</option>

<option value>OK</option>

<option value>OR</option>

<option value>PA</option>

<option value>PR</option>

<option value>RI</option>

<option value>SC</option>

<option value>SD</option>

<option value>TN</option>

<option value>TX</option>

<option value>UT</option>

<option value>VT</option>

<option value>VA</option>

<option value>VI</option>

<option value>WA</option>

<option value>WV</option>

<option value>WI</option>

<option value>WY</option>

</SELECT></DIV></TD></TR></TBODY></TABLE></DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 5px"><INPUT class=formss style="BORDER-RIGHT: #5a5d4e 1px solid; BORDER-TOP: #5a5d4e 1px solid; BORDER-LEFT: #5a5d4e 1px solid; WIDTH: 126px; BORDER-BOTTOM: #5a5d4e 1px solid; HEIGHT: 19px" input type="text" name="zip" value=" "></DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 8px"><img alt="#" height=2 src="images/line_1.gif" width=193></DIV>

<DIV class=black style="PADDING-LEFT: 21px; PADDING-TOP: 7px">Email Address</DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 5px"><INPUT class=formss style="BORDER-RIGHT: #5a5d4e 1px solid; BORDER-TOP: #5a5d4e 1px solid; BORDER-LEFT: #5a5d4e 1px solid; WIDTH: 198px; BORDER-BOTTOM: #5a5d4e 1px solid; HEIGHT: 19px" input type="text" name="email" value=" "></DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 8px"><img alt="#" height=2 src="images/line_1.gif" width=193></DIV>

<DIV class=black style="PADDING-LEFT: 21px; PADDING-TOP: 7px">Your Phone</DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 5px"><INPUT class=formss style="BORDER-RIGHT: #5a5d4e 1px solid; BORDER-TOP: #5a5d4e 1px solid; BORDER-LEFT: #5a5d4e 1px solid; WIDTH: 198px; BORDER-BOTTOM: #5a5d4e 1px solid; HEIGHT: 19px" input type="text" name="home" value=" Home"> </DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 5px"><INPUT class=formss style="BORDER-RIGHT: #5a5d4e 1px solid; BORDER-TOP: #5a5d4e 1px solid; BORDER-LEFT: #5a5d4e 1px solid; WIDTH: 198px; BORDER-BOTTOM: #5a5d4e 1px solid; HEIGHT: 19px" input type="text" name="work" value=" Work"> </DIV>

<DIV style="PADDING-LEFT: 21px; PADDING-TOP: 5px"><INPUT class=formss style="BORDER-RIGHT: #5a5d4e 1px solid; BORDER-TOP: #5a5d4e 1px solid; BORDER-LEFT: #5a5d4e 1px solid; WIDTH: 198px; BORDER-BOTTOM: #5a5d4e 1px solid; HEIGHT: 19px" input type="text" name="mobile" value=" Mobile"> </DIV>

</FORM></TD></TR>

<TR>

<TD height=37><input type="image" value="Submit" onclick="document.getElementById('form_1').submit()" src="images/bg_12.gif" alt="Send Now!" width=241 height=37 img></TD>

</TR></TBODY></TABLE></TD>
Copy linkTweet thisAlerts:
@felgallMay 15.2007 — You should really have form tags around that last input field. Input fields are only valid inside a form.
Copy linkTweet thisAlerts:
@texascoffeeauthorMay 15.2007 — When I place form tags around it, the button disappears from the page.
×

Success!

Help @texascoffee spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...