anna anna - 5 months ago 6
Ajax Question

How to get the values of a tab form in ajax to another php file?

I have written a code in ajax to get the values of a form in a form tab in html to another php file email.php

But it is not showing the message in the alert().

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {

$('#contact_form1').on('sendus', function (e) {

e.preventDefault();

$.ajax({
type: 'post',
url: 'email.php',
data: $('#contact_form1').serialize(),
success: function () {
alert('form was submitted');
}
});

});

});
</script>
</head>
<body>
<div class="tabs-content">

<div tab-id="1" class="tab active">
<form name="contactForm1" id='contact_form1' method="post" action=''>
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName" placeholder="name" >
</div>
<div class="form-group col-sm-12 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail" placeholder="email address">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="telephone" placeholder="phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="Country" id="exampleInputName" placeholder="Country" >
</div>
<div class="form-group col-sm-12 padd">
<textarea class="form-control" name="message" rows="3" id="exampleInputMessage" placeholder="message" ></textarea>
</div>
</div>
<div class="form-group col-xs-12 padd">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div>
<div id='mail_fail' class='error' style="display:none;"> Sorry, error occured this time sending your message.
</div>
</div>


<div class="form-group col-xs-8 padd" id="recaptcha2"></div>

<div class="form-group col-sm-4 padd" id='submit'>
<input type="submit" id='send_message' name="sendus" class="btn btn-lg costom-btn" value="send">
</div>
</form>
</div>
</div>
</body>
</html>


I have written this code but when I am submitting the send button , it is not showing the message form was submitted.

Answer

You were wrongly used the Javascript onclick function.

<script>
$(function () {

$('#send_message').on('click', function (e) {

  e.preventDefault();

  $.ajax({
    type: 'post',
    url: 'email.php',
    data: $('#contact_form1').serialize(),
    success: function () {
      alert('form was submitted');
    }
  });

});

});
</script>

For submit button onclick only give .