javascript - Jquery `.click` 提交所有表单

Question

我有一个表格:

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

在那个表格里面我有另一个表格:

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

到“主”，因为我有一个“提交按钮”

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

使用 Jquery 我控制文件输入:

$('#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();
    }
})

我的问题是当我按下 #userPhoto 元素时，
#uploadPhoto 将打开文件对话框，但它也会提交我的主表单。

如何防止 .click() 提交所有表单/按钮？

Answer 1

根据 HTML 规范。您不能在另一个表单中包含一个表单。

在浏览器的检查器中检查生成的 html，您会看到“内部表单”丢失了。

您可以将它们分成 2 个单独的形式或使用纯 JS 上传文件。有一个关于它的问题(和答案)here .