Solved

Ajax and PHP

Posted on 2017-03-13
4
63 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 57

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 57

Expert Comment

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

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

688 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