jQuery magnefic popup 保存表单数据而无需完全提交

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”应该（必须）在文档范围内是唯一的。