无法向操作提交表单
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'));
}
});
});
});
相关文章:
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型,然后提交表单
- 添加和删除隐藏字段数组中的值,而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单,并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单,但仍然允许回车工作
- 使用按钮和单选按钮提交表单,但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时,使用JavaScript提交表单
- 提交表单后,Watir文本框输入未持续(重置为以前的文本框输入)