'Submitting a nested form, weird behavior

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?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source