PDA

View Full Version : HELP! Multiple submit buttons in one form???


serenaloce146
01-14-2006, 04:56 PM
I have two different functions in one form that I want to do. One is a calculation and the other is to submit the form to my email. This is what it looks like so far...I got the calculation button to work just fine, but how do I make the last submit button work?

Thanks :)

First off, I use a hosting service to email my forms and this is the information it has to have:
<form method="post" action="http://submit.mailmyform.com" name="mailmyform_form">
<input type="hidden" name="mailmyform_username" value="serenalove">

Here is my code so far:

<script type="text/javascript">
function calculate(){
var F1num = Number(document.forms[0].F1.value);
var F2num = Number(document.forms[0].F2.value);
var F4num = Number(document.forms[0].F4.value);
var F5num = Number(document.forms[0].F5.value);
document.forms[0].F3.value += (F1num * F2num) / 10 + F4num + F5num;
return false;
}
</script>


<form action="#" method="POST" onsubmit="return calculate()">
<p>

<b>First Name:<br>
</b>
</font>
<input type="text" name="FirstName" size="25" style="border: 1px solid #606060"></p>
<p>
<font face="verdana" size="2" color="black"><font face="verdana" size="1" color="black">
<b>Ad size</b></font><br>
<select name="F1" style="font-family: Verdana; font-size: 10pt; letter-spacing: 0; border: 1px solid #606060">
<option value="0">Width</option>
<option value="20">20</option>
<option value="40">40</option>
<option value="60">60</option>

</select>&nbsp;&nbsp; x&nbsp;&nbsp;
<select name="F2" style="font-family: Verdana; font-size: 10pt; border: 1px solid #606060">
<option value="0">Height</option>
<option value="20">20</option>
<option value="40">40</option>
<option value="60">60</option>

</select>&nbsp; <br><br></font>
<font face="verdana" size="1" color="black">

<b>Extra features:</b></font><font face="verdana" size="2" color="black"><br>
<select name="F4" style="font-family: Verdana; font-size: 10pt; border: 1px solid #606060">
<option value="0">None</option>
<option value="50">Ad on Homepage ($50)</option>
<option value="50">Treasure Hunt Ad ($50)</option>

</select></font></p>
<p>
<font face="verdana" size="1"><b><font face="verdana" size="1" color="black">
Advertise on homepage banner?</font></b><font face="verdana" size="2" color="black"><br>
<select name="F5" style="font-family: Verdana; font-size: 10pt; border: 1px solid #606060">
<option value="0">No thank you</option>
<option value="200">Yes please ($200)</option>

</select></font></p>
</font>
<p>
<font face="verdana" size="2" color="black">

<input type="submit" value="Calculate" style="font-family: Verdana; font-size: 8pt; border: 1px solid #606060">&nbsp;&nbsp;
<input type="text" name="F3" value="$" size="9" style="font-family: Verdana; font-size: 10pt; border: 1px solid #606060">&nbsp;
</font></p>
<p>

<!-- How do I get this button to email the complete form?? -->

<input type="submit" value="Submit Form" name="B1"></p></form>

aluminumpork
01-15-2006, 12:31 AM
Well, you could do this one of two ways. You could have a button that calculate without submitting the form, and have a "real" submit button that actually performs the actions. Or vice versa.

So here's a small example:


<form name="exampleForm" action="submitForm.html" method="POST">
<input type="text" name="field1" />
<input type="text" name="field2" />
<br>
<input type="button" value="Calculate" onClick="calculate();" />
<input type="submit" value="Submit" />
</form>


All you really need to do is turn one of your submit button into a type of "button" and make an onClick. The easiest would probably be to change the action to your submit page, and change the calculate submit button to a button type with the onclick set to your calculate function.

Hope that helps.

serenaloce146
01-15-2006, 03:07 AM
OMG it worked! I love you!

I thought you had to fool around with the javascript code and rewrite much more than that, didn't know it was that simple.

Thanks again!