Bootstrap 3 Modal

Any way you could share a small sample that reproduces what you're seeing?

So it looks like the issue is that your form is using normal requests, rather than XHR, so the page is refreshing. Have you ever worked with XHR/Ajax?

OK, so this isn't super trivial. I'm going to outline what you'll need to do in basic steps, and from there I can help you work through each part if needed. So, here goes:

1. Replace the normal form submission with a callback using the jQuery .submit() method.
2. Inside of the callback, prepare your data - serialize() is great for that - and submit it using jQuery.post.
3. Reply from your PHP script with a success message or error depending on what happens.
4. Process the results within the callbacks for your jQuery.post call.

Here's a tiny sample of how the fronted would work just to get you going. I haven't tested it, but it should get you pointed in the right direction:

<form id="contact-form" action="contact.php" method="post">
  <input name="name" type="text" placeholder="Name" />
  <input name="email" type="email" placeholder="Email" />
  <textarea name="message" placeholder="Your Message" />
</form>

<script>
$(function() {
  $("#form").submit(function(e) {
    // keep the form from submitting
    e.preventDefault();

    // serialize the form to a set of variables
    var form = $("#form");
    var params = form.serialize();

    // send the data to your server via XHR
    $.post(form.attr("action"), params)
      .done(function(data) {
        // show a success message here
      })
      .fail(function(data) {
        // show the form validation errors here
      })
  });
});
</script>

I haven't coded PHP in a really long time, but on the PHP side you'll want to look at $_POST for those parameters, and then you'll want to reply with an error response code and some sort of data (probably JSON) about the validation errors if it's bad. If it's successful you can just respond with about anything and a success http response code.

I don't see where you've added the script to the page to catch the form submission event. Basically what's happening now is that you're submitting the form and then redisplaying the page, and when it's displayed it's showing the validation errors. To keep the modal open you've got to keep the browser from submitting the form (which causes a full page re-render) and instead submit it with Ajax.

As a first step, add this code to your page:

<script>
$(function() {
  $("#contact_modal form").submit(function(e) {
    e.preventDefault();
    alert("No page refresh.");
  });
});
</script>

That should cause clicking the submit button to show an alert box, and the modal should stay open. Is that the case?

Awesome, so yes, now it's time to submit it via Ajax. My recommendation would be to configure where you're submitting the form via the action attribute. So add action="contact.php" method="post" to your form tag.

Now let's tweak that submit callback a bit to handle the form:

<script>
$(function() {
  $("#contact_modal form").submit(function(e) {
    e.preventDefault();

    // send the data to your server via XHR
    $.post(form.attr("action"), params)
        .done(function(data) {
          // show a success message here
          alert("SUCCESS");
        })
        .fail(function(data) {
          alert("ERROR");
        });
  });
});
</script>

That update should keep the modal up for you, but nothing will send yet since we don't have the backend wired up. Does that work for you?

Rad!

So now we need to get contact.php into shape. What do you have for your contact script now?

Here's a start. I'm not sure what you're doing with $msg_body after the script runs, so we may need to tweak it all a bit, but hopefully this points you in the right direction.

This should send a response back to the client with either a json object containing error messages if it fails or a successful response if it doesn't.

<?php
  if($_POST)
  {
    //not empty

    $errors= array();

    //start validation
    if(empty($_POST["name"]))
    {
        $errors["name1"] = "You name cannot be empty";
    }
    if(strlen($_POST["email"]) < 9)
    {
        $errors["email2"] = "Your email address is not valid";
    }
    if(empty($_POST["email"]))
    {
        $errors["email1"] = "You email address cannot be empty";
    }
    if(empty($_POST["message"]))
    {
        $errors["message1"] = "You message cannot be empty";
    }

    $name = $_POST["name"];
    $email = $_POST["email"];
    $message = $_POST["message"];

    // if we have some errors, send them back. otherwise, just send the email
    if(count($errors) > 0) {
      // not sure what you're doing with $msg_body, but we'd like to respond with json here
      $msg_body = json_encode($errors);
      header("Content-type: text/json");
      http_response_code(422);
    }
    else
    {
        //redirect to success page

        mail('Sacki2013@gmail.com', "HeadAmp Message", $msg_body);    
        http_response_code(200);
        exit();
    }
  }
?>

What happens if errors occur. Is there another script that's using $msg_body?

I have a question Alan, I was looking to do something like this with modals. I was able to read over your suggestion to Adam but my thing is, it will post and give me whatever my php side shows. So if I was to echo out something it would show that or if I redirected it back to the main page it would do that. But I want it to show a bootstrap alert either in the modal or on the main page. How can I accomplish this? Oh btw, my modal doesn't stay up, it just does whatever the php code tells it.

http://pastebin.com/DUkADEjN

Alright, I was able to get everything to work plus more. :) I was able to get a successful post with a bootstrap alert to say it was successful and on closing the modal it would refresh the page.

I do have 1 more question tho. (This is a php+ajax question) I have a table to that is generated by php+mysql. I also have a button that is front of each row that has an ID(from mysql) that directs to that id's information. (ie. getPhones.php?id='.$row['id'].') On clicking that it would bring up the modal and have a form in the modal populate with the corresponding information from the database based on the id. My question is, how would I be able to pass the id through ajax through to the modal?

I did post about this Passing Variable To Ajax Into A Modal Not sure if you can help me on this. I cant seem to get it work.

btw, how do i do markdown for php or javascript on here? can't seem to get coding to work.