I'm having some trouble with my code. The ajax function isn't sending data and I can't figure out why. It might be related to the javascript function. Can someone please help me troubleshoot?
Interestingly, when I move the submit button outside of the form, it seems to work fine. Any idea why that might be?
<div class="modal fade" id="form-content" tabindex="-1" role="dialog" style="display: none; ">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-12 text-center">
<div class="pop-up">
<div class="box-1">
<h3>Enter your email</h3>
</div>
<img src="img/6.png" class="center-block" alt="..">
<div class="form-search space40">
<form class="contact">
<div class="input-group input-group-lg mtop-10">
<input type="text" name="Email" class="form-control input-lg" placeholder="email">
<span class="input-group-btn">
<button id="submit" class="btn btn-lg-sub model-btn" name="name">Submit</button>
</span>
</div>
</form>
</div>
<div class="space30"></div>
<div>
</div>
<div class="space30"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$(function() {
$("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("Oops! Something went wrong");
}
});
});
});