Question

我目前正在将一个表单带入这样的div：

$('#m').load('http://example.com/converter/index.php #converty');

我需要将结果显示在#m div中，目前它需要转到converter / index.php页面，任何帮助表示赞赏！加载的表单：

<form action="/converter/index.php" method="post" id="conversionForm" style="display: block;">
**do stuff**
</form>

仅供参考：带有脚本的页面位于根域，而转换器位于example.com/converter目录下。

Answer 1

使用表单元素上的.submit方法阻止表单提交的默认行为，然后使用.serializeArray收集表单数据并执行您需要执行的操作。

这是一个例子。

$( "form" ).submit(function( event ) {
  var formData = $( this ).serializeArray();
  $.each(formData, function(i, item) {
    var $p = $("<p>");
    $p.text(item.name + ": " + item.value);
    $("#output").append($p);
  })
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<form method="get" action="foo.php">
  <div><input type="text" name="a" value="1" id="a"></div>
  <div><input type="text" name="b" value="2" id="b"></div>
  <div><input type="hidden" name="c" value="3" id="c"></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f">
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g">
  </div>
</form>

如何在div中显示表单的结果？

1 个答案: