?
Solved

Ajax and PHP

Posted on 2017-03-13
4
Medium Priority
?
107 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 59

Accepted Solution

by:
Julian Hansen earned 1400 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 600 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 59

Expert Comment

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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

650 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