首先提交文件,然后再提交主表单jquery php ajax

时间:2019-02-06 17:53:08

标签: javascript php jquery

我有一个主要形式。我添加了一个上载函数,该函数在主表单之外时起作用,但在组合后提交主表单。我希望它先上传文件,然后继续进行其他验证。

HTML表单

<form action="data.php" method="post" enctype="multipart/form-data" id="mainForm" >
  <div class="form_control">
    <label for="fname" >First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name" required>
  </div>
  <form method="post" id="fileinfo" name="fileinfo" onSubmit="return submitForm();">
    <label>Select a file:</label><br>
    <input type="file" name="file" id="file"/>
    <input type="submit" value="Upload" style="background-color:#001c42; border:1px solid #FFF;width:20%;color:#FFFFFF" id="Upload"/>
  </form>
  <div class="form_control">
    <label for="age" >Age</label>
    <input type="text" id="age" name="age" placeholder="Your age" required>
  </div>
  <input type="submit" value="Submit Main" id="submitme"/>
</form>

当分隔上载表格或单独使用上载表格时,javascript文件将起作用。 但是,当我合并并提交时,它开始验证并希望提交第一个表单。

JavaScript

function submitForm() {
  console.log("You are in the function");

  var fd = new FormData(document.getElementById("fileinfo"));

  fd.append("label", "helpdesk");

  $.ajax({
   url: "upload.php",
   type: "POST",
   data: fd,
   processData: false,  // tell jQuery not to process the data
   contentType: false   // tell jQuery not to set contentType
  }).done(function( data ) {
   console.log( data );
  });

  return false;
}

0 个答案:

没有答案