Problem with multiple forms on one page_问答_开发者

开发者 https://www.devze.com 2022-12-25 07:24 出处：网络

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

相关专题：forms

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 er开发者_如何学JAVAror 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.

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.

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)....

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.

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.