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

Posted 2023-05-09

【中文标题】jQuery magnefic popup 保存表单数据而无需完全提交

【英文标题】：jQuery magnefic popup save form data without full submit

【发布时间】：2015-06-16 18:53:22

【问题描述】：

我正在处理一个具有多个表单字段的表单，最后在 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 在不提交完整表单的情况下发布数据，如果这样的话感觉......我不确定我描述我需要的东西有多好

【参考方案1】：

您必须取消默认事件，否则表单仍会被提交。

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

    );
);

我还看到您对多个元素使用相同的“id” - “id”应该（必须）在文档范围内是唯一的。

【讨论】：

哦，多个相同的 id 只是复制/粘贴，只是在这个骨架代码示例中用于填充，我想我懒得填充多个...但是在文档本身中所有 id是独一无二的

但是只是为了确认一下，这样做，它会在不进行完整表单提交的情况下将数据POST到服务器吗？

通常（不使用javascript）单击提交按钮将提交包含表单-这就是为什么event.preventDefault() 取消此默认行为的原因。而是调用 $.ajax，它使用 ajax 发送请求。