提交按钮后附加表单输入答案

【问题标题】：form inout getting appended after the submit button提交按钮后附加表单输入
【发布时间】：2014-05-31 06:14:15
【问题描述】：

我有以下 javascript 函数

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

    // Hide the error display, as there is currently no error
    txJ$("#TokenProxy_Error").css('display', 'none');

    //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 = 'jjh';
    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$(".zwitch_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', false);
    xhr.send(params);

html表单是

<form method="POST" action="pp.php">

<input type="text" class="data" name="ccnumber" value="4048341128241910" />
<input type="text" class="cvv" name="cvv" />



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

</form>

当脚本运行时，我得到的表单为

<form method="POST" action="pp.php">

<input type="text" class="data" name="ccnumber" value="4048341128241910" />
<input type="text" class="cvv" name="cvv" />



<input type="submit" class="submit"  value="tokenize" />
<input type="hidden" name="card_token" />

</form>

使用javascript附加的字段<input type="hidden" name="card_token" />位于提交按钮之后，因此该字段没有被提交。

如何在提交按钮之前添加此字段，有什么帮助吗？

【问题讨论】：

在哪个事件中你需要附加隐藏的输入？
@Madurai 更新了问题，请查看它的提交事件
@PiyaSharma：谁告诉你如果在提交按钮后附加了任何输入字段，那么该字段不会被提交。主要的是：字段必须在 "
" 标签内，位置根本不重要..
另外，对于您的问题：使用 prependTo 而不是 appendTo。

标签： javascript php html forms input

【解决方案1】：

您可以使用 jQuery prepend 功能：

$("input[type='submit']").prepend('<input type="hidden" id="token" name="token" value="'+ token + '">');
$("input[type='submit']").prepend('<input type="hidden" id="cvv" name="cvv" value="'+ txCvv + '">');

【讨论】：

我有一个响应表单提交事件的函数

【解决方案2】：

你为什么不尝试这样的事情..

在你的表单中放一个div 和一些id 就像说<div id="div1"></div> 和你的javascript 应该是这样的

var MyForm = txJ$("#div1");

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

如果您遇到任何其他问题，请告诉我...

【讨论】：