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

Posted 2023-05-09

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

【英文标题】：Retrieving data from a form loaded with jQuery and passing it to a parent page

【发布时间】：2015-06-24 22:30:20

【问题描述】：

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

<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 不会更新。

【问题讨论】：

为了更清楚起见，查看源代码时，实际上没有任何表单元素出现。只有原始的 jquery 代码是可见的。我直接在页面上放置了一个具有相同元素的“人造表单”，并且每种方法（包括原始方法）都可以正常工作。

我也尝试将最后一段代码移动到与真实表单相同的页面，但这也没有解决任何问题。

【参考方案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);

);

【讨论】：

这似乎是一个更好的方法，但它仍然没有解决问题。我不明白为什么它不起作用。

我直到现在才看到您的编辑。我会暂时试一试。谢谢。 :)

像魅力一样工作。谢谢你帮助一个陌生人。

【参考方案2】：

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

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

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

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

【讨论】：

您对问题的理解是正确的。不幸的是，这并没有解决问题。

尝试更多的东西 - 1) 代替 jQuery 尝试 javascript getElementById 函数，然后使用 html() 来设置值。 2) 尝试在 jQuery 代码中使用 innerhtml() 属性。

我尝试了以下代码...甚至还没有担心分配实际变量。如果我将它分配给实际页面上的一个元素，它可以工作，但不适用于 jQuery 拉入的任何实际表单元素。

function nameUpdate() document.getElementById("profile-group-edit-submit").onclick = function() document.getElementById("display_name").innerHTML = "New Text!"; ; ; nameUpdate();

你可以在 JSFiddle 中添加你的代码并分享。这将很容易找到解决此问题的方法。