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


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

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

在页面加载时,我将 3 个隐藏字段附加到表单并设置事件侦听器

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

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

当表单提交时,函数submitMonerisIframe()由这个Drupal表单属性调用:

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

在这里,我发布了消息,可以看到我的进程MonerisResponse()函数正在被调用(见下文)

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

错误消息:

dataKey: ot-QQHTTg4EDGgBa4mkc0KrCGkPJ


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

我花了几个小时尝试不同的东西,但似乎没有任何效果。

提前感谢!

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

提交表单时,提交的是值属性

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

演示

由于您的代码非常零碎,我构建了一个测试文件.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
)

您能给我们看一下您的帖子处理代码吗?