button sends Hidden input field value

Question

I have a problem with the use of a specific button in the project. I’ll explain: I have a window opened by the window.open command, so in this open window I have a button that takes the value of two input fields Hidden in which is in while in the database. When you click on it, it has a function where it sends the value of this Hidden field to another input from the page on which the window runs.open (To simplify, the x.php page opens via window.open to the y.php page, so on the y.php page there is a button that sends a value returned from the database to the input field in x.php).

Then the problem begins, when I click I can even send from one input to the other, only only the first listed record of the database, the others do not send.

Follow the part of y.php where you do this function:

These are the Hidden fields:

$query = "SELECT * FROM equipamentos WHERE marker_id LIKE '$id'";


 $result = mysqli_query($conn, $query);

while ($row = mysqli_fetch_assoc($result)){

  <td>".$row['id']."</td>
  <td>".$row['nome']."</td>

<td style=\"text-align:center;\">".$row['lat']."></td>
<td style=\"text-align:center;\">".$row['lng']."</td>
<td style=\"text-align:center;\">
  <input type=\"hidden\" name=\"latMap\" id=\"latMap\" value ='".$row['lat'] ."'></input>
<input type=\"hidden\" name=\"lngMap\" id=\"lngMap\" value ='". $row['lng'] ."'></input>";
</td>

So I have the send button:

<button type=\"button\" id=\"btnLocalizar\" name=\"btnLocalizar\" class=\"btn btn-sm btn-primary\">
                            <i class=\"fas fa-map-marker-alt\"></i></button>

And the script to send:

    <script>
  var input1 = document.getElementById('latMap').value;
  var input2 = document.getElementById('lngMap').value;

  $(document).ready(function(){
    $('#btnLocalizar').click(function(e){
      e.preventDefault();
      var input_value = $('#latMap').val();
      $(window.opener.document)

        .find('#latMap')
        .val(input_value)
    });
  });
  </script>

The only problem is only to be able to send the first record, if someone knows how to get all the records listed by the database query, it would be of great help.

Answer 1

There are some problems in the code, such as duplicity of ids. The window button will always send the first id that find. Or you remove the ids or put a variable that differentiates the ids, for example, an increment variable in while:

$x = 0;
while(){
   ...
   <input type=\"hidden\" name=\"latMap\" id=\"latMap".$x."\" value ='".$row['lat'] ."'></input>
   <input type=\"hidden\" name=\"lngMap\" id=\"lngMap".$x."\" value ='". $row['lng'] ."'></input>";
   ...
   $x++;
}

If you were using the ids just to capture the elements, you don’t you will need them and can remove them. The same thing with the name and id of the buttons inside the while.

Another thing are these two lines:

var input1 = document.getElementById('latMap').value;
var input2 = document.getElementById('lngMap').value;

They’re probably useless, so you can remove them too.

The e.preventDefault(); also has no use, since the buttons are from clicks and not of Submit. You can remove that line too.

As the buttons are in the same row of the table as the input, you can catch the event click by class .btn, capturing the value of input hidden for name. So your value code would look like this:

$(document).ready(function(){
   $('.btn').click(function(){
      var linha = $(this).closest('tr');
      var input_valueLat = linha.find('[name="latMap"]').val();
      var input_valueMap = linha.find('[name="lngMap"]').val();
      $(window.opener.document)
      .find('#latMap')
      .val(input_valueLat);
      $(window.opener.document)
      .find('#lngMap')
      .val(input_valueMap);
   });
});