Thread: Modal not showing after AJAX call

I have a form that emails the web admin using a PHP file but I'm trying to use an AJAX call to keep the same page up and display a modal but the page just refreshes itself and no email is sent.
Here is the form:

Code:

<form accept-charset="UTF-8" id="mcaForm" action="" method="post">
              <p style="text-align: center;"><input class="span3" name="name" id="name" placeholder="Name" type="text" required>
              <p style="text-align: center;"><input class="span3" name="title" id="title" placeholder="Title" type="text" required>
              <p style="text-align: center;"><input class="span3" name="company" id="company" placeholder="Company" type="text" required>
              <p style="text-align: center;"><input class="span3" name="address" id="address" placeholder="Address" type="text" required>
              <p style="text-align: center;"><input class="span3" name="email" id="email" placeholder="Email" type="text" required>
							<p style="text-align: center;"><input type="checkbox" name="agree" required value="accept">By checking this box you agree to the Mutual Confidentiality Agreement>
             <div><button class="btn btn-inverse btn-large" type="submit">Submit</button></div>
						</form>
		<div id="mcamodal" class="modal fade" role="dialog">
  		<div class="modal-dialog">
    		<div class="modal-content">
      	  <div class="modal-header">
            <h4 class="modal-title">Modal Header</h4>
          </div>
           <div class="modal-body">
				    <img src=assets/img/modallogo.png>
            <p>Some text in the modal.</p>
          </div>
      	    <div class="modal-footer">
            </div>
        </div>
      </div>
    </div>

And here is my AJAX:

Code:

<script type="text/javascript">

$( "#mcaForm" ).submit(function( event ) {
 event.preventDefault();

 $.ajax({
   url: 'acknowledge.php',
   type: 'POST',
   data:  $('#mcaForm').serialize(),
   success: function(response) {
   if(response == 'Success') {
       $('#mcamodal').html("Success");
       $('#mcamodal').modal('show');
   },
});
});
</script>

bad copy/paste job but i cant edit so i apologize for the structure

Thank you for the response! Im not sure what you mean by returning 'Success' would you mind elaborating further?

Right so I have success being echoed in the php

Code:

<?php
if (isset($_POST['formmSubmit'])) {
     echo "success";
     $to = '@gmail.com';
     $subject = 'MCA Submitted';
     $message = 'Name: ' . $_POST['name'] . "\r\n\r\n";
     $message .= 'Email: ' . $_POST['email'] . "\r\n\r\n";
     $message .= 'Title: ' . $_POST['title'] . "\r\n\r\n";
     $message .= 'Address: ' . $_POST['address'] . "\r\n\r\n";
     $message .= 'Company: ' . $_POST['company'];
     $headers = "From: @gmail.com\r\n";
     $headers .= 'Content-Type: text/plain; charset=utf-8';
     $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
        if ($email) {
     $headers .= "\r\nReply-To: $email";
     }
     $success = mail($to, $subject, $message, $headers);
     $response = array();
     $response['success'] = $success;
     $response['general_message'] = $message;
     $response['errors']  = $errors;

Wait im not sure i get what you mean so i shouldnt have if(response == 'Success')?

I'm not at liberty to change the design they wanted placeholders in the field not labels above them. I obviously haven't been doing this as long or as frequently as you so why instead of getting all worked up you could just as easily educate me tactfully.

I actually got rid of

Code:

if(response == 'Success')

and that made it so the modal popped up after i click submit but theres still no email functionality.
Here is my updated code:

Code:

<form accept-charset="UTF-8" id="mcaForm" action="" method="post">
              <p style="text-align: center;"><input class="span3" name="name" id="name" placeholder="Name" type="text" required>
              <p style="text-align: center;"><input class="span3" name="title" id="title" placeholder="Title" type="text" required>
              <p style="text-align: center;"><input class="span3" name="company" id="company" placeholder="Company" type="text" required>
              <p style="text-align: center;"><input class="span3" name="address" id="address" placeholder="Address" type="text" required>
              <p style="text-align: center;"><input class="span3" name="email" id="email" placeholder="Email" type="text" required>
							<p style="text-align: center;"><input type="checkbox" name="agree" required value="accept">By checking this box you agree to the Mutual Confidentiality Agreement>
             <div><button class="btn btn-inverse btn-large" id="send" name="send" type="submit">Submit</button></div>
						</form>
		<div id="mcamodal" class="modal fade" role="dialog">
  		<div class="modal-dialog">
    		<div class="modal-content">
           <div class="modal-body">
				    <img src=assets/img/modallogo.png>
            <p>Some text in the modal.</p>
          </div>
        </div>
      </div>
    </div>

<script type="text/javascript">

$( "#mcaForm" ).submit(function( event ) {
 event.preventDefault();

 $.ajax({
   url: 'acknowledge.php',
   type: 'POST',
   data:  $('#mcaForm').serialize(),
	 success: function(response) {
       $('#mcamodal').modal('show');
   }
});
});
</script>

and here is the new php:

Code:

<?php
if (isset($_POST['send'])) {
   
   $to = '@gmail.com';
   $subject = 'MCA Submitted';
   $message = 'Name: ' . $_POST['name'] . "\r\n\r\n";
   $message .= 'Email: ' . $_POST['email'] . "\r\n\r\n";
   $message .= 'Title: ' . $_POST['title'] . "\r\n\r\n";
   $message .= 'Address: ' . $_POST['address'] . "\r\n\r\n";
   $message .= 'Company: ' . $_POST['company'];
   $headers = "From: @gmail.com\r\n";
   $headers .= 'Content-Type: text/plain; charset=utf-8';
   $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
   if ($email) {
   $headers .= "\r\nReply-To: $email";
}
   $success = mail($to, $subject, $message, $headers);
}
?>

<body>
  <?php if (isset($success) && $success) { ?>
  Your message has been sent.
  <?php } else { ?>
  <h1>Oops!</h1>
  Sorry, there was a problem sending your message.
  <?php } ?>
</body>

If i change the form action to acknowledge.php the email works just fine but I'm thinking my php file is missing something...