使用jQuery提交通过Ajax加载的表单

时间:2015-03-14 23:21:58

标签: javascript php jquery ajax forms

我有一个用户选择一系列选项后以动态方式加载的表单。

一旦显示表单,用户必须单击表单中的按钮以确认选择并重定向到第三方站点。 在重定向用户之前,我需要通知我们的系统用户已确认选项并生成ID以通过第三方站点,以便识别交易。

jQuery函数如下。

$.ajax({
    type: "GET",
    url: 'functions.php?funcion=transaccion&order=' + pedido , 
    dataType: "xml",
    success: function(xml){
        $("#param").val($(xml).find('trxid').text());
        $('#form_pago').submit();
    },
    error: function() {
        alert("Error en transaccion.");
    }
}); 

带回ID但表格未提交。

我的猜测是问题是表单被动态加载,因此在解析DOM时它不存在,但我找不到如何在任何地方提交它。

编辑:

似乎我的问题不够具体,或者我没有找到答案,因为他们没有解决我的问题..

这是代码的完整版本:

这是加载表单的函数。

function mostrarFormulario(pedido){
    $.ajax({
        type: "GET",
        url: 'functions.php?funcion=getFormularioPago&pedido=' + pedido, 
        dataType: "xml",
        success: function(xml){
            $("#fin_pedido").html($(xml).find('formulario').text());
        },
        error: function() {
            alert("Se ha producido un error al generar el boton para realizar el pago.");
        }
    }); 
}

这是正在加载的表单

<form method="post" action="https://sps433.decidir.net/sps-ar/Validar" target="_top" id="pago_decidir">  
  <input name="NROCOMERCIO" value="xxxxxxx" type="hidden">
  <input name="NROOPERACION" value="NROOP" type="hidden">
  <input name="MONTO" value="nnnnnnnn" type="hidden">
  <input name="CUOTAS" value="" type="hidden">
  <input name="URLDINAMICA" value="http://URL-RETORNO" type="hidden">
  <input name="EMAILCLIENTE" value="xxxxxx@xxxxxx" type="hidden">
  <input name="MEDIODEPAGO" value="xxxxx" type="hidden">
  <input name="PARAMSITIO" value="" id="paramsitio" type="hidden">
  <input value="Pagar con Decidir" name="submit" alt="Pagar con Decidir" onclick="generarTransaccion('nnn')" border="0" type="button">
</form>

这是onClick中调用的函数,它应在检索需要发送的ID后提交表单。

function generarTransaccion(pedido) {
    $.ajax({
        type: "GET",
        url: 'functions.php?funcion=transaccion&pedido=' + pedido , 
        dataType: "xml",
        success: function(xml){
            $("#paramsitio").val($(xml).find('trxid').text());
            $('#pago_decidir').submit();
        },
        error: function() {
            alert("Se ha producido un error al generar el boton para realizar el pago.");
        }
    }); 
}

此函数正确检索并替换ID,但不提交表单。

4 个答案:

答案 0 :(得分:0)

尝试使用&#34; .on()&#34;包装您的提交。 例如

$("#formcontainer").on("click", ".dynamicformbutton", function(){
    $('#form_pago').submit();
});

如果formcontainer是您将表单放入容器的id,而dynamicformbutton是表单中的一个提交按钮类。

编辑:您需要将其置于ajax调用之外。

答案 1 :(得分:0)

由于表单是动态加载的,因此它不会出现在DOM中。因此,您需要将事件绑定到文档,同时单击提交按钮。

因此,如果您的表单提交按钮具有Id="btn",那么这应该有效 -

$(document).on('click', '#btn', function() {
    // do your stuff
    ...
});

答案 2 :(得分:0)

使用此完整代码:

$(document).on('click', '#buttonID', function() {
   $.ajax({
    type: "GET",
    url: 'functions.php?funcion=transaccion&order=' + pedido , 
    dataType: "xml",
    success: function(xml){
        $("#param").val($(xml).find('trxid').text());
        $('#form_pago').submit();
    },
    error: function() {
        alert("Error en transaccion.");
    }
});
});

发出警报(&#34; 1&#34;);代码内部的函数,可以帮助您检查此代码是否正常工作。感谢

答案 3 :(得分:0)

尝试将查找功能也添加到表单中 HttpStatusCode: 404 ErrorCode: WebContentNotFound RequestId : 18382fd7-f01e-0015-31cc-67b610000000 TimeStamp : 2021-06-23T01:10:44.3896906Z