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>

Swati · Accepted Answer · 2020-12-16 04:00:50Z

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>

edited Dec 16, 2020 at 4:00

answered Dec 15, 2020 at 16:07

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

YoYoWeb Over a year ago

Thank you. That works. Is there a way to pass variables as parameters into function?

Swati Over a year ago

Updated my answer have a look .

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related