[英]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>
您可以使用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>
为此,您应该使用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.