CODEWITHSUNDEEP
htmlforms
Jon
Jon

Reputation: 866

Problem with multiple forms on one page

I have two forms on a web page.

The first is not an actual form since this is a .NET based site. So instead I have the standard input fields, along with asp:Button PostBackURL="http:/www...". One of the fields is "email". That works fine.

Then I have an XSLT file with another form, and am using Javascript (via this.form.action, .method, etc) to post that form. Besides that it has the same fields as the form above.

The problem is that when someone submits the second form, the script at the PostBackURL returns an error because the "email" field appears empty. So it seems as though the form is submitting the "email" field form the top form instead of the current one.

I thought maybe the wrong form is being submitted, but if I remove the "email" field from the top form, and then submit the bottom one, it works fine.

Any ideas on how to fix this? Thanks.

Upvotes: 2

Views: 8474

Answers (4)

Bialecki
Bialecki

Reputation: 31041

I'd inspect the HTML by viewing the source, but the likely culprit is that you cannot have nested forms in HTML. If you nest a form in HTML the inner form is ignored and the outer form submitted.

<form id="outer" onsubmit="alert('outer');return false;">
    <form id="inner" onsubmit="alert('inner');return false;">
        <input type="submit" value="Go" />
    </form>
</form>

You can demo this behavior here: http://jsfiddle.net/eRZQD/.

Given this, it's likely you're trying to submit the inner form but the outer form is actually being submitted, which includes a blank email field which is causing your error. You definitely will want to remove the nesting or rework the HTML such that the inner submit button does something slightly different than an outer submit button.

Upvotes: 3

EdSF
EdSF

Reputation: 12351

Without seeing the structure of the page, this may be off (if so, I apologize):

Generally speaking, the FORM that you are controlling via Javascript (submit) should be outside the "main" asp.net server side form.

So structurally:

<html>
<body>
   <form id="the_asp_net_server_side_form" runat="server">       
    ....asp.net controls, content, etc.....
    ....this section is the server-side asp.net form.....
   </form>

   <form id="standard_html_form1" action="blah">
        ....standard html <input> fields
        ....do whatever you want with javascript
        ....if you need to use "old school/legacy" asp style <%= %> code, do so
   </form>

   <form id="standard_html_form2" action="blah">
        ....standard html <input> fields
        ....do whatever you want with javascript
        ....if you need to use "old school/legacy" asp style <%= %> code, do so
   </form>
</body>
</html>

This of course assumes that you need to POST data outside of your ASP.net app (to some external url)....

Upvotes: 1

rlb.usa
rlb.usa

Reputation: 15043

As a quick-fix hack, you can code a hidden email textbox into that second/bottom form, and have it's text be empty string "" or perhaps a dummy email.

It does not address the problem, but it should do the trick.

Upvotes: 0

Zoidberg
Zoidberg

Reputation: 10323

Is that e-mail field disabled? If it is, some browsers won't send the data to the server. what you can do, if it is, is onsubmit, enable that e-mail field.

Upvotes: 0

Related Questions