将输入字段的值过帐到包含提交按钮的表单标记之外

Question

我有3个输入字段，它们不在表单标记中。我无法将它们添加到表单中，因为这三个输入字段位于同一页面上的不同位置。

当我按下提交按钮时，我也想在表单标签外发布输入值。我该怎么做？

<input input type="text" id="elecr"  value="2" name="electricity"></input>
<input input type="text" id="3wheel"  value="3" name="threewheel"></input>
<input input type="text" id="4wheel"  value="2" name="fourwheel"></input>
<form action="/savedata" method="post">
2Wheeler: <input type="text" id="2wheeler"  value="0" name="twowheeler"/><br><br>
<input type="submit" />
</form>

Answer 1

只需通过jquery存储所有输入字段的值，然后单击提交按钮通过ajax提交表单。

$('form').submit(function(event) {
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'electricity'  : $('input[name=electricity]').val(),
'threewheel'   : $('input[name=threewheel]').val(),
'fourwheel'    : $('input[name=fourwheel]').val(),
'twowheeler'   : $('input[name=twowheeler]').val(),
};
// process the form
$.ajax({
type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url         : 'savedata.php', // the url where we want to POST
data        : formData, // our data object
dataType    : 'json', // what type of data do we expect back from the server
encode      : true
})

您可以进行日志记录，也可以在jquery中进行错误处理。

Answer 2

1. 编写javascript处理提交事件
2. 在提交事件中，用表单数据附加您的输入
3. 提交

有关参考，请参阅在提交之前添加POST参数

$( 'form' ).submit(function ( e ) {
var data;
data = new FormData();
data.append( 'electricity', $('#elecr').val());
data.append( 'threewheel', $('#3wheel').val());
data.append( 'fourwheel', $('#4wheel').val());
$.ajax({
url: 'savedata.php',
data: data,
processData: false,
type: 'POST',
success: function ( data ) {
alert( data );
}
});
e.preventDefault();
});