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

Question

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!

Answer 1

I build a sample in local with your code, there is no problem with ajax or new post request on complete. the two change that I made is this: in form set action

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

because I want to see what params post and pass 404 error.

and change input name for description :

<input class="form-control" id="id_description" maxlength="30"
name="desc" placeholder="Project Description" required="required" title="" type="text" />

for sending as a separated param.

you can try your self :

test.php file:

<?php
var_dump($_POST);

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <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");
                    $.ajax({
                        url: 'https://reqres.in/api/users?page=2',
                        method : 'GET',
                        success : function (data){
                            result.html(result.html()+JSON.stringify(data));
                        }
                    })
                }
            }(jQuery));
        });
    </script>
</head>
<body>
<div id="result"></div>

<form id="jquery-form-plugin-test-id" class="form" action="test.php" 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="desc"
                   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>
</body>
</html>

and you see in network tab that params send successfully. even the second post request look like well.