單擊后更改HTML按鈕名稱
[英]HTML change button name after click
問題描述
我有一個HTML搜索腳本，我需要更改點擊按鈕文本從“搜索”到“請等待......”
enter <form action="form.php" method="post"> Search: <input type="text" name="term" /><br /> <input type="submit" value="Submit" /> </form>
2 個解決方案
解決方案1
0 2019-05-16 06:28:20
您可以使用jquery來實現此目的
首先，您需要將id添加到表單和提交按鈕
enter <form action="form.php" id="form" method="post">
Search: <input type="text" name="term" /><br />
<input type="submit" id="submit" value="Submit" />
</form>
然后在jQuery代碼中
$(document).ready(function(){
$("#form").submit(function(){
$("#submit").val("Please Wait...");
});
});
另外，不要忘記在head標記中包含jQuery庫
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
解決方案2
0 2019-05-16 06:55:39
為此，您應該使用Javascript，簡單的方法是使用Jquery事件
包括Jquery庫
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
將類添加到表單或“提交” 按鈕以輕松選擇和訪問元素
<form action="form.php" method="post">
Search:
<input type="text" name="term" /><br />
<input type="submit" class="submit-btn" value="Submit" />
</form>
然后使用Jquery click（）事件
<script>
$(function() {
$(".submit-btn").click(function() {
$(this).val('Please Wait...');
});
});
</script>
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My app</title>
</head>
<body>
<form action="form.php" method="post">
Search:
<input type="text" name="term" /><br />
<input type="submit" class="submit-btn" value="Submit" />
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
$(".submit-btn").click(function() {
$(this).val('Please Wait...');
});
});
</script>
</body>
</html>
它的工作原理但請注意，您應該使用AJAX來防止頁面重新加載並完美地查看更改
單擊並保存時更改按鈕名稱
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.