javascript - 从加载 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);
});
}); 

编辑:

由于动态加载表单，您需要在加载后绑定(bind)提交函数。所以...

$(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);

});