Simply trying to submit a simple form inside form, weird behavior

Question

I have a ad banner that has a form and this is used by 3rd party site owners that grab this code and have this banner on there site.

Since some sites that use this banner have a <form> wrapping there entire site i have found that the banners form doesn't submit it rather submits the outer form.

Here is the code:

  <form onSubmit="return alert('outer form submitted')">

    <!-- only if i add this empty form it submits the inner -->
         <form></form>
    <!-- End Empty form -->

    <!-- inner form -->
      <form onSubmit="return alert('inner form submitted')" > 
           <input type="submit" /> 
      </form> 
    <!--end  inner form -->

 </form> 

As you can see only if i add a empty <form> before the inner <form> it alert (submits) the inner, otherwise it submits the outer.

what is the best way to code a banner ad for a site with a form?

Answer 1

Having a <form> inside a <form> is malformed HTML, and all bets are off how any browser/user-agent/javascript-engine/dom implementation is going to handle it. Expect wildly different or equal results between different visitors. Just don't have a <form> in a <form>. Period :)

Most likely scenario in your observed behavior: starting a <form> tag inside a form is probably 'discarded' as invalid, including any actions/events (but probably not <input>s), the first </form> closes the 'main' form.