从使用 jQuery 加载的表单中检索数据并将其传递给父页面

Question

我有一个“父”页面，它使用以下代码从同一域的不同页面中提取表单。我不能直接将表单放在“父级”上是有原因的。

<script type="text/javascript">
    jQuery("#ai_temp_profile_edit").load(
        "https://example.com/form/ #profile-edit-form", 
        function() {}
    ).hide().fadeIn(1000);
</script>

拉进来的表格是这样的：

<form action="https://example.com/form/" method="post" id="profile-edit-form" class="standard-form base" target="hiddenFrame">
    <label for="field_1">Name</label>
    <input  id="field_1" name="field_1" type="text" value="Joey-Jojo Jr. Shabadoo">
    <input type="submit" name="profile-group-edit-submit" id="profile-group-edit-submit" value="Save Changes " />
    <input type="hidden" name="field_ids" id="field_ids" value="1" />
    <input type="hidden" id="_wpnonce" name="_wpnonce" value="a62f8d5fec" />
    <input type="hidden" name="_wp_http_referer" value="/form/" />
</form>

单击“提交”时，https://example.com/form/ 会在隐藏的 iframe 中打开，并且用户名会正确保存。这一切都很好。

我希望通过 jquery 更新当前加载的“父”页面上的用户名，以便用户有一些即时的视觉反馈，表明名称更改已经发生。

我的方法是在单击“提交”时尝试从“field_1”输入中取出值，然后将该变量传递到父页面中 id 为“display_name”的 div。

$(document).ready(function(){
function nameUpdate(){
    $("#profile-group-edit-submit").click(function () {
    var updateName = $("#field_1").val();
    $("#display_name").text(updateName);
    });
}       
nameUpdate();

});

我也试过添加

window.parent.

在#display_name 选择器部分之前，它没有改变任何东西。

我在同一页面上的另一个按钮/div 组合上使用了这种方法，它可以工作，不同之处在于该特定按钮位于 iframe 中，而不是由 jquery 加载。所以我猜我的问题与这个事实有关。

我已经用谷歌搜索了，但是对于如何表达我的问题、要查找的内容等已经没有什么想法了......

任何帮助将不胜感激。谢谢！

编辑：为清楚起见，带有 id #display_name 的 div 不会更新。

Answer 1

使用jquery处理表单提交。

$(document).ready(function(){
$('#profile-edit-form').submit(function(){ 
    var updateName = $("#field_1").val();
    $("#display_name").text(updateName);
});
}); 

编辑：

由于您动态加载表单，您需要在加载后绑定提交功能。所以……

$(document).ready(function () {
    var formLoaded = function () {
        $('#profile-edit-form').submit(function () {
            var updateName = $("#field_1").val();
            $("#display_name").text(updateName);
        });
    };

    $("#ai_temp_profile_edit").load(
            "https://example.com/form/ #profile-edit-form",
            formLoaded
    ).hide().fadeIn(1000);

});

Answer 2

如果我理解正确，您的问题是“display_name”字段没有更新为最新值。 如果这是问题，那么您可以尝试以下方法吗？

而不是 $("#display_name").text(updateName); 尝试使用- $("#display_name").val(updateName);

根据 jQuery 网站上的文档，Val() 可以很好地处理表单元素，而文本则不行。

更多关于 Val() 方法-https://api.jquery.com/val/#val2