2 Submit buttons, One outside form needs to activate validation, then submit

Hello, I have two submit buttons, one inside form which when clicked validates form(through javascript) and then proceeds to submit data if valid; second submit button outside form must do the same, I can have it submit the form from outside but if I add the code to validate the form it will prompt the user on missing fields but will not submit when those fields are filled in. The code looks similar to what is below:

Here is submit outside of form
<input type = "submit" value = "Print Quote" style ="height:20px;font-family:arial;font-size:9pt;width:80px;" onClick="document.theform.action='enter-quote.asp?qid=<%= request.querystring("qid") %>&id=<%= request.querystring("id") %>&mode=upd';return validForm(theform);document.theform.submit()">

The Submit above works if I remove the return validForm(theform); however it will not validate then, if I keep that code in it validates but does not submit after correct fields are filled in and the button is clicked again

Here is some of the Form
<form method = "post" action = "oops.html" name ="theform" onsubmit="return validForm(this)">
<% if form <> "badUpdate" then %>
<tr>
      <td align = "right">

Here is the submit inside the form that works properly

<input type ="submit" value = "Save Quote Information" style ="height:20px;font-family:arial;font-size:9pt;width:150px;" onClick="document.theform.action='enter-quote.asp?qid=<%= request.querystring("qid") %>&id=<%= request.querystring("id") %>&mode=save';"></td>

<table cellspacing="2" cellpadding="2" border="0" style = "font-family:arial;font-size:9pt;">
<tr>
    <td align = "right"><strong>Ship To:</strong></td>
    <td><input type = "text" class ="txtfield" name = "shipTo" value = "<%= si("shipto") %>"></td>
</tr>
<tr>
    <td align = "right"><strong>Shipping Address:</strong></td>
    <td><input type = "text" class ="txtfield" name = "shipAddr" value = "<%= si("shipAddr") %>"></td>
</tr>
<tr>
    <td align = "right"><strong>Shipping City:</strong></td>
    <td><input type = "text" class ="txtfield" name = "shipCity" value = "<%= si("shipCity") %>"></td>
</tr>
<tr>
    <td align = "right"><strong>Shipping State:</strong></td>
    <td>      
      <select name = "shipSt" class = "txtfield">
      <option value = "Select">Select</option>
LVL 4
LTY83Asked:
Who is Participating?
 
dakydConnect With a Mentor Commented:
D'oh, that's just me and my stupid self forgetting to put parentheses in the if clause.  Try it now:

<input type="submit" value="Print Quote" style="height:20px;font-family:arial;font-size:9pt;width:80px;" onClick="document.theform.action='enter-quote.asp?qid=<%= request.querystring("qid") %>&id=<%= request.querystring("id") %>&mode=upd'; if (validForm(theform)) document.theform.submit(); else return false;">
0
 
Saqib KhanSenior DeveloperCommented:
Nested Forms is the Worst Thing. I would not recommend Using Nested Forms. Try not to deal with Nested Forms
0
 
LTY83Author Commented:
its not a nested form.
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
reggi635Commented:
If it's not nested make sure you have the opening and closing form tags in right place.

REGGI
0
 
dakydCommented:
You've got a submit button OUTSIDE an existing form?  That's not correct mark up, and in some browsers, the outer submit button won't do anything.  What are you trying to do, and why do you need two submit buttons that do the exact same thing?
0
 
LTY83Author Commented:
It works correctly, if you read the code you will see how the submit outside the form still activates that form to submit. I need it for ease of use for the user, plus each submit does something different, one causes one form action, the other causes another form action for that same form.

all closing tags are correct, everything is correct except for the problem i stated in the initial comment.
0
 
Saqib KhanSenior DeveloperCommented:
Maybe it still Activates in your Browser. but its not Correct markup(As Mentioned Before)

What you can do is probably use the Images or Links or even a button and try placing this Code to Submit the form

<input type="Button" onClick="document.forms['FORM_NAME'].submit()">
0
 
LTY83Author Commented:
Well I tested the button(outside the form) without the javascript validation code: return validForm(theform); and it will submit the form, however when i add that code (javascript validation code) to make sure fields aren't blank it does check and validate the form, but once it validates it and I go to press the button again (after filling in the fields so the form is valid) the button does not submit.

basically i'm trying to make this button outside of the form validate the form as well before submitting it so there isn't blank data on the submit.

0
 
dakydCommented:
adilkhan's suggestion probably makes the most sense here - what you're looking for is more of a button outside the form than a submit button.  However, if you're intent on using the two submits, then the problem lies in how you're calling the validation function.  Using return for an event handler causes the event handler to stop - so if you do something like return validForm(theform), then the browser will ignore anything that comes after that statement.  You probably need this:

<input type="submit" value="Print Quote" style="height:20px;font-family:arial;font-size:9pt;width:80px;" onClick="document.theform.action='enter-quote.asp?qid=<%= request.querystring("qid") %>&id=<%= request.querystring("id") %>&mode=upd'; if validForm(theform) document.theform.submit(); else return false;">


Theoretically, you could even take out the validation altogether from the outer submit button.  The form itself will do the validation onsubmit, so there's no need to do it twice.  So something like this might do the trick:

<input type="submit" value="Print Quote" style="height:20px;font-family:arial;font-size:9pt;width:80px;" onClick="document.theform.action='enter-quote.asp?qid=<%= request.querystring("qid") %>&id=<%= request.querystring("id") %>&mode=upd'; document.theform.submit();">

I say *might* do the trick because you are using a non-standard method of submitting the form, and like I said before, it's possible a browser may have issues with that.  Either way, hope that helps.
0
 
LTY83Author Commented:
Ahh let me give that a try, i did try it with out the validation but it only submitted the form and did not validate, however that previous code you gave me may do the trick, i'll let you know in 2 mins! Thanks!!
0
 
LTY83Author Commented:
Hmm I seem to be getting an error that states: expected '('

also when it doesn't error it does nothing on click, that valid should call a js box that tells the user they need to enter data into the relevant field.

I think we are really close however!
0
 
LTY83Author Commented:
THANKS! it works great, exactly what I was looking for, you make me look so smart I wish you could be here to take credit

thanks!!!!
0
 
dakydCommented:
Haha, no sweat.  Just glad you got what you wanted.  Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.