快捷導(dǎo)航

JavaScript網(wǎng)頁表單form中禁止自動提交的兩種方式

更新時間：2024年06月05日 08:59:12 作者：小明愛吃火鍋

本文是我本人在開發(fā)網(wǎng)頁時,在表單中加入了button按鈕,本來是用于jQuery點擊相應(yīng)事件的按鈕,然后,但我點擊button時,發(fā)現(xiàn)不是達(dá)到j(luò)Query指定效果,所以在本文中,我們將討論網(wǎng)頁表單（form）中提交的兩種方式,需要的朋友可以參考下

前言

本文是我本人在開發(fā)網(wǎng)頁時，在表單中加入了button按鈕，本來是用于jQuery點擊相應(yīng)事件的按鈕，然后，但我點擊button時，發(fā)現(xiàn)不是達(dá)到j(luò)Query指定效果，原本以為class標(biāo)簽或者其他代碼寫錯，找了很久，之后查找資料，知道表單form提交除了submit提交還有button也會提交，所以總結(jié)如何處理不然button 提交表單，在本文中，我們將討論網(wǎng)頁表單（form）中提交的兩種方式。

解決方案

return false

一種是在jQuery代碼最后加一句：return false，禁止表單提交；

在jQuery事件處理函數(shù)中，返回false可以阻止表單的默認(rèn)提交行為。這意味著當(dāng)用戶點擊按鈕時，表單不會執(zhí)行提交操作。這種方法適用于需要在點擊按鈕后執(zhí)行其他操作（如AJAX請求）的情況。

type為button

另一種是定義button標(biāo)簽方式為：新增一個附件即指定type為button

在HTML中，<button>元素有兩種類型：submit和button。默認(rèn)情況下，<button>元素的類型為submit，這意味著當(dāng)用戶點擊按鈕時，表單將執(zhí)行提交操作。通過將<button>元素的type屬性設(shè)置為button，我們可以阻止按鈕的默認(rèn)提交行為。這種方法適用于不需要執(zhí)行表單提交，只需要執(zhí)行其他操作（如JavaScript事件處理）的情況。

以下是一個表單上傳文件并且可以在頁面添加多個file的前臺頁面代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>
</head><script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-1.7.2.js"></script><script type="text/javascript">
    $(function(){
        //全局變量
        var i=2;
        //通過表格來進(jìn)行操作
            $("#addFile").click(function(){
                alert("www");
                $(this).parent().parent().before("<tr class='file'><td>File"
                        + i +":</td><td><input type='file' name='file"
                        + i +"'/></td></tr><tr class='desc'><td>Desc"
                        + i +":</td><td><input type='text' name='desc"
                        + i +"'/><button type='button' id='delete"
                        + i +"'>刪除</button></td></tr>");
                i++;    

            //獲取新添加的刪除按鈕
            $("#delete"+(i-1)).click(function(){
                //獲取要刪除的行即desc
                var $tr=$(this).parent().parent();
                //file行也要刪除刪除
                $tr.prev("tr").remove();
                $tr.remove();

                //對i重新排序
                $(".file").each(function(index){
                    var n=index+1;
                    $(this).find("td:first").text("File"+n);
                    $(this).find("td: last input").attr("name","file"+n);
                });
                $(".desc").each(function(index){
                    var n=index+1;
                    $(this).find("td:first").text("Desc"+n);
                    $(this).find("td: last input").attr("name","desc"+n);

                });
            });
            //return false,禁止提交表單
            return false;
            });
    });
</script>

<body>
    <font color="red">${msg }</font>
    <br><br>

    <form action="UploadServlet" method="post" enctype="multipart/form-data">
       <input type="hidden" id="fileNum" name="fileNum" value="1"/>

        <!-- 通過表格包裝成一個整體 -->
       <table>
            <tr class="file">
                <td>File1:</td>
                <td><input type="file" name="file1"/></td>
            </tr>
            <tr class="desc">
                <td>Desc1:</td>
                <td><input type="text" name="desc1"/></td>
            </tr>
            <tr>
                <td><input type="submit" id="submit" value="提交"/></td>
                <!-- 必須指定類型是type="button"否則，點擊后會提交表單 -->
                <td><button type="button"  id="addFile">新增一個附件</button></td>
            </tr>
        </table>
    </form>

</body>
</html>

總結(jié)

當(dāng)需要在點擊按鈕后執(zhí)行其他操作（如AJAX請求）時，可以在jQuery事件處理函數(shù)中返回false以禁止表單提交。
當(dāng)不需要執(zhí)行表單提交，只需要執(zhí)行其他操作（如JavaScript事件處理）時，可以將<button>元素的type屬性設(shè)置為button以阻止按鈕的默認(rèn)提交行為。

到此這篇關(guān)于JavaScript網(wǎng)頁表單form中禁止自動提交的兩種方式的文章就介紹到這了,更多相關(guān)JavaScript form禁止自動提交內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: