If I click submit (modal form button) apparently XMLHttpRequest is doubled, tripled, quadrupled and so on. If I click to close the modal and click contact us again, something bizarre happens. I really need your help.
What I want: When I click submit, the ajax things are done, the modal closes and I can click on contact us again without giving those damn problems
Html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p></div>
<!-- model content -->
<div id="form-content" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Contact us</h3>
</div>
<div>
<form class="contact">
<fieldset>
<div class="modal-body">
<ul class="nav nav-list">
<li class="nav-header">Name</li>
<li><input class="input-xlarge" value=" krizna" type="text" name="name"></li>
<li class="nav-header">Email</li>
<li><input class="input-xlarge" value=" user@krizna.com" type="text" name="Email"></li>
<li class="nav-header">Message</li>
<li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo
</textarea></li>
</ul>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit">submit</button>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<script>
$(function() {
//twitter bootstrap script
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("#form-content").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
</script>
PHP file:
<?php
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['Email']);
$sug = strip_tags($_POST['sug']);
echo "Name =".$name."</br>";
echo "Email =".$email."</br>";
echo "Message =".$sug."</br>";
echo "<span class='label label-info' >your message has been submitted .. Thanks you</span>";
header("Location: test.php");
}
I am not completely sure what the actual problem was but here is a solution for sending and receiving data via AJAX based on your edited original post.
As you can see, I made some changes. Instead of echoing them as a plain text I encoded them into JSON format which is very handy when it comes to exchanging data between data and server. I also didn't want to return the html along with the message, so I moved it into the HTMLpart.
Hopefully, this was somehow helpful to you.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="thanks">
<span class='label label-info feedback'></span>
<p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p>
</div>
<!-- model content -->
<div id="form-content" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Contact us</h3>
</div>
<div>
<form class="contact">
<fieldset>
<div class="modal-body">
<ul class="nav nav-list">
<li class="nav-header">Name</li>
<li><input class="input-xlarge" value=" krizna" type="text" name="name"></li>
<li class="nav-header">Email</li>
<li><input class="input-xlarge" value=" user@krizna.com" type="text" name="Email"></li>
<li class="nav-header">Message</li>
<li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo
</textarea></li>
</ul>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit">submit</button>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</body>
</html>
JS
<?php
if(isset($_POST['name'])) {
$data = [];
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['Email']);
$sug = strip_tags($_POST['sug']);
$data['name'] = $name;
$data['email'] = $email;
$data['sug'] = $sug;
$data['message'] = "Your message has been submitted. Thank you!";
echo json_encode($data);
}