Categories
AJAX Development jQuery PHP

Perform AJAX post request to the same PHP page (Jquery Form Plugin)

I’m writing a new web interface using JavaTMP that is an AJAX based admin template. After spending some time on understanding how it works i created a page with a form that will allow you to create a new project in my software. Basically using php it will be pretty easy to create a form with a post method calling the same page and then performing a query to the database but the problem is here the post is submitted using AJAX and doesn’t follow the usual rules such as

$ajax.post(...)

So I’m going to explain you how i did so far and remember that my main purpose is to perform a query on the same page to show a success notify.

All you see below is a partial page called “addproject “. I left the original template comments if you need them:

<script type="text/javascript">
  jQuery(document).ready(function () {
        (function ($) {
            $('#jquery-form-plugin-test-id').ajaxForm({
                beforeSubmit: showRequest, // pre-submit callback
                success: showResponse // post-submit callback
                        // other available options:
                        //url:       url         // override for form's 'action' attribute
                        //type:      type        // 'get' or 'post', override for form's 'method' attribute
                        //clearForm: true        // clear all form fields after successful submit
                        //resetForm: true        // reset the form after successful submit

                        // $.ajax options can be used here too, for example:
                        //timeout:   3000
            });
            // pre-submit callback
            function showRequest(formData, jqForm, options) {
                // formData is an array; here we use $.param to convert it to a string to display it
                // but the form plugin does this for you automatically when it submits the data
                var queryString = $.param(formData);

                // jqForm is a jQuery object encapsulating the form element.  To access the
                // DOM element for the form do this:
                // var formElement = jqForm[0];

                alert('About to submit: \n\n' + queryString);

                $('#result').text(queryString);

                return true;
            }

// post-submit callback
            function showResponse(responseText, statusText, xhr, $form) {
                // for normal html responses, the first argument to the success callback
                // is the XMLHttpRequest object's responseText property

                // if the ajaxForm method was passed an Options Object with the dataType
                // property set to 'xml' then the first argument to the success callback
                // is the XMLHttpRequest object's responseXML property

                // if the ajaxForm method was passed an Options Object with the dataType
                // property set to 'json' then the first argument to the success callback
                // is the json data object returned by the server
                //$('#result').text(statusText);
                alert("Submitted");
            }
        }(jQuery));
      });
</script>
<div id="result"></div>

<form id="jquery-form-plugin-test-id" class="form" action="" method="post" novalidate="novalidate">

  <div class="form-group required row">
      <label class="col-md-2 col-form-label">Name</label>
      <div class="col-md-4">
          <input class="form-control" id="id_name" maxlength="30" name="name"
                 placeholder="Project Name" required="required" title="" type="text" />
      </div>
  </div>

  <div class="form-group required row">
      <label class="col-md-2 col-form-label">Description</label>
      <div class="col-md-4">
          <input class="form-control" id="id_description" maxlength="30" name="name"
                 placeholder="Project Description" required="required" title="" type="text" />
      </div>
  </div>

  <div class="form-actions">
    <button type="submit" name="submit" class="btn btn-primary" id="register-submit-btn">
        <span class="fa fa-plus"></span> Create
    </button>
  </div>

</form>

So as you see it performs the ajax request in this way, i tried to take a look to the library but it’s a mess and on their website with their documentation they don’t tell you how to accomplish this task.

I tried to perform another post request inside the post callback but it just freezes the page.

I tried a lot and on the code up there I made just setting a div text with the post parameters but i need to pass them to the php code…

If you can tell me something It should be great guys! Thank You!

Leave a Reply

Your email address will not be published. Required fields are marked *