Solved

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

Posted on 2004-09-01
13
338 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 2
  • +1
13 Comments
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 11953006
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
ID: 11953026
its not a nested form.
0
 
LVL 4

Expert Comment

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

REGGI
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 19

Expert Comment

by:dakyd
ID: 11953136
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
ID: 11953167
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:Saqib Khan
ID: 11953237
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
 
LVL 4

Author Comment

by:LTY83
ID: 11953302
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
ID: 11953669
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
ID: 11953706
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
ID: 11953807
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
ID: 11954014
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
ID: 11954085
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
ID: 11954201
Haha, no sweat.  Just glad you got what you wanted.  Thanks for the points.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
Suggested Courses

623 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