JS/Jquery 表單方式提交總結

1. submit提交

(1). submit 按鈕式提交

缺點：在提交前不可修改提交的form表單數據

// 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方式提交

優勢：在請求提交操做(action)時，可對提交的數據進行處理

// 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 提交

// 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. 動態添加表單提交, js方式提交

1. 動態追加的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表單，js方式提交

// 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寫法