[英]Showing AJAX Confrimation into a modal
我有一个表单,它基本上将表单数据插入到数据库中。 我正在通过 AJAX 请求执行此操作。 现在,因此,当插入数据时,“rentinsert.php”的成功信息显示在显示“您的订单已放置”的表单页面中。 我想要做的是将其显示为模态。 那么如何在模态中在 AJAX 上显示成功消息。 下面是我的代码 -
html -
<form method="post" id="rentalform" action="rentinsertdb.php">
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Full Name</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" placeholder="Enter full name" name="rentname">
</div>
</div>
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Choose your ride</label>
<div class="col-sm-8 tabular-border">
<div class="dropdown">
<select class="btn btn-default dropdown-toggle" name="rentcar" >
<option>Choose your ride</option>
<option value="Toyota Alion 2008">Toyota Alion 2008</option>
<option value="Toyota Alion 2008">Toyota Premio 2008</option>
<option value="Toyota Alion 2008">Toyota Corolla 2006</option>
<option value="Toyota Alion 2008">Toyota Noah 2010</option>
</select>
</div>
</div>
</div>
<!-- <div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" id="focusedinput" placeholder="Enter phone number">
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div> -->
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" name="rentphone" placeholder="Enter phone number">
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div>
<div class="form-group space">
<label for="txtarea1" class="col-sm-2 control-label">Pick up address</label>
<div class="col-sm-8 tabular-border"><textarea name="rentaddress" cols="50" rows="4" class="form-control" placeholder="Enter Full Address; For example: House#38, Road 7/a, Dhanmondi, Dhaka-1205, Bangladesh"></textarea></div>
</div>
<div class="col-sm-8 col-sm-offset-2 space">
<button class="btn-primary btn" style="background-color:#03a9f4; border-color:#03a9f4;" id="submitrent"> Confirm </button>
</div>
</form>
</div>
<span id="result"></span>
<script type="text/javascript">
$("#submitrent").click( function() {
$.post( $("#rentalform").attr("action"),
$("#rentalform :input").serializeArray(),
function(info){ $("#result").html(info);
});
// clearInput();
});
$("#rentalform").submit( function() {
return false;
});
// function clearInput() {
// $("#myForm :input").each( function() {
// $(this).val('');
// });
// }
</script>
租用插入.php -
<?php
header("Access-Control-Allow-Origin: *");
include_once "rentconnection.php";
// echo "<pre>";
// print_r($_POST);
$sql = "INSERT INTO `rental`
(`name`,`car`,`phone`,`address`)
VALUES ('".$_POST['rentname']."','".$_POST['rentphone']."','".$_POST['rentcar']."','".$_POST['rentaddress']."');";
if(mysqli_query($con, $sql)){
?>
<body style= "background-color:#1D726A">
<h1>Your Order Has Been Placed! </h1>
</body>
<?php
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);
?>
成功将数据插入数据库后,您需要echo
您的消息
if (mysqli_query($con, $sql)) {
echo "<body style= 'background-color:#1D726A'><h1>Your Order Has Been Placed! </h1></body>";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);
if (mysqli_query($con, $sql)) {
echo json_encode(array('message' => 'Your Order Has Been Placed!'));
exit();
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);
添加模态
<div class="modal fade" id="modal-content">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p id="msg">Message here!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
在视图中显示消息
("#submitrent").click( function() {
$.post( $("#rentalform").attr("action"),
$("#rentalform :input").serializeArray(),
function(info){
var obj = jQuery.parseJSON(info);
$("#msg").html(obj.message);
$("#modal-content").modal('show');
});
// clearInput();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.