单击后更改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
You can use jquery for this purpose 
您可以使用jquery来实现此目的
First, you need to add the id to form and the submit button 首先，您需要将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>
Then in jQuery code 然后在jQuery代码中
$(document).ready(function(){
$("#form").submit(function(){
$("#submit").val("Please Wait...");
});
});
Plus, don't forget to include jQuery library in the head tag 另外，不要忘记在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
For this, you should use Javascript and the simple way is to use Jquery event's 为此，您应该使用Javascript，简单的方法是使用Jquery事件
Include the Jquery library 包括Jquery库
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Add class to your form or Submit Button to select and access the element easily 将类添加到表单或“提交” 按钮以轻松选择和访问元素
<form action="form.php" method="post">
Search:
<input type="text" name="term" /><br />
<input type="submit" class="submit-btn" value="Submit" />
</form>
Then use Jquery click() event 然后使用Jquery click（）事件
<script>
$(function() {
$(".submit-btn").click(function() {
$(this).val('Please Wait...');
});
});
</script>
The full code: 完整代码：
<!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>
It works but note that you should use AJAX to be prevent page reload and see the change prefectly 它的工作原理但请注意，您应该使用AJAX来防止页面重新加载并完美地查看更改
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.