Ajax Posting always same value

Question

I'm working on button groups which are retrieving by PHP echo from database and need to post values by Ajax. This is shortly about creating product main groups, sub groups and products.

This is the code for creating and listing buttons:

 echo '
<a class="altgrup_al">
<input type="hidden" name="data_id" id="data_id" value="1">
<input type="hidden" name="san_RECno" id="san_RECno" value="'.$san_RECno.'">
<button type="button" class="btn btn-mini btn-primary" style="margin-
left:5px; margin-bottom:5px; height:80px; width:80px; white-
space:normal;">'.$san_isim.'</button></a>';

And this is the ajax code for posting:

<script>
$(document).ready(function(){ 
$(".altgrup_al").click(function(e){
    e.preventDefault(); 
  var deger = document.getElementById('data_id').value;
  var sth_fatura_no = document.getElementById('sth_fatura_no').value;
  var san_RECno = document.getElementById('san_RECno').value; 
  $.ajax({ 
    type: "POST", 
    url: "altgrup_al.php", 
    data: {deger:deger, sth_fatura_no:sth_fatura_no, san_RECno:san_RECno}, 
    success: function(result){ 
      $("#alt_tablo").html(result); 
    }
   });
    });
   });
  </script>

i tried also data-id attribute but in any style of ajax posting,

var san_RECno = document.getElementById('san_RECno').value;

this value = 1.

But when i list buttons and show the value of san_RECno, each button shows its own id number.

I'm not good on JavaScript enough so i need help why always posting same (1) id number.

Thanks.

If you have several buttons with same id - you're doing it wrong. `id` must be unique on the page. — u_mulder, Feb 06 '18 at 07:01
Why are you wrapping it in an `a` tag? Attach the click event to the button. — Lawrence Cherone, Feb 06 '18 at 07:02
Each button retrieving different id according to the mysql table and the echo is in while loop. — Serter, Feb 06 '18 at 07:09
I am not sure but i think the san_RECno is taking the first loop element value (id=1). Doesn't matter which button i click. Can be? — Serter, Feb 06 '18 at 07:12

Satyendra Yadav · Answer 1 · 2018-02-06T07:40:12.023

2

step 1 : make your hidden text box with dynamic ID (if you are using loop then put its count with same name (like: id="data_id+ echo php variable") and call JS method with arguments like

ONCLICK="saveData($('#data_id+ echo php variable).val()')"

Step 2 :

function saveData(var dataid)
var deger = dataid;
 $.ajax({ 
    type: "POST", 
    url: "altgrup_al.php", 
    data: {deger:deger}, 
    success: function(result){ 
      $("#alt_tablo").html(result); 
    }
   });

edited Feb 06 '18 at 07:40

answered Feb 06 '18 at 07:33

Satyendra Yadav

122
4

this is for POST one variable only . you can make it for more text values with more arguments – Satyendra Yadav Feb 06 '18 at 07:41

score 1 · Accepted Answer · answered Feb 06 '18 at 07:30

The code for creating and listing buttons :

Also look for PHP Buttons inside loop

<?php
$inc = 1; //define a varible which increment in loop
loop_start{ //loop like while,for,foreach

echo '
<a class="altgrup_al" data-id="'.$inc.'">
<input type="hidden" name="data_id" id="data_id'.$inc.'" value="1">
<input type="hidden" name="san_RECno" id="san_RECno'.$inc.'" value="'.$san_RECno.'">
<button type="button" class="btn btn-mini btn-primary" style="margin-left:5px; margin-bottom:5px; height:80px; width:80px; white-space:normal;">'.$san_isim.'</button></a>'

$inc++;
}
?>

And this is the ajax code for posting:

<script>
$(document).ready(function(){ 
    $(".altgrup_al").click(function(e){
          e.preventDefault(); 
          var id = $(this).data('id');
          var deger = $('#data_id'+id).val();
          var sth_fatura_no = $('#sth_fatura_no'+id).val();
          var san_RECno = $('#san_RECno'+id).val(); 
          $.ajax({ 
            type: "POST", 
            url: "altgrup_al.php", 
            data: {deger:deger, sth_fatura_no:sth_fatura_no, san_RECno:san_RECno}, 
            success: function(result){ 
              $("#alt_tablo").html(result); 
            }
           });
    });
});
</script>

use jquery instead of javascript for getting input value if you have already jquery library

With this help the sub_groups of products are listing perfectly as buttons so how can i use this way for sub_group buttons? Main-Group buttons -> Sub_Group Buttons -> Products. and each list has one button which turns the list back. Foreaxmple after clicking main buttons, sub buttons are listing with one button which will turn back to main groups. Any idea how to do whole working system? — Serter, Feb 06 '18 at 08:02

Ajax Posting always same value

2 Answers2