Detailed analysis: How to submit forms in AngularJS programming _ AngularJS

This article mainly introduces how to submit forms using AngularJS. AngularJS is a very popular JavaScript library. It shows how AngularJS interacts with backend PHP on the front end, if you need it, you can refer to the issue that many developers faced with form submission before AngularJS appeared. Because the form submission methods are complicated and different, it is easy to go crazy ...... However, it seems that it will still drive people crazy.

Today, we will take a look at the forms submitted using PHP in the past, and now how to convert them to submit using Angular. Using Angular to process forms is an "aha" moment for me (TRANSLATOR: A pleasure to understand or discover something ). Even though it doesn't even involve much Angular surface, it helps users see the potential of Form submission and understand the two data binding methods.

We will use the jQuery platform for this process. Therefore, you must first use javascript. We will submit a form to Display Error information, add error classes, and display and hide information in javascript.

Then Angular is used. Before using it, we need to do most of the necessary work, and much of the work we have done before will be very easy. Let's get started.

Simple Form

We will focus on two forms submission methods:

• Old method: jQuery and PHP submit forms
• New Method: submit forms in AngularJS and PHP

First, let's take a look at our form, which is super simple:

Form requirements

• Implement new forms without refreshing pages
• Enter name and superhero alias
• If any error occurs, an error prompt is displayed.
• If the input is incorrect, the input is red.
• If all content is OK, a success prompt is displayed.

Document Structure

In our presentation, we only need two files.

• Index.html
• Process. php

Form Processing

Let's create a new PHP to process the form. This page is very small and uses the POST method to submit data.

Form Processing: This is not that important for us. You can use other languages you like to process your forms.

// process.php <?php $errors   = array();  // array to hold validation errors$data    = array();   // array to pass back data // validate the variables ====================================================== if (empty($_POST['name']))  $errors['name'] = 'Name is required.';  if (empty($_POST['superheroAlias']))  $errors['superheroAlias'] = 'Superhero alias is required.'; // return a response ===========================================================  // response if there are errors if ( ! empty($errors)) {   // if there are items in our errors array, return those errors  $data['success'] = false;  $data['errors'] = $errors; } else {   // if there are no errors, return a message  $data['success'] = true;  $data['message'] = 'Success!'; }  // return all our data to an AJAX call echo json_encode($data);

This is a very simple form processing script. We only check whether the data exists. If the data exists, no processing or operation is performed. If the data does not exist, we need to add a message to the $ errors array.

To return our data for AJAX calls, we need to use echo and json_encode. This is all the operations required for PHP form processing. This is also true when using jQuery AJAX or Angular to process forms.
Display form

Let's create an HTML to display our form

   Angular Forms