JQuery在表单提交时显示警告消息
JQuery Display Alert Message on Form Submit
我试图从客户端在jquery上显示警报消息。一旦提交按钮被点击,jquery将被调用。然后表单将调用服务器端php
。下面是我的代码:
<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" name="id" id="id">
<input type="submit" value="submit">
</form>
JQUERY $(document).ready(function(){
var $form = $('#formAdd');
$form.submit(function(){
var id= $("#id").val();
if (id.length < 12) {
alert("INPUT ERROR");
return false;
}
$.post($form.attr('action'), $(this).serialize(), function(response){
alert("DATA SUCCESSFULLY ADDED");
},'json');
return false;
});
});
但是在$.post
方法中没有弹出警告消息我还想知道如何从服务器端弹出警报消息。下面是我的示例代码:
<?php $query = mysqli_query($conn, "SELECT * FROM table1
INNER JOIN table2
ON table1.col1= table2.col1
WHERE table2.col3= '".$_REQUEST['id']."'");
if (mysqli_num_rows($query) != 0) {
echo "<script>alert('ERROR')</script>";
return false;
} ?>
总之,上面的代码可以工作,但是我需要显示消息来告诉我查询是否成功。由于我的新问题是下面的代码把我带到另一个页面:
<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" name="id" id="id">
<input type="submit" value="submit">
</form>
JQUERY $(document).ready(function(){
$('#formAdd').on('submit', function (e) {
e.preventDefault();
var id= $("#id").val();
if (id.length < 12) {
alert("INPUT ERROR");
return false;
}
$.ajax({
context: this,
url: $(this).attr('action'),
type: 'POST',
data: new FormData(this),
dataType: 'json'
}).done(function (data) {
if(data == 'ok') {
alert("DATA SUCCESSFULLY ADDED");
}
if(data == 'no') {
alert("ERROR");
}
}).fail(function (data) {
console.log('failed');
});
});
});
服务器$query = mysqli_query($conn, "SELECT * FROM table1
INNER JOIN table2
ON table1.col1= table2.col1
WHERE table2.col3= '".$_REQUEST['id']."'");
if (mysqli_num_rows($query) != 0) {
mysqli_close($conn);
echo json_encode('no');
return false;
}
我需要在json_encode之后返回,因为在它下面仍然有方法。
HTML表单
<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" name="id" id="id">
<input type="submit" value="submit">
</form>
脚本:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(document).on('submit', "#formAdd", function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: "post",
data: $(this).serialize(),
error:function(){
alert("ERROR : CANNOT CONNECT TO SERVER");
},
success: function(data) {
alert(data);
}
});
return false;
});
});
</script>
PHP服务器端如下:
<?php
$insert = mysqli_query($conn, "insert query here");
if($insert) {
echo json_encode('ok');
} else {
echo json_encode('no');
}
?>
你只需要把id="id"
放在输入类型text中。
<input type="text" name="id">
$(document).ready(function(){
var $form = $('#formAdd');
$form.submit(function(){
var id= $("#id").val();
if (id.length < 12) {
alert("INPUT ERROR");
return false;
}
$.post($form.attr('action'), $(this).serialize(), function(response){
alert("DATA SUCCESSFULLY ADDED");
},'json');
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" id="id" name="id">
<input type="submit" value="submit">
</form>
相关文章:
- Webpack UglifyJS仍在发出警告消息
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 两组复选框的警告消息
- 如何在表空或在jquery数据表中找不到匹配项的情况下添加自定义警告消息
- 是否有JQuery或Javascript警告消息实用程序,可以在不干扰用户的情况下显示和超时
- 添加侦听器以向文本字段创建警告消息
- 无法使用 PHP 显示警告消息
- 带有警告消息的日期选择器
- 如果在指定日期内,则使用日期选择器显示警告消息
- 当用户第一次关闭特定页面时显示警告消息
- 如何制作'您确定要离开此页面吗'浏览器中的警告消息
- Office加载项-句柄'此加载项没有响应'警告消息
- 如何在警告消息中单击“确定”后关闭浏览器中的当前窗口
- 禁止在窗口上显示警告消息.打开
- Javascript不显示警告消息
- 不会弹出警告消息
- 如何在Symfony2中更改警告消息中的Flash消息
- 如何使用Jquery保存数据后显示警告消息
- 不完全回复来自服务器的警告消息用ie8浏览器显示
- 当没有互联网连接时显示警告消息