JAVASCRIPT function inside the WHILE

Asked

Viewed 86 times

0

In the DO WHILE below it displays 4 database data, when I click on one of the buttons with the function show() appears only the first line, even when I click on any other button always shows me the first data. What should I do to fix?.

<?php require_once('Connections/conexao.php');

mysql_select_db($database_conexao, $conexao);
$query_Recordset1 = "SELECT * FROM produtos";
$Recordset1 = mysql_query($query_Recordset1, $conexao) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style_pdv.css" />
<title>Documento sem título</title>
<script>
function mostrar(){
    var t1 = document.getElementById('tx1').value; //Pega o value do input tx1
    var t2 = document.getElementById('tx2').value; //Pega o value do input tx2
    var t3 = document.getElementById('tx3').value; //Pega o value do input tx3
    document.getElementById('v1').value=t1; //Joga o value do input tx1 no input v1
    document.getElementById('v2').value=t2; //Joga o value do input tx2 no input v1
    document.getElementById('v3').value=t3; //Joga o value do input tx3 no input v1
}

</script>
</head>
<body>

<?php do { ?>
<input name="tx1" id="tx1" type="text" value="<?php echo $row_Recordset1['nome']; ?>" />
<input name="tx2" id="tx2" type="text" value="1" />
<input name="tx3" id="tx3" type="text" value="<?php echo $row_Recordset1['preco']; ?>" />
<input name="btn" id="btn" type="button" value="<?php echo $row_Recordset1['nome']; ?>" onclick="mostrar()" /><br />
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

<br /><br />
Produto: <input name="v1" id="v1" type="text" value="" />
Quantidade: <input name="v2" id="v2" type="text" value="" />
Preço: <input name="v3" id="v3" type="text" value="" />

</body>
</html>
  • 3

    The way it is, the community would have to guess what you want to do and study your code to try to start understanding your problem. Please reduce your code to a [Mcve] and describe thoroughly the difficulty to eventually make the post viable. A read on [Ask] and [Help] might help.

  • Note: The @Bacco comment is correct and has great value to you as a new member of the community. I will venture to have understood your question and put an answer. Please comment if the answer goes against what you are looking for.

  • 1

    @Lipespry the fact that you have understood does not make it suitable for the site and here is not a Helpdesk (which incidentally is one of the things that in my view makes the site a mess), but since Sergio who is also moderator understood differently, I abstain from further action in this particular case. The question only serves the author himself, the answers may not be enough and in these cases if you want to help the author (which I think is commendable), just put in a Stebin and link in the comments, so solve his problem without side effects (I myself have done it many times here).

  • 3

    @Lipespry often the best is really the author edit and make clear the problems, so we help him and help future visitors. The closures are not "punishment", and taking the "really out of scope" the user is always invited to improve and elaborate the post, so we have the best possible situation: help the author and leave a legacy. It doesn’t have to be iron and fire, you can reach a good balance (usually the guidelines are always to improve to reopen).

  • 1

    What I saw interesting in this question, and hence the answer, is the common mistake of generating duplicate Ids and not realizing the errors that come from it. Generating HTML via PHP is a common case and a solution without Ids seems interesting to share.

  • 2

    @Lipespry at no time doubted you had understood, for that is not the point. The point is "anyone, with a minimum notion of the thing understand", because the future visitor will be browsing a lot of post to seek some help, it would be impossible to analyze code by code to see if it serves. The solution may be simple, but if the question needs analysis for a user to know if it is the same as him, he has lost the value as a knowledge repository. Usually it’s not Sergios and Lipesprys who will be looking for help, but people with less analytical power and time left.

  • If the solution is what @Sergio said (solve the Ids), I have the impression that it is duplicate, but I really don’t think I have much to add.

Show 2 more comments

1 answer

3


You’re creating elements all with the same ID. Ids have to be unique in HTML, so you have to add logic that increments these Ids (to be unique) or logic that doesn’t need Ids!

I suggest the last approach. For this it is useful to have a <div> around these inputs, and pass the this in the onclick="mostrar()" to know the starting point...

An example would be like this:

function mostrar(btn) {
  const div = btn.closest('div');
  var t1 = div.querySelector('[name="tx1"]').value;
  var t2 = div.querySelector('[name="tx2"]').value;
  var t3 = div.querySelector('[name="tx3"]').value;
  document.getElementById('v1').value = t1;
  document.getElementById('v2').value = t2;
  document.getElementById('v3').value = t3;
}
</script>
</head>

<body>

  <?php do { ?>
  <div>
    <input name="tx1" type="text" value="<?php echo $row_Recordset1['nome']; ?>" />
    <input name="tx2" type="text" value="1" />
    <input name="tx3" type="text" value="<?php echo $row_Recordset1['preco']; ?>" />
    <input name="btn" type="button" value="<?php echo $row_Recordset1['nome']; ?>" onclick="mostrar(this)" /><br />
  </div>
  <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

  <br /><br /> Produto: <input name="v1" id="v1" type="text" value="" /> Quantidade: <input name="v2" id="v2" type="text" value="" /> Preço: <input name="v3" id="v3" type="text" value="" />

  • 1

    I didn’t know the method .closest(). Great solution! + 1

Browser other questions tagged

You are not signed in. Login or sign up in order to post.