show confirmation modal dialog after form submission

Question

I have a form and I need it to do 2 things once the submit button is clicked:

1. I need the form data to be processed in the acknowledge.php that I have created.
2. I need the modal dialog to display confirmation.

My form:

<form class="quote-form" method="post" action="acknowledge.php">

  <div class="form-row">
    <label>
      <span>Full Name</span>
      <input type="text" name="name">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Email</span>
      <input type="email" name="email">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Phone</span>
      <input type="number" name="phone">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Nature of Enquiry</span>
      <select name="enquiry">
        <option selected>General Enquiry</option>
        <option>Logo Design</option>
        <option>Web Design</option>
        <option>Branding</option>
        <option>Social Media</option>
        <option>Email/Web Hosting</option>
      </select>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Message</span>
      <textarea name="message"></textarea>
    </label>
  </div>

  <div class="form-row">
    <button type="button" name="send">Get A Quote</button>
  </div>

</form>

I'm new to Javascript and AJAX but I have copied some code from some similar threads and tried to customize it to my site

<script type="text/javascript">
$(".quote-form").submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    data: $(".quote-form").serialize(),
    url: 'url',
    success: function(data) {
      $("#myModal").modal("show");
    }
  });
  return false;
  });
});
</script>

<!--Modal container-->
<div id="myModal" class="modal">
  <!-- Modal content--> 
  <div class="modal-content">
    <span class="close">x</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

When the submit button is clicked nothing happens. Even the acknowledge.php does not execute. What am I doing wrong?

Answer 1

A number of things that have been holding you up:

1. In your javascript, you have a trailing }); right at the end.

2. Your button is doing nothing to trigger the submit event in the javascript. You should alter the button or use a proper submit input. Or use type="submit".

3. You're not doing anything with data in your success callback. So when the modal opens, nothing else happens.

4. Your URL in the AJAX request is not set. You could use this.action to use the form's action URL here.

I've made some changes that you can preview in my fiddle.

There are some parts of the fiddle that you should ignore, such as the ajax url and data options. Those should be something like:

  $.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize(),
    //...
  });

What we obviously do not know now is whether you have included your dependency scripts like jQuery and bootstrap into your page.

For example: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> is the bootstrap javascript.

Make sure that jQuery is above bootstrap, or bootstrap will fail to load as it depends on jQuery. You may need to use the bootstrap CSS as well.

Lastly, you need to check that your action in the form is the correct URL, and that the data in your form that is sent is processed and echoed back as HTML.

You will also want to go to the bootstrap documentation, get a better example of the modal, and check out the forms area to spruce up this form.

You could use developer tools in your browser and note any errors thrown by javascript in the console if you still have problems. (Ctrl+Shift+I).

You didn't need to wrap anything in a document ready.

Answer 2

you need to wrap your code in a document.ready() function:

<script type="text/javascript">
    $(function(){
        $(".quote-form").submit(function(e){
            e.preventDefault();
            $.ajax({
                type : 'POST',
                data: $(".quote-form").serialize(),
                url : 'url',
                success: function(data) {
                    $("#myModal").modal("show");
                }
            });
            return false;
        });
    });
</script>

UPDATE

you need to change the type of your button to submit like this

<button type="submit" name="send">Get A Quote</button>

Answer 3

You doing two things wrong

First you need to wrap your code with document.ready

$(function(){

});

Then you need to fix your url

var form = $(".quote-form");
$.ajax({
    type : 'POST',
    data: form .serialize(),
    url : form.attr('action'),
    success: function(data) {
        $("#myModal").modal("show");
    },
    error: function (jqXHR, textStatus, errorThrown) { 
        alert(errorThrown);
    }

});