如果你想在表單提交后,直接跳轉到另一個網頁,那么JQuery是一個非常好的選擇。JQuery是一個JavaScript庫,它可以幫助我們輕松地實現這個功能。在本文中,我們將學習如何使用JQuery來處理表單并進行跳轉。
第一步是引入JQuery庫。在你的HTML文件中添加以下代碼:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
接著,我們需要添加一個表單,用來接收用戶的輸入。在這個例子中,我們使用下列代碼來創建一個表單:
<form id="myForm" action="example.html"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br> <input type="submit" value="Submit"> </form>
注意,這里的form標簽中有一個action屬性,它指定了表單在提交時將要跳轉的網址。這里我們設置為“example.html”,你可以根據需要進行修改。
接著,我們需要使用JQuery來處理表單的提交。我們可以使用下列代碼來監聽表單提交事件:
$( "#myForm" ).submit(function( event ) { // 阻止默認的表單提交行為 event.preventDefault(); // 跳轉到指定網址 window.location.href = "example.html"; });
在這個代碼中,我們首先使用JQuery選擇器來獲取表單元素,然后監聽submit事件。當用戶點擊提交按鈕時,該事件將被觸發。我們使用event.preventDefault()來阻止默認的表單提交行為。接著,我們使用window.location.href來跳轉到指定的網址。在這里,我們使用了和表單action屬性相同的值,因為我們要跳轉到該屬性指定的網址。
現在,你已經學會了使用JQuery來處理表單并進行跳轉。如果你希望進行更多的自定義操作,例如在跳轉之前進行其他處理,或者在跳轉之后需要傳遞參數等,你可以在上述代碼中添加更多的JQuery代碼來實現這些功能。
上一篇jquery表格當前的行
下一篇div img位置