'how to make a button on a form work when clicked in php?

i have code like this

<body>
<form method = "POST">
    <label for="">Star </label>
    <input type="text" name = "star"></br>
    <input type="submit" value= "Submit">
</form>
<?php
$Star = $Add = $Subs = NULL;
$Picture = "<img src = star.png>";
    if($_SERVER['REQUEST_METHOD']=="POST"){
        if(isset($_POST['star'])){
            $Star = $_POST['star'];
            for ($i=1; $i <= $Star + 1 ; $i++) { 
                echo "$Picture";   }
        if(isset($_POST['Op'])){
            $op = $_POST['Op'];
            switch($op){
                case 'ADD':
                    for ($i=1; $i <=$Star + 1 ; $i++) { 
                        echo "$Picture";
                    }
                case 'SUBS':
                    for ($i=1; $i <=$Star - 1 ; $i++) { 
                        echo "$Picture";
                    }
 }
        }
    }
?> <form method="POST">
        <input type="submit" value="ADD" name = "Op"/>
        <input type="submit" value="SUBS" name = "Op"/>
</form>
<?php } ?>

when I run it in the browser, the submit button works fine and displays a star image according to the input, but when the button is added and minus the star image doesn't increase and decrease. for example, if I input the number of 5 stars and I submit the program it works fine, after that when I click the add or subs button, the stars don't increase or decrease. sorry for my english

phphtmlforms


Solution 1:[1]

You have two forms in this code, first of all, combine both of them into a single form it looks way cleaner than this, and follow the below code it will help to achieve your task. ( Read comments in the code. )

<body>
    <form method="POST" action="<?= $_SERVER['PHP_SELF'] ?>">
        <label for="">Star </label>
        <input type="text" name="star"></br>
        <input type="submit" value="Submit" name="submit">
        <input type="button" value="ADD" onclick="addNSub(this.value)" /> <!-- (this.value) will send the pressed button attribute value to the function -->
        <input type="button" value="SUBS" onclick="addNSub(this.value)" />
    </form>

    <div id="starContainer">
        <?php
        $Star = $Add = $Subs = NULL;
        $Picture = "<img src = 'star.png' class='starPng'>";
        if (isset($_POST['submit'])) {
            if (isset($_POST['star'])) {
                $Star = $_POST['star'];
                if (!empty($Star)) {
                    for ($i = 1; $i <= intval($Star); $i++) {
                        echo "$Picture";
                    }
                }
            }
        }
        ?>
    </div>

    <script>
        function addNSub(btnValue) {
            const parentElement = document.getElementById("starContainer");  //get the star parent dive by it's id
            const elements = document.querySelectorAll(".starPng");          //get all the star elements by it's class

            if (btnValue == "ADD") {  //if button value == ADD this code will execute

                for (let i = 0; i <= elements.length; i++) {
                    if (elements.length == i) {
                        const getChild = elements[0];       //gets the first element (class ="starPng") under "starContainer" div
                        const cloneElement = getChild.cloneNode(true); // making clone of that element
                        parentElement.appendChild(cloneElement); //setting the clone to parent element ("starContainer" div)
                    }
                }

            } else if (btnValue == "SUBS") { //if button value == SUBS this code will execute

                for (let i = 0; i <= elements.length; i++) {
                    if (elements.length == i) {
                        parentElement.removeChild(elements[0]); // removes the first HTML element (class ="starPng") under "starContainer" div
                    }
                }

            }
        }
    </script>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hishan_98

Related Questions