/AJAX-Form-Submission

This a web application demonstrating asynchronous form submission using AJAX with jQuery. It features a simple HTML form collecting user information (name, first name, age) and sending it to a PHP script. The script processes and saves the data to a JSON file, dynamically updating the web page to display the submitted information without reloading.

Primary LanguageJavaScript

AJAX-Form-Submission

AJAXFormSubmission is a web application that demonstrates how to submit form data asynchronously using AJAX with jQuery. The project consists of a simple HTML form that collects user information (name, first name, and age) and sends it to a server-side PHP script. The PHP script processes the data and saves it to a JSON file. The application dynamically updates the web page to display the submitted information without requiring a page reload.

Components:

  1. HTML File (index.html):

    • Contains the structure of the web page with a form for user input.
    • Uses jQuery for making AJAX requests.

  2. JavaScript File (script.js):

    • Listens for the form submission event and prevents the default behavior.
    • Sends the form data to the server using a POST request via AJAX.
    • Handles the server response to update the web page dynamically.

  3. PHP File (add.php):

    • Handles the server-side logic for processing the form data.
    • Reads and updates a JSON file to store the submitted data.
    • Returns the updated data as a JSON response.

Workflow:

  1. User Interaction:

    • User fills out the form and submits it.
    • JavaScript intercepts the submission and sends an AJAX request with the form data to the PHP script.

  2. Server Processing:

    • PHP script receives the data, updates the JSON file, and sends back the updated data.

  3. Dynamic Update:

    • JavaScript processes the server response and updates the webpage to display a personalized message with the submitted information.

Features:

  • Asynchronous form submission without page reload.
  • Dynamic content update based on server response.
  • User data stored and managed in a JSON file.

Usage:

This project is ideal for learning how to implement AJAX-based form submissions and understanding the interaction between front-end and back-end components in a web application. It provides a practical example of handling user input, processing it server-side, and updating the user interface dynamically.