Jquery `.click` Submits all forms

Question

I have a form:

<form class=" id="form-edit_usr" action="edit_usr.php" method="post" enctype="multipart/form-data">

Inside of that form i have another form:

<button id="usrPhoto" class="btn"> 
   <img src="" width='100' height='140'>
</button> 

  <form id="uploadForm" method="post">
    <input type="file" id="uploadPhoto" name="uploadPhoto" data-usr="" style="display: none;"/> 
  </form>

To the "main" for i have a "submit button"

  <input type="submit" class="btn" value="Update" />
</form>

With Jquery i control the file input:

$('#usrPhoto').on('click', function(){
    //Check if user is selected
    selectedUsr = $('#choosen_usr_email').val();
    if(selectedUsr){
        //If user is selected open file dialog
        $("#uploadPhoto").click();
    }
})

My problem is when i press the #userPhoto element,
#uploadPhoto shall open file dialog, but it also submits my main form.

How can i prevent the .click() from submitting all forms/Buttons?

http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form — Callan Heard, Jun 28 '16 at 12:12
@rybo111 Yes i do. But i don't use it as a form. I use it just to use Jquery´s `formData` — Björn C, Jun 28 '16 at 12:12
Mjukis, it's like having an `` anchor inside another anchor and expect it to work the way it cannot work :D — Roko C. Buljan, Jun 28 '16 at 12:15
Your HTML is invalid. Please add a closing `form` tag and it's class only has 1 opening quote mark. Please amend this — wmash, Jun 28 '16 at 12:17
Either split into two forms, or combine it into one form, and handle the submit based on what the user has selected. Also, avoid telling jQuery to click submit buttons - just tell it to submit the form with `.submit()`. — rybo111, Jun 28 '16 at 12:17

score 3 · Accepted Answer · answered Jun 28 '16 at 12:13

By the HTML specification. You cannot have a form inside another form.

Check your resulting html in your browser's inspector and you will see the "inner form" is missing.

You could break them in 2 separate forms or use pure JS to upload the file. There's a question (and answers) about it here.

score 0 · Answer 2 · answered Jun 28 '16 at 15:31

0

Maybe you can using the jQuery submit function

$('.button').on('click',function(){
  $('.formID').submit();
});

answered Jun 28 '16 at 15:31

Felix Fong

969
1
8
21

Jquery `.click` Submits all forms

2 Answers2