首页 > 解决方案 > 为 HTML 表单提交实现每 15 秒自动保存功能

问题描述

我有一个 HTML 表单,它有 20 多个字段,需要每 15 秒保存一次。目前我已经给出了一个提交按钮来保存最后的数据。有没有办法每 15 秒自动执行此操作(表单提交)并向用户显示一条消息,提及“自动保存数据”?

当前表格(简化为几个字段)

//function to send the form data
$("#mainFrm").submit(function (e) {

	e.preventDefault(); // avoid to execute the actual submit of the form.

	var form = $(this);
	var url = form.attr('action');

	$.ajax({
		type: "POST",
		url: url,
		data: form.serialize(), // serializes the form's elements.
		success: function (data) {
			alert(data); // show response from the php script.
		}
	});


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="mainFrm" type="POST" action="myFile.php">

    <input id="cusname" type="text" name="cusname" placeholder="Customer Name"  required />
    <br/>
    
    <input id="address" type="text" name="address" placeholder="Customer Address"  required />
    <br/>
    
    <input id="Branch Name" type="text" name="brName" placeholder="Branch Address"  required />
    <br/>
    
    <label for="name">Who Presently Occupies*</label>
    <select id="occupies" name="occupies" required>
        <option value="Owner">Owner</option>
        <option value="Tenent">Tenent</option>
        <option value="Owner & Tenent">Owner & Tenent</option>
    </select>
    <br/>
    
    <label for="name">Description of Area * </label>
    <select id="desarea" name="desarea" required>
        <option value="Urban">Urban</option>
        <option value="Rural">Rural</option>
        <option value="Residential">Residential</option>
        <option value="Residential">Industrial</option>
        <option value="Residential">Agricultural</option>
        
    </select>
    
    <button type="submit" href="/">Save</button>
    
</form>

标签: javascriptjqueryhtml

解决方案


推荐阅读