Javascript 单击提交按钮后,jQuery 显示警报
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33819127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery show alert after click submit button
提问by KKL Michael
Let's say I have a form like following:
假设我有一个如下所示的表格:
<form name="add" method="post" action="add.php?action=add" enctype="multipart/form-data">
...
<input type="submit" name="add" id="add" value="ADD">
</form>
My question is how do I show the "Form submitted" after I click ADD button using jQuery?
Here is what I have tried (I'm using Jquery 1.11.1):
我的问题是如何在使用 jQuery 单击添加按钮后显示“已提交的表单”?
这是我尝试过的(我使用的是 Jquery 1.11.1):
<script>
$(document).ready(function(){
$("#add").submit(function(){
alert("Form submitted");
});
});
</script>
Am I write correct? Or any other ways to write it?
我写的对吗?或者有什么其他的写法?
回答by guradio
<form name="add" method="post" action="add.php?action=add" enctype="multipart/form-data">
...
<input type="submit" name="add" id="add" value="ADD">
</form>
your input type is submit it will automatically submit the form you can change this type to button
您的输入类型是提交它会自动提交您可以将此类型更改为的表单 button
<input type="button" name="add" id="add" value="ADD">
and change
和改变
$(document).ready(function(){
$("#add").submit(function(){
alert("Form submitted");
});
});
to
到
$(document).ready(function() {
$("#add").submit(function(e) {
e.preventDefault();
alert("Form submitted");
});
});
Description: If this method is called, the default action of the event will not be triggered.
说明:如果调用该方法,则不会触发事件的默认动作。
回答by Jhon Carpenter
Try this code:
试试这个代码:
Js:
JS:
$(document).ready(function(){
$("form").on('submit',function(e){
alert("Form submitted");
return false;
});
});
JSFiddle Link: https://jsfiddle.net/Dee0565/dn28Lze1/1/
JSFiddle 链接:https://jsfiddle.net/Dee0565/dn28Lze1/1/
回答by Rizwan
If you want to submit the form using ajax and then you want to show the alert message that "form is submitted successfully"
如果您想使用ajax提交表单,然后您想显示“表单提交成功”的警报消息
then you can use this code
那么你可以使用这个代码
// this is the id of the form
// 这是表单的id
$("#add").submit(function(e) {
$("#add").submit(function(e) {
var url = "add.php"; // Your PHP page.
$.ajax({
type: "POST",
url: url,
data: $("#add").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
});
you can also use JSON it depends on your requirement
您也可以使用 JSON,这取决于您的要求
回答by AkshayP
Theonsubmit
event occurs when a form is submitted.
该onsubmit
事件在提交表单时发生。
onSubmit
is a scripting event that occurs when the user attempts to submit the form to the CGI. onSubmit can be used to do some error checking on the form data, and to cancel the submit if an error is found.
onSubmit
是当用户尝试将表单提交给 CGI 时发生的脚本事件。onSubmit 可用于对表单数据进行一些错误检查,并在发现错误时取消提交。
Note that in order to cancel the submit event, the onSubmit should be in the form onSubmit="return expression"
. return
indicates that the value of the expression should be returned to the submit routine. If the expression evaluates to false, the submit routine is cancelled; if it is true, the submit routine goes forward.
请注意,为了取消提交事件, onSubmit 应采用 形式onSubmit="return expression"
。return
表示应将表达式的值返回给提交例程。如果表达式的计算结果为假,则提交例程被取消;如果为真,则提交例程继续进行。
<form onsubmit="myFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
回答by Ramanlfc
assign a click handler to the button
为按钮分配一个点击处理程序
$(document).ready(function(){
$("#add").click(function(){
alert("Form submitted");
});
});
回答by PHP Team
Try this
尝试这个
<script>
$(document).ready(function(){
$('#add').on('submit', function(e){
e.preventDefault();
alert("Form submitted");
});
});
</script>
回答by Norlihazmey Ghazali
#add
id should attach on form
, not the submit button
. See below :
#add
id 应该附加在 上form
,而不是submit button
. 见下文 :
Remove id from input :
从输入中删除 id :
<input type="submit" name="add" value="ADD">
And add to form :
并添加到表单:
<form name="add" id="add" method="post" action="add.php?action=add" enctype="multipart/form-data">
And of course with the current script you had, after click ok button it will redirect into form action, just in case you wanna stay on that page without reloading, you must prevent the behavior of form from being like a normal form does by returning false
or use jquery .preventDefault()
like so:
当然,对于您拥有的当前脚本,单击“确定”按钮后,它将重定向到表单操作,以防万一您想留在该页面而不重新加载,您必须防止表单的行为像正常表单那样通过returning false
或使用jquery.preventDefault()
像这样:
$(document).ready(function(){
$('#add').on('submit', function(e){
e.preventDefault();
alert("Form submitted");
// or return false;
});
});
回答by Shameem Ahmed
You can also do like this.
你也可以这样做。
<script>
$(document).ready(function(){
$("#add").on('click', function(e){
e.preventDefault();
var form = $(".add");
form.submit();
alert("Form submitted");
});
});
</script>
When you have the form in a variable we can perform other queries as well, such as we can use if
condition or we can serialize the form var form = $(".add").serialize();
当您在变量中有表单时,我们也可以执行其他查询,例如我们可以使用if
条件或我们可以序列化表单var form = $(".add").serialize();
回答by Ltaylor
One way to do this is add an onclick method to your form to initiate the javascript containing the alert.
一种方法是在表单中添加一个 onclick 方法以启动包含警报的 javascript。
<script type = "text/javascript">
function showMessage() {
alert ("Form submitted");
return true;
}
</script>
<form name="add" method="post" action="add.php?action=add"
enctype="multipart/form-data" onclick = "return showMessage()" />
<input type="submit" name="add" id="add" value="ADD"> </form>
回答by Miko
Let's just add an id attribute for your form and use the id for the submit event, try this:
让我们为您的表单添加一个 id 属性并使用该 id 进行提交事件,试试这个:
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form id="frm_add" name="add" method="post" action="add.php?action=add" enctype="multipart/form-data">
...
<input type="submit" name="add" id="add" value="ADD">
</form>
<script>
$(document).ready(function(){
$("#frm_add").submit(function(){
alert("Form submitted");
});
});
</script>
</body>
</html>