Question posted in
You can find the official documentation here.

I have currently a problem while grabbing class value generated from php code – Jquery ajax

I currently have a problem with jQuery & PHP.

When I try to target on click on class “.id_annonce” from generated php code it does not grab me the exact value I clicked but another one and it’s always fix, input hidden value is 18 when it should be 19 or 20.

Jquery code : 

var commander = $(this).val();
  var beta = $('body .id_annonce').val();
  window.location.href = 'panier.php?id='+ commander +'?annonce='+ beta + '';

My php code : 

require 'produits.php';
$pro = new produits;
$coll = $pro->getAllproduits();
foreach ($coll as $key => $value) {

    echo '<div class="card-body  my-3 border-top" >
        <img src="img/resize.jpg" class="card-img-top  " style="height:88px;width:88px;margin-left:20px;float:right;" alt="...">   
        <h3 class="card-title p-2" style="font-size:10px;font-style:none;font-weight:600;"><strong>Ajouté Le : </strong> ' . $value['date_ajout'] . '</h3>
        <div class="d-flex flex-row">
        <h6 class="card-subtitle p-2  mb-2  text-muted"><strong>Varieté : </strong>' . $value["variete"] . '</h6>
        <h6 class="card-subtitle p-2 mb-2  text-muted" style="font-style:none;"><strong>Especes :  </strong>5000 tonnes</h6></div>
        <div class="d-flex flex-row">
        <h6 class="card-subtitle p-2  text-muted"><strong>Classe : </strong>' . $value["classes"] . '</h6>
        <h6 class="card-subtitle p-2  text-muted" style="font-style:none;"><strong> Quantité :  </strong>' . $value["quantite"] . '</h6></div>
        <h6 class="card-subtitle p-2 mb-2 mt-1 text-muted" style="font-style:none;float:right;font-size:24px;">    <strong>Prix : </strong> ' . $value["prix"] . 'DA/kg</h6> 
        <div class="d-flex flex-row justify-content-start" style="margin-top:50px;">
        <div class="p-1"> <button  class="details" value="' . $value["id"] . '" style="border:none;background:none;"> <i class="fa fa-info-circle fa-2x  pr-2 text-success"></i></button></div>
        <div class="p-1">
        <input type="hidden"  value="' . $value["id"] . '"  class="id_annonce">
        <button class="commander btn btn-md  btn-outline-dark " value="' . $value["id_commande"] . '"> Commander <i class="fa fa-shopping-cart  pr-2 "></i></button></div>
        <div class="p-1">  

        <button  value="' . $value["Interesser"] . '" class="interesser btn  btn-md text-dark" style="border-color:green;font-weight:600;">Interesser(' . $value["Interesser"] . ')</button></div></div></div>';

}
Tags:

3

Answers


  1. 0

    I’ve misunderstood the problem before. You can try this-

    $('.commander').on('click', function(e) {
    e.preventDefault();
    const commander = $(this).val();
    const beta = $(this).siblings('.id_annonce').val();

    window.location.href = 'panier.php?id='+ commander +'?annonce='+ beta + ''; 
});

    The id_annonce input field is a sibling of the commander button. So you can grab this by getting the clicked commander’s sibling id_annonce.

    Login or Signup to reply.
  2. 0

    You are grabbing the element by class (and multiple elements will have the same class) so you will not get a distinct one. You should therefore add a specific ID to the input and will be able to grab this then.

    HTML output by PHP:

    echo '<input type="hidden"  value="' . $value["id"] . '" id="annonce-' . $value["id"] . '"  class="id_annonce">'

    JS:

    var commander = $(this).val();
function goToAnnonce(id) {
  var beta = $('body #' + id).val();
  window.location.href = 'panier.php?id='+ commander +'?annonce='+ beta + ''; 
}

    and to bind this to the button:

    echo '<button class="commander btn btn-md  btn-outline-dark " value="' . $value["id_commande"] . '" onclick="goToAnnonce('annonce-' . $value["id_commande"] . '')"> Commander <i class="fa fa-shopping-cart  pr-2 "></i></button></div>';

    However I’d like to point out that this is an overly complicated solution just to realize a button click that changes the page. This can be done A LOT simpler by either changing the button to a link:

    echo '<a href="panier.php?id=' . $value["id_commande"] . '&annonce=' . $value["id"] . 
'">Click me</a>';

    Or by binding this click to the button. See this answer if you want to do that.

    Login or Signup to reply.
  3. 0

    Within the button click code, this refers to the button that’s been clicked. You can use that to navigate to the relevant hidden input.

    My preferred method is to go up to a common parent ($(this).closest(...), then down to the input you want (.find("input...) This also works when you need multiple inputs, up once, down multiple times. It also reduces the rigidity that comes with .next() and similar.

    In your case:

    $(".commander").on("click", function() {
  var commander = $(this).val();
  var beta = $(this).closest(".card-body").find(".id_annonce").val();
  console.log('panier.php?id=' + commander + '?annonce=' + beta + '');
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card-body">
  <input type="hidden" value="123" class="id_annonce">
  <button type="button" class="commander">Commander</button>
</div>

<div class="card-body">
  <input type="hidden" value="456" class="id_annonce">
  <button type="button" class="commander">Commander</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search