无法向操作提交表单


Not able to submit a form to the action

我在javascript 中有这个函数

txJ$(document).ready(function () {

    //txJ$(".submit").closest("form").submit(function (e) {
    txJ$(".submit").closest("form").submit(function (event) {
        //check for encryption key
        { TxEncrypt(event); }
    });
});
function TxEncrypt(event)
{ //perform encryption of token data, then submit the form like normal
    //obtain public key and initial JSEncrypt object
    var txPubKey = '123';
    var txEncrypter = new JSEncrypt();
    txEncrypter.setPublicKey(txPubKey);
    //get Data and encrypt it
    var txData = '{}';
    var txCryptData = '';
    if(txJ$(".data").length > 1)
    { //if there are more than one element with this class, convert it to json string
        txData = txJ$(".data").serializeObject();
        txCryptData = txEncrypter.encrypt(JSON.stringify(txData));
    }
    else
    {   //else, just encrypt the value
        txData = txJ$(".data").val();
        txCryptData = txEncrypter.encrypt(txData);
    }

    dataString = txCryptData;
    var xhr = new XMLHttpRequest();
    var params=dataString;
    var token;
    xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status==200) {
    token=xhr.responseText;
    alert(token);
    //add value/field to form
    txCvv = txJ$(".cvv").val();
    var MyForm = txJ$(".submit").closest("form");
        txJ$('<input type="hidden">').attr({
                id: 'token',
                name: 'token'
            }).val(token).appendTo(MyForm);
        txJ$('<input type="hidden">').attr({
                id: 'cvv',
                name: 'cvv'
            }).val(txCvv).appendTo(MyForm);
    //scrub data that we do not want to post
    txJ$(".data").removeAttr('name');
    txJ$(".cvv").removeAttr('name');
        }
    }
    xhr.open('POST', 'tokenize.php', true);
    xhr.send(params); 
    event.preventDefault();

}

形式为

<form method="POST" action="pp.php">
<input type="text" class="data" name="ccnumber" value="4242424242424242" />
<input type="text" class="cvv" name="cvv" />

<input type="submit" class="submit"  value="tokenize" />
</form>

脚本所做的是,从以数据为类的输入字段中获取值,并从xmlhttpsrequest中处理它,从服务器中获取令牌,并将令牌作为隐藏字段附加到表单中,然后提交表单。这就是我想要做的。

当我点击提交按钮时,所有这些都会发生。

但很明显,由于存在event.preventDefault();,该表单将不会像往常一样提交操作。但是,如果我删除event.preventDefault();,隐藏的字段就不会被附加,更多的通过xmlhttprequest的信息也不会被发送。

我在if (xhr.readyState == 4 && xhr.status==200) {中尝试了MyForm.submit();,但它所做的是一次又一次地调用相同的函数。

有没有什么方法可以在函数运行后将表单提交给操作(而不是调用此函数)?

我给您举一个代码示例,您需要对代码进行改进和处理首先添加一个id="myform"以形成

$(document).ready(function () {
    $("#myform").submit(function (e) {
       e.preventDefault(); // stop refresh form
      // get your data and do your stuff with that
        $.ajax({
                type: "POST",
                url: "tokenize.php",
               // send your data will be post
                data: {
                    name: "Rakesh",
                    time: "2pm"
                },
                success: function (data) {
                   // remove elements from form
                      $('.data').remove();
                      $('.cvv').remove();
                    // adding a hidden field to form
                     $('<input />').attr('type', 'hidden').attr('name', "something").attr('value', "something").appendTo($('.submit').closest('form'));
                }
            });
    });
});