Отправить форму, используя Ajax и Stack Overflow
Я новый энтузиаст кодер, специализирующийся на переднем конце. Может кто-нибудь, пожалуйста, помогите с кодом конца.
Я хочу использовать Ajax для получения сообщения об успехе в модальном режиме, где после отправки формы находятся кнопки отправки и закрытия?
Кроме того, любая помощь с безопасностью формы будет принята с благодарностью 🙂
Спасибо!
Вот мой код:
HTML:
<!--Modal Contact Form-->
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" action="process.php" method="post" name="contact_form">
<div class="modal-header">
<h3>Contact</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input name="contact" type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input name="email" type="email" class="form-control" id="contact-email" placeholder="you@example.com">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea name="message" class="form-control" rows="8"></textarea>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss = "modal">Close</a>
<button style="background-color: grey;" class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--End Contact Modal-->
PHP:
<?php
$contact = $_POST['contact'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = 'myemail@gmail.com';
$subject = 'New Message';
mail ($to, $subject, $message, "From: " . $email);
echo "your message has been submitted .. Thanks you";
?>
Решение
Положите метод успеха в ответ.
$array = array( "success" => true, "message" => "your message has been submitted .. Thanks you" );
echo json_decode($array);
Из ответа на запрос AJAX вы можете проверить, что id success true, а затем закрыть ваш модальный режим.
$.ajax({
url: "script.php",
type: "POST",
data: { id : menuId },
dataType: "json",
success: function(response) {
if( response.success) {
// DO YOUR STUFF
}
}
});
Другие решения
Попробуй это,
index.html
<html>
<head>
<script type="text/javascript">
function getHttpRequest()
{
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function executeAction()
{
var contact=document.forms["contact_form"]["contact-name"].value;
var email=document.forms["contact_form"]["contact-email"].value;
var message=document.forms["contact_form"]["message"].value;
var xmlhttp;
if (email=="")
{
document.getElementById('alert').innerHTML = "Please type the email id!";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('alert').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "sendMail.php?contact="+contact+"&email="+email+"&message="+message, true);
xmlhttp.send();
}
</script>
</head>
<body>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" action="#" method="POST" name="contact_form">
<div class="modal-header">
<h3>Contact</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input name="contact" type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input name="email" type="email" class="form-control" id="contact-email" placeholder="you@example.com">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea name="message" class="form-control" rows="8"></textarea>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss = "modal">Close</a>
<button style="background-color: grey;" class="btn btn-primary" type="button" onClick="executeAction()">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="alert"></div>
</body>
</html>
sendMail.php
<?php
$contact=$_GET["contact"];
$email = $_GET['email'];
$message = $_GET['message'];
$to = 'myemail@gmail.com';
$subject = 'New Message';
mail ($to, $subject, $message, "From: " . $email);
echo "your message has been submitted .. Thanks you";
?>
Мне пока не нравится ни один ответ. Вот что вы должны сделать (надеюсь, это работает, потому что я на самом деле не тестирую код):
1) Добавить идентификатор в тег формы. Давайте сопоставим имя, поэтому просто добавим атрибут в …
id="contact_form"2) Добавьте jQuery и Javascript внизу вашей HTML-страницы. Этот код должен идти прямо над закрывающим тегом тела.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("#contact_form").submit(function(e) {
e.preventDefault(); // to stop the form from being submitted normally
var $this = $(this); // cache the form
$this.post($this.attr("action"),$this.serialize(),function(data) {
alert(data);
$("#contact").fadeOut();
});
});
</script>
И это должно сделать это. Очень простой. Безопасность должна быть сделана в коде PHP.
detector