当前位置：首页 > 行业动态 > 正文

如何利用JavaScript实现表单的自动提交功能？

本站全新内容似乎不完整或不够清晰，可以直接进行摘要。请提供更多详细信息或明确您希望我归纳的具体内容。

HTML表单提交方式

1. submit按钮式提交

Markup
<form method="post" action="/submit">
    <input type="text" name="username" value="" />
    <input type="password" name="pwd" value="" />
    <input type="submit" value="提交"/>
</form>
优点 缺点
简单直观，用户点击提交按钮即可提交表单。 在提交前不可修改提交的form表单数据。

2. onsubmit方式提交

Markup
<form id='test_form' action='' method='' onsubmit='return checkForm()'>
    <input type='text' name='username' value=''/>
    <input type='password' id='input_pwd' value =''/>
    <input type='hidden' name='pwd' id='md5_pwd' value=''/>
    <button type='submit'>提交</button>
</form>
JavaScript
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;
}
优点 缺点
在请求提交操作时，可对提交的数据进行处理。 需要编写JavaScript函数进行数据验证和处理。

3. formData提交

Markup
<form id="photoForm">
     <input id="photoInput" type="file" title="图片上传" accept=".jpg,.jpeg,image/jpg,image/jpeg" name="myfiles" multiple="multiple">照片导入
</form>
JavaScript
$('#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,
        processData : false,
        contentType : false,
        complete:function(){
           $('.loading').hide();
           $("#photoForm input").val('');
        },
        success:function(d){
            // 成功。。
       }
     });
});
优点 缺点
适用于文件上传等复杂表单提交。 需要使用AJAX技术，代码相对复杂。

4. 动态添加表单提交

Markup
<! 动态追加的form表单 >
<script>
var exportForm = $('<form action="'+ajaxUrl+'" method="post">
    <input type="hidden" name="beginDate" value="'+$(".beginDate").val()+'"/>
    </form>');     
$(document.body).append(exportForm);
exportForm.submit(); // 表单提交
exportForm.remove();
</script>
Markup
<! 静态form表单，js方式提交 >
<form action="'+ajaxUrl+'" method="post">
    <input type="hidden" name="beginDate" value="'+$(".beginDate").val()+'"/>
</form>
JavaScript
// js写法
document.getElementById("form").submit();
// JQuery写法
$("#form").submit();
优点 缺点
可以在运行时动态生成和提交表单。 需要手动控制表单的创建和提交过程，代码较复杂。

相关问题与解答

问题1：如何在表单提交前对数据进行处理？

解答：可以使用onsubmit事件来在表单提交前对数据进行处理，可以对密码进行加密处理，然后再将加密后的密码值赋给一个隐藏的输入框，最后提交该隐藏输入框的值，具体实现如下：

JavaScript
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：如何在不使用提交按钮的情况下提交表单？

解答：可以通过调用表单元素的submit()方法来提交表单，而不需要使用提交按钮。

JavaScript
document.getElementById("form").submit(); // js写法
$("#form").submit(); // JQuery写法
- JavaScript- 实现方法热点连接问题

相关文章