如何从循环内的表单文本字段中获取特定值？

Question

I am busy with a school project that mainly focuses on showing data from a database. We build a map with Google Maps API so we could show markers with specific data when you click on them. The data tagged to the marker are self-written JavaScript variables. It all works but now comes my real problem. We also have an overview of al datasets were you can easily select any dataset. When a dataset is clicked you will be redirected to the page with the map and the specific data. My problem is that I need to convert the data I get from the database using PHP and MySQL to JavaScript variables that are equal to the variable from the map.

My idea was to create an invisible form where there are six text fields that are filled with the database rows (this part works), next I have to get the specific value of the text field that belongs to the clicked dataset. The only problem is that I am generating the overview of the datasets with a loop so data can be added to the database and the code doesn't need to be adjusted. But I don't know how to get the specific value.

I have tried several ways to do this including getElementbyClass (works but you always need to define the array number), getElementbyID (only grabs the first value because an ID can only be used once), getElementbyName (also only grabs the first value) and some stuff that has to do with jQuery: siblings, next, things that grab the closest value (but I got an empty value).

/ Code is below /

HTML & PHP:

<?php
    $sql = "SELECT * FROM containers";
    $result = mysqli_query($connectie, $sql);
    if (mysqli_num_rows($result) > 0) {
        // output data of each row
        while($row = mysqli_fetch_assoc($result)) { ?>
           <div class="Border">

           <?php echo $row["container_address"]?>

        <form class="senddataform">

        <input type="text" name="addressField" id="addressField" value=" 
        =$row['container_address']?>">

        <input type="text" name="maxcontent" id="maxcontentField" value="<? 
        =$row['container_maxcontent']?>">

        <input type="text" name="name" id="nameField" value="<? 
        =$row['container_name']?>">

        <input type="text" name="beschikbaarheid" id="beschikbaarheidField" 
        value="<?=$row['container_beschikbaarheid']?>">

        <input type="text" name="gebruikt" id="gebruiktField" value="<? 
       =$row['container_gebruikt']?>">

       <input type="text" name="legingdagen" id="legingdagenField" value="<? 
       =$row['container_legingdagen']?>">

       </form>

<?php } ?>

My empty JavaScript function:

 function sendContainerData(){

 }

JavaScript variables that need to be filled with the data:

var containerAddress =
var containerMaxcontent =
var containerName =
var containerBeschikbaarheid =
var containerGebruikt =
var containerLegingdagen =

Answer 1

You can think of it this way: Declare those variables that need to be filed with data as global variables. Then in a function, you can get the elements from the invisible text fields by class (which returns an array that that can be accessed by index). Now, since you know the order in which the invisible text fields are displayed apriori (from the PHP loop), you can assign the value of each text field to the correct variable. For example, the first text field value can be mapped to the correct variable, and so on. Something like this:

var containerAddress;
var containerMaxcontent;
var containerName;
var containerBeschikbaarheid;
var containerGebruikt;
var containerLegingdagen;

function sendContainerData(){
    var values = document.getElementByClass('someclass'); //returns an array
    //Now use your knowlege of the order of the textfields to map the values
    containerMaxcontent = values[0].value; //maps maxcontent to maxcontent variable
    containerName = values[1].values; //maps name text field to name variable
    containerBeschikbaarheid = values[2];//
    containerGebruikt = values[3]; //
    containerLegingdagen = values[4];
 }

Then you can use those variables as you wish. Note that you can do this for IDs too. Only you will need to make your IDs an array. All your IDs will look like this id="someID[]" . Hope this is clear enough and it helps