CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
shanto
shanto

Reputation: 125

Form Submission does not work

My form submission does not work . Nothing happens when i submit the form. I tried everything but no result. I have looked at everything on here that I can find and I just can't figure out why I cannot perfect this code.

My code

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {
        $('contact_queryf').bind('click', function (event) {

event.preventDefault();

          $.ajax({
            type: 'POST',
            url: 'Views/query_send.php',
            data: $('contact_queryf').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });
      });
    </script>

my form code

<form role="form"  method="post" id="contact_queryf" name="contact_queryf">
    <div class="form-group">
        <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
    </div>
    <div class="form-group">
        <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
    </div>
    <div class="form-group">                
        <div class="radio-inline">
            <label class="radio-inline">
                <input type="radio" name="qtype" id="qtype" value="Android" required>Android
            </label>
            <label class="radio-inline">
                <input type="radio" name="qtype" id="qtype" value="iOS" required>iOS
            </label>
            <label class="radio-inline">
                <input type="radio" name="qtype" id="qtype" value="Web" required>Web
            </label>

            <label class="radio-inline">
                <input type="radio" name="qtype" id="qtype" value="other" required>Other
            </label>                                    
         </div>
     </div>

     <div class="form-group">
        <textarea class="form-control" rows="3" name="text" id="text" required></textarea>
     </div>               

    <button type="submit" class="btn btn-custom bleft" id="contact_query" name="contact_query">Submit</button>

Upvotes: 1

Views: 212

Answers (5)

Filling The Stack is What I DO
Filling The Stack is What I DO

Reputation: 6741

If you're using the <button type="submit" to submit the form you do not need the AJAX.

Or am I missing something?

Right now you're submitting the form when a user clicks the form.

Here you go cat daddy

This can get you jump started in submitting a form via AJAX but at a lower level.

This is really what you're attempting to do.

<button type="submit" class="btn btn-custom bleft" id="contact_query" name="contact_query" onclick="btnSubmitForm(event)">Submit</button>


    var btnSubmitForm = function (event) {

       event.preventDefault();

        var newForm = new FormData(document.forms[0]),
            xhr = new XMLHttpRequest(),
            that = this;

        xhr.onload = function () { /*do something when response is back from server*/ };
        xhr.open('GET|POST|PUT|DELETE', 'YOUR URL', true);
        xhr.send(newForm);
        return false;
    };

Upvotes: 1

Jacob Mattison
Jacob Mattison

Reputation: 51052

First thing to try:

data: $('#contact_queryf').serialize()

instead of

data: $('contact_queryf').serialize()

(you were missing the #)

Also, you want to bind the click event to "#contact_query" (the submit button), not to the form itself, so

$('#contact_query').bind(...

instead of

$('contact_queryf').bind(...

Upvotes: 3

Girish
Girish

Reputation: 12117

The selector is incorrect, change the selector's 

$(function () {
        $('#contact_query').bind('click', function (event) {

event.preventDefault();

          $.ajax({
            type: 'POST',
            url: 'Views/query_send.php',
            data: $('#contact_queryf').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });
      });

OR

$(function () {
        $('#contact_queryf').submit(function (event) {
          $.ajax({
            type: 'POST',
            url: 'Views/query_send.php',
            data: $(event.target).serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
      });

And in HTML, form close </form> tag is missing

Upvotes: 1

shredmill
shredmill

Reputation: 283

You are missing the # in your jquery selector

$('contact_queryf').bind('click', function (event) {

Should be

$('#contact_queryf').bind('click', function (event) {

Upvotes: 1

jogesh_pi
jogesh_pi

Reputation: 9782

$(function () {
    $('#contact_queryf').on('click', function (event) {

      event.preventDefault();

      $.ajax({
        type: 'POST',
        url: 'Views/query_send.php',
        data: $(this).serialize(),
        success: function (response) {
          // response
          alert('form was submitted');
        }
      });

    });
  });

Take a look on the documentation - .on()

Upvotes: 1

Related Questions