如何使用 Javascript 从 iFrame 响应设置隐藏字段值？

Question

我试图在提交基于从 iFrame 消息中收到的值的表单时填充 3 个隐藏的 HTML 文件。此表单是使用 Drupal 表单 API 构建的

在页面加载时，我将 3 个隐藏字段附加到表单并设置 eventListener

setupMonerisHiddenFormElements() 
{

    $('<input type="hidden">').attr({
        id: 'responseCode',
        name: 'responseCode',
    }).appendTo('form');     

    $('<input type="hidden">').attr({
        id: 'dataKey',
        name: 'dataKey',
    }).appendTo('form');     

    $('<input type="hidden">').attr({
        id: 'errorMessage',
        name: 'errorMessage',
    }).appendTo('form');        
}

window.onload = function()
{

    is_production = Drupal.settings.moneris_payment_processor.is_production;
    qa_gateway_url = Drupal.settings.moneris_payment_processor.qa_gateway_url;
    prod_gateway_url = Drupal.settings.moneris_payment_processor.prod_gateway_url;

    gateway_url = ((is_production) ?  qa_gateway_url : prod_gateway_url);

    if (window.addEventListener)
    {   
        window.addEventListener("message", processMonerisResponse, false);
    }
    else
    {
        if (window.attachEvent)
        {
            window.attachEvent("onmessage", processMonerisResponse);
        }
    }

    setupMonerisHiddenFormElements();

 }

我可以看到这些字段正在添加到表单中。这不是问题。

提交表单时，此 Drupal 表单属性调用函数 submitMonerisIframe()：

$form['#attributes'] = array('OnSubmit' => 'submitMonerisIframe();');

我在这里发布消息，可以看到正在调用我的 processMonerisResponse() 函数（见下文）

function submitMonerisIframe()
{
    var monFrameRef = document.getElementById('monerisFrame').contentWindow;    
    monFrameRef.postMessage('',gateway_url);
}

我添加了我的调试。当我提交表单时，我可以看到隐藏值设置正确。

function processMonerisResponse(e)
{
    console.log(e.data);
    this.respData = eval("(" + e.data + ")");

    $('#responseCode').attr('value',respData.responseCode);
    $('#errorMessage').attr('value',respData.errorMessage);
    $('#dataKey').attr('value',respData.dataKey);

    console.log("---------- RESPONSE -----------------");
    console.log("responseCode: " + $('#responseCode').attr('value'));
    console.log("errorMessage: " + $('#errorMessage').attr('value'));
    console.log("dataKey: " + $('#dataKey').attr('value'));
    console.log("-------------------------------------");

    e.preventDefault();

 }

来自控制台的结果：

{"responseCode":"001","dataKey":"ot-QQHTTg4EDGgBa4mkc0KrCGkPJ","bin":"378734"}

------------ 回复----------------

响应代码：001

错误消息：

数据密钥：ot-QQHTTg4EDGgBa4mkc0KrCGkPJ

但是当我检查 $_POST[] 数据时，隐藏字段在那里但是是空的。

我花了几个小时尝试不同的事情，但似乎没有任何效果。

提前致谢！

Answer 1

设置属性 value 与设置属性 value 不同。

当您提交表单时，提交的是值属性。

使用 val() 而不是 attr() 来设置或获取 value。

DEMO

Answer 2

由于您的代码非常零散，我构建了一个 testfile.php:

<?php
    if(isset($_POST)) {
        print_r($_POST);
    }
?>
<script src="js/jquery.min.js"></script>
<script>
function setupMonerisHiddenFormElements() 
{

    $('<input type="hidden">').attr({
        id: 'responseCode',
        name: 'responseCode',
    }).appendTo('form');     

    $('<input type="hidden">').attr({
        id: 'dataKey',
        name: 'dataKey',
    }).appendTo('form');     

    $('<input type="hidden">').attr({
        id: 'errorMessage',
        name: 'errorMessage',
    }).appendTo('form');        
}

$(document).ready(function() {
    setupMonerisHiddenFormElements();
    $('#responseCode').val('response for responseCode');
    $('#dataKey').val('response for dataKey');
    $('#errorMessage').val('response for errorMessage');
});

</script>

<form action="file.php" method="POST">
    <input type="submit" name="submitbutton" value="submit"/>
</form>

$_POST 数组的结果：

Array (
    [submitbutton] => submit
    [responseCode] => response for responseCode
    [dataKey] => response for dataKey
    [errorMessage] => response for errorMessage
)

你能告诉我们你的 post 处理代码吗？

如何使用 Javascript 从 iFrame 响应设置隐藏字段值？

How do I set Hidden field values from an iFrame response with Javascript?

javascript

php

jquery

drupal