Solved

Ajax and PHP

Posted on 2017-03-13
4
48 Views
Last Modified: 2017-03-13
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.
0
Comment
Question by:Overthere
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 350 total points
ID: 42046390
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
 
LVL 4

Assisted Solution

by:Peos John
Peos John earned 150 total points
ID: 42046409
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
 

Author Comment

by:Overthere
ID: 42047138
Thank you both for responding. More food for thought. Good links. Still a  bit foggy but clearing...
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 42047183
You are welcome.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question