1. submit submit
(1). Submit button commit
Disadvantages: non-modifiable form submitted form data before submitting
// 1. html
<form method="post" action="/../.." >
<input type="text" name="username" value="" />
<input type="password" name="pwd" value="" />
<input type="submit" value="提交"/>
</form>
(2). Onsubmit submission
Advantages: when requesting submission operation (action), may process the data submitted
// 1. html
<form id='test_form' action='' method='' onsubmit='return checkForm()'>
<input type='text' name='username' value=''/>
<input type='password' id='input_pwd' value =''/> // 注意此没有name属性,不会提交
<input type='hidden' name='pwd' id='md5_pwd' value=''/> // 此有name属性,会被form表单提交
<button type='submit'>提交<button/>
</form>
// 2.js
function checkForm () { // 点击“提交”按钮,执行的方法
var input_pwd= document.getElementById('input_pwd');
var md5_pwd= document.getElementById('md5_pwd');
md5_pwd.value= toMD5(input_pwd.value);
//进行下一步
return true;
}
2. formData submitted
// 1. html
<form id="photoForm">
<input id="photoInput" type="file" title="图片上传" accept=".jpg,.jpeg,image/jpg,image/jpeg" name="myfiles" multiple="multiple">照片导入
</form>
// 2. js
$('#photoForm input').change(function() {
var photoForm = $('#photoForm')[0],
photoFormData = new FormData(photoForm),
photoFileList = $('#photoInput')[0].files; // 上传的文件列表
$('.loading').show();
$.ajax({
type: 'POST',
url: ZD.url+"/cert/filesUpload",
data: photoFormData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
complete:function(){
$('.loading').hide();
$("#photoForm input").val('');
},
success:function(d){
// 成功。。
}
});
});
3. Add Dynamic form submission, js submission
1. Dynamic additional form form
var exportForm = $('<form action="'+ajaxUrl+'" method="post">\
<input type="hidden" name="beginDate" value="'+$(".beginDate").val()+'"/>\
</form>');
$(document.body).append(exportForm);
exportForm.submit(); // 表单提交
exportForm.remove();
2. Form a static form, js submission
// 1. html
<form action="'+ajaxUrl+'" method="post">
<input type="hidden" name="beginDate" value="'+$(".beginDate").val()+'"/>
</form>
// 2. js/JQuery
document.getElementById("form").submit(); // js写法
$("#form").submit(); // jquery写法