Solved

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

Posted on 2004-09-01
13
302 Views
Last Modified: 2008-03-17
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>
0
Comment
Question by:LTY83
  • 6
  • 4
  • 2
  • +1
13 Comments
 
LVL 23

Expert Comment

by:adilkhan
Comment Utility
Nested Forms is the Worst Thing. I would not recommend Using Nested Forms. Try not to deal with Nested Forms
0
 
LVL 4

Author Comment

by:LTY83
Comment Utility
its not a nested form.
0
 
LVL 4

Expert Comment

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

REGGI
0
 
LVL 19

Expert Comment

by:dakyd
Comment Utility
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
 
LVL 4

Author Comment

by:LTY83
Comment Utility
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
 
LVL 23

Expert Comment

by:adilkhan
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 4

Author Comment

by:LTY83
Comment Utility
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
 
LVL 19

Expert Comment

by:dakyd
Comment Utility
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
 
LVL 4

Author Comment

by:LTY83
Comment Utility
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
 
LVL 4

Author Comment

by:LTY83
Comment Utility
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
 
LVL 19

Accepted Solution

by:
dakyd earned 500 total points
Comment Utility
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
 
LVL 4

Author Comment

by:LTY83
Comment Utility
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
 
LVL 19

Expert Comment

by:dakyd
Comment Utility
Haha, no sweat.  Just glad you got what you wanted.  Thanks for the points.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now