Ajax and PHP

I am new to AJax and have a question concerning data validation. I have seen many examples where the Ajax url is redirecting to another page for data validation and examples where it is not redirected but stays on same input page displayed to users.
I realized a lot of factors can play into this but I just want it simple.
 My requirements are 1. the user input needs to remain on the page  2. if errors, a dialog or alert is displayed to the user and then the user can then correct the errors. 3. if there are no errors, I want to display a spinner while processing the input before redirecting.
Which method is the best for these requirements? Am I correct that the <form></form> will not have the "method= post" since the Ajax is handling it? The pages will be called from main page that will be using tabs. The input page will have some jQeury plugins that seem to have problem when the page is refreshed by the old way of <form method=post>.
Thank you.
OverthereAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Am I correct that the <form></form> will not have the "method= post"
It can but it is ignored.

Best approach - depends on requirements. What I do is this

1. Submit is clicked
2. I collect the form data using jQuery serialize() or JavaScript FormData()
3. I send the data to the server with an AJAX call (disabling any default behaviour of form or clicked button)
4. The server validates the data and sends back a status object
{
  "success": false,
  "error": [{
    "id": "firstname",
    "msg": "A first name is required"  
  },{
    "id": "email",
    "msg": "A valid email is required"  
  }]
}, {
...
}]
}

Open in new window

In my ajax done function I do this
<script>
$(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    var form = $(this);
    $('.alert').remove();
    $.ajax({
      url: 't2201.php',
      data: form.serialize(),
      type: 'POST',
      dataType: 'JSON'
    }).done(function(resp) {
      if (!resp.success) {
        for(var i = 0; i < resp.error.length; i++) {
          var error = resp.error[i];
          var alert = $('<div/>', {class: 'alert alert-danger'}).html(error.msg);
          $('#' + error.id).after(alert);
        }
      }
      else {
        alert('All good - redirect will happen here');
      }
    });    
  });
});
</script>

Open in new window

Working sample here
0
 
Peos JohnConnect With a Mentor PHPCommented:
I have seen many examples where the Ajax url is redirecting to another page for data validation and examples where it is not redirected but stays on same input page displayed to users.

Ajax is not a single technology, it is a set of techniques which you can use to REQUEST and RETRIEVE the data 'asynchronously'( which means you can send and receive the data from the sever in the background with needing to refresh the page on the browser)

https://en.wikipedia.org/wiki/Ajax_(programming)

https://www.w3schools.com/php/php_ajax_intro.asp

My requirements are 1. the user input needs to remain on the page  2. if errors, a dialog or alert is displayed to the user and then the user can then correct the errors. 3. if there are no errors, I want to display a spinner while processing the input before redirecting.

For form validation you can post the form values to through ajax to .php file

 $.ajax({
                type : "POST",//METHOD
                url : "process.php",//PROCESS FILE
                data : datavalues,//SEND THE DATA HERE
                success : function (data) {
                    $('#message').html(data);//SHOW MESSAGE HERE
                }
            });

Open in new window



Which method is the best for these requirements? Am I correct that the <form></form> will not have the "method= post" since the Ajax is handling it? The pages will be called from main page that will be using tabs. The input page will have some jQeury plugins that seem to have problem when the page is refreshed by the old way of <form method=post>.

Since you already using jquery also you might want to do operation without refreshing the page as you are using tabs, you use ajax with jquery

http://www.tutorialrepublic.com/jquery-tutorial/jquery-ajax-get-and-post-requests.php
0
 
OverthereAuthor Commented:
Thank you both for responding. More food for thought. Good links. Still a  bit foggy but clearing...
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.