Question

我正在处理一个包含多个表单字段的表单，最后是一个jquery magnific popup中的图像上传表单。（下面粗略的样机:)。

$('#submit').click(function(){
  $.ajax({
    type: "POST",
    url: "path/to/upl-img.cgi",
    data: {
      "dir":$("#filetype").val(),
      "cmd":"Upload",
      "upload":$("#upload").val
    }
  });
});

<form id="form1">
  <!-- stuff stuff stuff -->
  <input type="textfield" id="name" name="name"></input>
  <input type="textfield" id="height" name="height"></input>
  <!-- etc. etc... -->
<button type="upload" id="submit" name="submit" value="Upload">Submit</button>
<button type="reset">Reset</button>
 </form>

<form id="form2">
  <!-- stuff stuff stuff -->
  <input type="textfield" id="age" name="age"></input>
  <input type="textfield" id="birthday" name="birthday"></input>
  <!-- etc. etc... -->
<button type="upload" id="submit" name="submit" value="Upload">Submit</button>
<button type="reset">Reset</button>
 </form>

<form id="form3" class="magnificPopup">
  <input type="textfield" id="filename" name="filename"></input>
  <input type="file" id="upload" name="upload"></input>
  <select id="filetype" name="filetype">
      <option value="path/to/">Location 1</option>
                  ....etc
  </select>

<button type="upload" id="submit" name="submit" value="Upload">Submit</button>
<button type="reset">Reset</button>
</form>

upl-img.cgi文件包含将文件上载到数据库的功能。现在发生的事情是，当按下“提交”按钮时，它会通过执行完整的表单提交在已定义的目录中发布图像...我希望form3发布数据而不进行完整的表单提交，如果这样做感觉......我不确定我描述我需要的东西

Answer 1

您必须取消默认活动，否则表单仍会提交。

('#submit').click(function(event){
    event.preventDefault();
    $.ajax({

    });
});

此外，我发现您对多个元素使用相同的“id” - “id”应该（必须）在文档范围内唯一。

jQuery magnific popup保存表单数据，没有完全提交

1 个答案: