将jQuery输入包含在表单帖子中

Include jQuery input with form post?

本文关键字：表单 jQuery 输入 包含      更新时间：2024-05-14

我在表单中有一个字段供用户输入地址。在他们输入地址后，它将与jQuery.ajax一起发送到远程API进行验证并解析为各个字段。结果是一个jsonp对象，我对它进行操作以提取我需要的字段。

我的目标是将地址包含在多个部分中，这样它就可以与表单中的其他字段一起处理。到目前为止，我唯一能想到的方法就是添加用正确值填充的隐藏字段。这感觉有点笨重，所以我想知道是否有更好的方法

目前，用户在一行中输入地址，类似于以下内容：

<form method="POST" id="myForm">
  <input type="text" id ="address>
  <div class="recipients"></div>
  <input type="submit">
</form>

ajax在它们聚焦到地址字段之外时被触发，在成功返回jsonp对象时，提取必要的字段，然后插入到表单中：

success: function(data) {
    var results = data.results[0];
    var address1 = results.Address1;
    var address2 = results.Address2;
    var city     = results.Locality;
    var state    = results.AdministrativeArea;
    var zip      = results.PostalCode;
    var addLines = "<input type='hidden' name='address1' value='"+address1+"'>";
    addLines += "<input type='hidden' name='address2' value='"+address2+"'>";
    addLines += "<input type='hidden' name='state' value='"+state+"'>";
    addLines += "<input type='hidden' name='city' value='"+city+"'>";
    addLines += "<input type='hidden' name='zip' value='"+zip+"'>";
    $(".recipients").append($(addLines));
    }

有没有一种更优雅的方法可以将返回的数据包含到POST中？谢谢你的帮助！

首先，注意不要让那些隐藏字段与当前代码重复。如果在focusout上的每一次成功的AJAX调用中都调用了这个，那么如果用户切换几次焦点，你可能会得到很多这样的调用。

也就是说，如果你想像现在这样坚持在一个单独的调用中将所有干净的数据发送到API，我认为你采取了正确的方法。由于上述原因，您应该只在静态html中包含隐藏字段，而不是在AJAX响应中创建新字段。现在，您可以在AJAX响应上更新那些input的值。快速示例：

var addLines = "<input type='hidden' name='address1' value='"+address1+"'>"

成为

$('#address1').val(address1); // assume id is 'address1'

如果你仍然不喜欢这种感觉，你可以将实际值保存在JS变量中，并再次使用jQuery自己进行POST。拦截表单提交，取消它，并使用您在表单中保留的变量和其他字段创建自己的POST。这实际上更麻烦和更混乱，因为您需要确保您的代码现在包括表单中的所有相关值，并在添加新字段时继续这样做。

我想我更喜欢隐藏输入字段的方法，只是"更漂亮"的更新。

为什么收件人div中没有它们，因为它们已经隐藏

<div class="recipients">
<input type='hidden' name='address1' value="" id="address1">
<input type='hidden' name='address2' value="" id="address2">
....
</div>

然后使用jquery像一样更新它们

success: function(data) {
var results = data.results[0];
var address1 = results.Address1;
var address2 = results.Address2;
$('#address1').val(address1);
$('#address2').val(address2);
.....
相关文章：