Скачать или смотреть How to Return Two Variables to Different Divs Using JavaScript and PHP on Click

Learn how to seamlessly return and display two variables in separate divs without refreshing a page using JavaScript, PHP, and JSON.
---
This video is based on the question https://stackoverflow.com/q/64677143/ asked by the user 'NeThuNI' ( https://stackoverflow.com/u/14575580/ ) and on the answer https://stackoverflow.com/a/64677482/ provided by the user 'Emiel Zuurbier' ( https://stackoverflow.com/u/11619647/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Returning two variables to two different divs from another php on onClick

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Returning Two Variables to Different Divs from PHP with JavaScript

If you've ever found yourself needing to return multiple values from a PHP script to a web page without refreshing it, you're not alone! This scenario often arises in web development, and with the right techniques, it's easily manageable. In this guide, we'll explore how to return two variables to two different divs using JavaScript and PHP, specifically for a scenario where onclick events trigger data retrieval. Let's dive in!

Problem Overview

The problem at hand involves a form submission where, upon clicking a submit button, you want to retrieve two values ($gen and $img) from a PHP script and display them in two different divs on your webpage. Initially, the implementation only showed both values in a single div. However, our goal is to separate them neatly into div1 and div2 to enhance clarity and presentation.

The Code Structure

Here's a simplified representation of the code we need to work with:

Index.php: The main page containing the form and divs.

Submit.php: The PHP script that processes the form and generates outputs based on the user input.

Submit.js: The JavaScript responsible for making AJAX calls to the PHP script and updating the HTML.

The Solution

To solve the problem, we will utilize JSON to send and receive multiple values from the server. JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate.

Step 1: Modifying the PHP Script

First, we should adjust our Submit.php file to send back multiple variables. We'll use an array to encapsulate both $gen and $img variables, and then encode that array into JSON format:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Modifying the JavaScript Function

Next, we will alter the SubmitFormData() function in Submit.js to handle the JSON response properly. After parsing the JSON string, we can easily extract the values and place them in the corresponding divs:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Reviewing the HTML Structure

The HTML structure remains the same, as this part effectively serves our purposes. Make sure the two divs where we plan to display the outputs are correctly set up in your Index.php file:

[[See Video to Reveal this Text or Code Snippet]]

Final Steps

With these steps completed, your code should allow the button click to fetch the necessary data, apply the logic in PHP, and return multiple values in JSON format. These values are then rendered on the webpage without a refresh, providing a smooth user experience!

Conclusion

Implementing AJAX with JSON opens up a world of possibilities for web applications by allowing seamless communication between the client and server without refreshing the page. By utilizing these techniques, you can effectively manage multiple values, enhancing the overall interactivity of your web applications. Happy coding!