How to add more values to the array on a button click using PHP?


A server-side scripting language that is frequently used for web development is called PHP (Hypertext Preprocessor).

The server runs PHP code, which produces HTML, CSS, and JavaScript, which are then transmitted to the client's browser for rendering. Before the HTML is transmitted to the client's browser, PHP code is embedded in it and executed on the server.

To add more values to an array on a button click using PHP, you can use a form with a button that, when clicked, sends a request to a PHP script that adds the new value to the array.

Approaches

When using PHP, there are various possible ways to add extra values to an array when a button is clicked. The approaches are −

  • Using a form

  • Using Java Script

Let us look at each approach in detail with examples now.

Approach 1: Using “A FORM”

The first approach for adding more values to the array on a button click using PHP is “Using a form”.

Example

Here, we will go through a step-by-step example to implement this approach −

Step 1 − Make a new "array.php" file in the PHP language.

Step 2 − At the top of the PHP file, declare a blank array.

$array = array();

Step 3 − Create a text input field and submit button for a form in HTML. The updated value will be entered in the text input field, and the form will be submitted by clicking the submit button. Make sure to include the form in the body part of your PHP code and to set the form method to "POST."

<body> <form method="POST"> <input type="text" name="new_value"> <input type="submit" name="submit" value="Add to Array"> </form> </body>

Step 4 − Use the $_POST super global variable to check the PHP script's $_POST variable to see if the form has been submitted.

if (isset($_POST['submit'])) {

Step 5 − If the form has been submitted, use the array push() function or the [] operator to add the value from the text input field to the array.

$new_value = $_POST['new_value'];
 array_push($array, $new_value);

Step 6 − Use PHP's print r() or var dump() functions to display the modified array.

print_r($array);

Step 7 − Run your array.php file on either a local or remote server after saving it.

Step 8 − The updated array will now be visible when you fill-up the text input field and press the submit button.

Step 9 − The final code would be like this −

<?php $array = array(); if(isset($_POST['submit'])){ $new_value = $_POST['new_value']; array_push($array, $new_value); } ?> <html> <body> <form method="POST"> <input type="text" name="new_value"> <input type="submit" name="submit" value="Add to Array"> </form> <?php if(!empty($array)){ echo "<pre>"; print_r($array); echo "</pre>"; } ?> </body> </html>

Step 10 − Run the code using XAMPP by following the given procedure.

How to execute a PHP file in XAMPP?

Step 1 − Put XAMPP in place on your PC. This will involve MySQL, PHP, and Apache.

Step 2 − By selecting the "Start" button next to each of the Apache and MySQL modules in the XAMPP control panel, you can launch them.

Step 3 − Write your PHP code in a new file with the ".php" file extension.

Step 4 − Save the document in the XAMPP installation directory's "htdocs" folder. For instance, the path to the "htdocs" folder would be "C:\xampp\htdocs" if XAMPP was installed on the "C:" drive.

Step 5 − To run the PHP file, open a web browser and go to "http://localhost/your-filename.php".

Step 6 − Your PHP file was successfully run on XAMPP if it displays the required result.

Output

Approach 2: Using JAVASCRIPT

The Second approach for adding more values to the array on a button click using PHP is “Using JavaScript”.When a button is clicked, JavaScript can add a new value to an array.

Example

Here’s a step-by-step example to implement the same −

Step 1 − Make a new "array.php" file in the PHP language.

Step 2 − At the top of the PHP file, declare a blank array.

$array = array();

Step 3 − A text input box and a submit button should be added to an HTML form. The form will be submitted by clicking the submit button when the updated value has been entered in the text input box. Include the form in your PHP file's body section.

<body> <form> <input type="text" id="new_value"> <input type="button" onclick="addValue()" value="Add to Array"> </form> </body>

Step 4 − Create the JavaScript method addValue() in the HTML code, which will take the value from the text input field and add it to the array.

<script> function addValue(){ var new_value = document.getElementById("new_value").value; $.ajax({ type: 'POST', url: 'array.php', data: {new_value:new_value} }); } </script>

Step 5 − The $_POST superglobal variable in the PHP script can be used to retrieve the value from the JavaScript function and add it to the array.

if(isset($_POST['new_value'])){ array_push($array, $_POST['new_value']); }

Step 6 − Use PHP's print r() or var dump() functions to display the modified array.

print_r($array);

Step 7 − Run your array.php file on either a local or remote server after saving it.

Step 8 − The updated array will now be visible when you fill-up the text input field and press the submit button.

Step 9 − The final code would be like this −

<?php $array = array(); if(isset($_POST['new_value'])){ array_push($array, $_POST['new_value']); } ?> <html> <body> <form> <input type="text" id="new_value"> <input type="button" onclick="addValue()" value="Add to Array"> </form> <?php if(!empty($array)){ echo "<pre>"; print_r($array); echo "</pre>"; } ?> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> function addValue(){ var new_value = document.getElementById("new_value").value; $.ajax({ type: 'POST', url: 'array.php', data: {new_value:new_value} }); } </script> </body> </html>

Step 10 − Run the code using XAMPP by following the given procedure in the previous approach.

Output

Conclusion

The simple task of adding extra values to an array on a button click in PHP may be completed with ease by using a variety of techniques, including a form, AJAX, directly from the URL, JavaScript, or a database. The most popular method is to add the new value to the array using a form's text input field and submit button. Another option involves using JavaScript, which may be used to add a new value to an array on a button click.

Updated on: 17-Feb-2023

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements