Javascript Jquery单击提交按钮后显示警报_Javascript_Php_Jquery_Html

Javascript Jquery单击提交按钮后显示警报

javascript php jquery html

Javascript Jquery单击提交按钮后显示警报,javascript,php,jquery,html,Javascript,Php,Jquery,Html,假设我有一个如下的表格： <form name="add" method="post" action="add.php?action=add" enctype="multipart/form-data"> ... <input type="submit" name="add" id="add" value="ADD"> </form> ... 我的问题是，在使用jQuery单击ADD按钮后，如何显示“表单提交”以下是我尝试过的（我使用的是Jquery 1

假设我有一个如下的表格：

<form name="add" method="post" action="add.php?action=add" enctype="multipart/form-data">
...
<input type="submit" name="add" id="add" value="ADD">
</form>

...

我的问题是，在使用jQuery单击ADD按钮后，如何显示“表单提交”
以下是我尝试过的（我使用的是Jquery 1.11.1）：


$（文档）.ready（函数（）{
$（“#添加”）.submit（函数（）{
警报（“提交的表格”）；
});
});

我写对了吗？或者用其他方式写

<form name="add" method="post" action="add.php?action=add" enctype="multipart/form-data">
...
<input type="submit" name="add" id="add" value="ADD">
</form>

改变

$(document).ready(function(){
    $("#add").submit(function(){
        alert("Form submitted");
    });
});

到

描述：如果调用此方法，则不会触发事件的默认操作

为按钮指定一个单击处理程序

  $(document).ready(function(){
        $("#add").click(function(){
            alert("Form submitted");
        });
    });

试试这个

<script>
$(document).ready(function(){
    $('#add').on('submit', function(e){
        e.preventDefault();
        alert("Form submitted");
    });
});
</script>


$（文档）.ready（函数（）{
$（'#add'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
警报（“提交的表格”）；
});
});

#添加

id应附加在

表单

上，而不是

提交按钮

。见下文：

从输入中删除id：

<input type="submit" name="add" value="ADD">

你也可以这样做

<script>
$(document).ready(function(){
   $("#add").on('click', function(e){
       e.preventDefault();
       var form = $(".add");
       form.submit();
       alert("Form submitted");
    });
});
</script>


$（文档）.ready（函数（）{
$（“#添加”）。在（'click'，函数（e）{
e、 预防默认值（）；
变量形式=$（“.add”）；
表单提交（）；
警报（“提交的表格”）；
});
});

当变量中有表单时，我们也可以执行其他查询，例如我们可以使用

if

条件，或者我们可以序列化表单

var form=$（“.add”）.serialize（）
一种方法是在表单中添加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>


函数showMessage（）{
警报（“提交的表格”）；
返回true；
}
让我们为表单添加一个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>


...
$（文档）.ready（函数（）{
$（“#frm_add”）.submit（函数（）{
警报（“提交的表格”）；
});
});
尝试以下代码：
Js:
jsiddle链接：
如果要使用ajax提交表单，然后显示“表单已成功提交”的警报消息
然后你可以使用这个代码
//这是表单的id
$（“#添加”）。提交（功能（e）{
}))
您也可以使用JSON，这取决于您的需求提交表单时会发生onsubmit
事件
onSubmit
是一个脚本事件，当用户尝试向CGI提交表单时发生。onSubmit可用于对表单数据执行一些错误检查，并在发现错误时取消提交
请注意，要取消提交事件，onSubmit的格式应为onSubmit=“return expression”
<代码>返回

指示表达式的值应返回到提交例程。如果表达式的计算结果为false，则取消提交例程；如果为true，则提交例程继续

<form onsubmit="myFunction()">
  Enter name: <input type="text">
  <input type="submit">
</form>
<script>
function myFunction() {
    alert("The form was submitted");
}
</script>


输入名称：
函数myFunction（）{
警告（“表格已提交”）；
}

为什么表单名称和提交按钮使用相同的名称？首先改变一下。。。。然后在jQuery代码中将

submit

更改为

click

。是将submit更改为click。。您需要使用不同于输入名称的函数和表单名称不必相同，jquery版本对此没有问题。@KKLMichael很乐意提供帮助

$(document).ready(function(){
  $('#add').on('submit', function(e){
    e.preventDefault();
    alert("Form submitted");
    // or return false;
  });
});

<script>
$(document).ready(function(){
   $("#add").on('click', function(e){
       e.preventDefault();
       var form = $(".add");
       form.submit();
       alert("Form submitted");
    });
});
</script>

<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>

<!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>

$(document).ready(function(){
    $("form").on('submit',function(e){
        alert("Form submitted");
        return false;

    });
});

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.

<form onsubmit="myFunction()">
  Enter name: <input type="text">
  <input type="submit">
</form>
<script>
function myFunction() {
    alert("The form was submitted");
}
</script>