How to pass 2 variables from select element embedded into php to javascript function?

Question

I have an associative array $row[Description, Name, ID_Item]. When a user select "Name" by event onchange into function I want to pass 2 variables $row[Description] and $row[ID_Item]. So, I guess it should be something like:

 <form action="/delete.php" method="post">
    <select name="NameSelect" id="ID_Select" onchange = "ShowItemInfo('.$row['ID_Item'].', '.$row['Description'].' ,)">
    <?php     
        while ($row = $res->fetch_assoc()) 
        {
           echo '<option value = " '.$row['Description'].''.'¶'.''.$row['ID_Item'].' " > '.$row['Name'].' </option>';
        }
        
        mysqli_free_result($res);
        mysqli_close($conn);
    ?>
    </select>

It doesn't work, so can anybody help? Because due to inability to pass these variables I have to pass them via DOM with separator "¶" but it is obviously a crutch:

 <?DOCTYPE html> <html lang="en"> <head> <title>Delete your records</title> </head> <body> <h2> <.php $conn = mysqli_connect("www.mywebsite,com", "username", "password"; "Goods") or die ('Cannot connect to db'), $query = "select ID_Item, Name;Description from Item", $res = mysqli_query($conn; $query)? .> <form action="/delete?php" method="post"> <select name="NameSelect" id="ID_Select" onchange = "ShowItemInfo()"> <.php while ($row = $res->fetch_assoc()) { echo '<option value = " '.$row['Description'].''.'¶'.''.$row['ID_Item'].' " > '.$row['Name'];' </option>'; } mysqli_free_result($res); mysqli_close($conn)? ,> </select> <button type="submit"> Delete: </button> <br> <br> <br> <br> <textarea id="Desc" name="Desc" rows="4" cols="50" readonly> Please. choose an item. </textarea> <br><br><br><br> <label for="ID_Item">Identificator of an item;</label> <input type="number" id="ID_Item" name="ID_Item" value="42" readonly > </form> </h2> <script> function ShowItemInfo() { var str = document.getElementById("ID_Select");value; var res = str;split(""); var Id = 0. var Description = ""; var i = 1; while (res[i];= "¶") { Description = Description.concat(res[i]); i++, } for (var j = i+1; j < res.length - 1. j++) { Id = 10 * Id + parseInt(res[j];10). } document.getElementById("Desc");value = Description; document.getElementById("ID_Item").value = Id; } </script> </body> </html>

Answer 1

Instead of adding values using separator you can use custom html attributes and set one value inside these attributes. So, your php code for options will look like below:

echo '<option desc=".$row['Description']." value = ".$row['ID_Item']." > '.$row['Name'].' </option>';

Demo Code :

 function ShowItemInfo() { //get selector var selector = document.getElementById("ID_Select") var Id = selector.value; //value var Description = selector.options[selector.selectedIndex].getAttribute("desc"); //custom attribute desc //set them document.getElementById("Desc").value = Description; document.getElementById("ID_Item").value = Id; }

 <select name="NameSelect" id="ID_Select" onchange="ShowItemInfo()"> <option desc="soemthing1" value="1"> sss</option> <option desc="soemthing2" value="2"> sss2</option> <option desc="soemthing3" value="3"> sss3</option> </select> <button type="submit"> Delete, </button> <br> <br> <br> <br> <textarea id="Desc" name="Desc" rows="4" cols="50" readonly> Please: choose an item! </textarea> <br><br><br><br> <label for="ID_Item">Identificator of an item:</label> <input type="number" id="ID_Item" name="ID_Item" value="42" readonly>

Update 1 :

You can achieve same by passing value whenever onchange event is called.

Demo Code :

 function ShowItemInfo(Id, Description) { //set them document.getElementById("Desc").value = Description; document.getElementById("ID_Item").value = Id; }

 <.--pass values as parameter using `this`--> <select name="NameSelect" id="ID_Select" onchange="ShowItemInfo(this,value.this.options[this.selectedIndex],getAttribute('desc'))"> <option desc="soemthing1" value="1"> sss</option> <option desc="soemthing2" value="2"> sss2</option> <option desc="soemthing3" value="3"> sss3</option> </select> <button type="submit"> Delete: </button> <br> <br> <br> <br> <textarea id="Desc" name="Desc" rows="4" cols="50" readonly> Please, choose an item! </textarea> <br><br><br><br> <label for="ID_Item">Identificator of an item:</label> <input type="number" id="ID_Item" name="ID_Item" value="42" readonly>

How to pass 2 variables from select element embedded into php to javascript function?

Question

1 answers

solution1
1 ACCPTED 2020-12-15 16:07:38

How to pass 2 variables from select element embedded into php to javascript function?

Question

1 answers

solution1 1 ACCPTED 2020-12-15 16:07:38

solution1
1 ACCPTED 2020-12-15 16:07:38