更新时间:2019年06月26日 16:11:57 作者:胡峻峥 这篇文章主要介绍了JavaScript动态添加数据到表单并提交,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 情景1:已经存在form对象了,动态为form增加对象并提交 1 2 3 4 5 6 7 | function formAppendSubmit(){
var myform=$( '#newArticleForm' ); //得到form对象
var tmpInput=$( "<input type='text' name='blogArticleForm.articleContent'/>" );
tmpInput.attr( "value" , myUeditor.window.getContentInsideBody());
myform.append(tmpInput);
myform.submit();
}
|
情景2:没有form对象,动态生成form,动态添加数据并提交 1 2 3 4 5 6 7 8 9 10 11 12 13 | function (event){
form = $( "<form></form>" )
form.attr( 'action' ,action)
form.attr( 'method' , 'post' )
input1 = $( "<input type='hidden' name='input1' />" )
input1.attr( 'value' , 'input1 value' )
input2 = $( "<input type='text' name='textinput' value='text input' />" )
form.append(input1)
form.append(input2)
form.appendTo( "body" )
form.css( 'display' , 'none' )
form.submit()
}
|
jquery ajax 提交表单 1 2 3 4 5 6 7 8 9 | $.ajax({
type: "POST" ,
url: www.baidu.com,
data: $( '#formId' ).serialize(),
success: function (data) {
},
error: function (data) {
}
});
|
jquery ajax 非表单形式 1 2 3 4 5 6 7 8 9 10 11 | $.ajax({
type: "post" ,
url: "login.action" ,
data: "name=" +user + "&chatRoomId=" +chatRoomId,
success:
function (){
},
error:
function (){
}
});
|
5|0情景3:没有form对象,利用formData,动态添加数据并提交 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function UpladFile(fileUploadId, taskid) {
var fileObj = document.getElementById(fileUploadId).files[0]; // 获取文件对象
// FormData 对象
var form_data = new FormData();
//form.append("author", "hooyes"); // 可以增加表单数据
form_data.append( "taskid" , taskid);
form_data.append( "file" , fileObj); // 文件对象
$.ajax({
type: "POST" ,
dataType: "html" ,
url: www.baidu.com,
data: form_data,
success: function (data) {
},
error: function (data) {
}
});
}
|
|