The variable is not shown in the console log

Question

Could any one help me ? I am beginner to jquery and ajax . I am displaying the value in the console log ,,but nothing is shown . what may the problem be ?

script.php

<script src="/icac/ar/js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
   $("#see").click(function() {

      val =  $(this).val();
       $.ajax({
    type: "POST",
    url: "test.php",
    data: 'var='+ val,
    success: function(data) {
        console.log(val);
       $("#c").html(data);
    }
        });      
          });      

});
</script>
<div class="test">
    <p>aaaaaaaaaaaaaaaaaaaaa</p>
    <a href="javascript:void(0);" id="see" value="1">see</a>
</div>
<div class="test">
    <p>bbbbbbbbbbbbbbbbbbbbb</p>
    <a href="javascript:void(0);" id="see"  value="2">see</a>
</div>
<div class="test">
    <p>cccccccccccccccccccccc</p>
    <a href="javascript:void(0);" id="see"  value="3">see</a>
</div>
<div class="test">
    <p>ddddddddddddddddddd</p>
    <a href="javascript:void(0);" id="see"  value="4">see</a>
</div>
<div id="c"></div>

test.php

<span class="ss"><?php
    if (isset($_POST["var"])){
     echo $_POST["var"]; }?>

</span>

I would guess your AJAX call doesn't enter your success. Try adding an error function. — Zenoo, Nov 29 '17 at 09:05
Ids need to be unique as they are used to identify something - how can you identify it if it is the same as other things. With that in mind, jQuery will only take the first item with an id it finds, this means that your click event only gets bound to the first anchor with the id see and not the others. If you need to bind to multiple elements, use a class. Also value is not a valid attribute for an anchor, use a [data attribute](https://api.jquery.com/data/) instead — Pete, Nov 29 '17 at 09:18
@NasrallaMohammad -unique means you cannot use same id multiple time in same page. — Umar Farooque Khan, Nov 29 '17 at 09:19
@UMAR FAROOQUE KHAN What is the correct ,easiet way , I don't need to make things complicated , — Nasralla Mohammad, Nov 29 '17 at 09:32
@NasrallaMohammad -Use class in the place of id and if you want to get data, add attribute see. Get var dat= $(this).attr('some-data'); — Umar Farooque Khan, Nov 29 '17 at 09:36

score 1 · Answer 1 · answered Nov 29 '17 at 09:17

1- An id must be unique and you cannot use value attribute in href.

    <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function () {
        $("#see").click(function (event) {
             event.preventDefault();
            var val = $(this).text();
            console.log(val);
                   $.ajax({
    type: "POST",
    url: "test.php",
    data: 'var='+ val,
    success: function(data) {
        console.log(val);
       $("#c").html(data);
    }
        }); 

        });

    });
</script>
<div class="test">
    <p>aaaaaaaaaaaaaaaaaaaaa</p>
    <a href="javascript:void(0);" id="see">see</a>
</div>

score 0 · Answer 2 · answered Nov 29 '17 at 09:09

0

You should't assign the same id to different html elements. Try setting a unique id for each element and targeting that or changing id="see" to class="see" (if you change to a class make sure to change you selector to '.see')

answered Nov 29 '17 at 09:09

gnusey

354
3
16

Kashif Solangi · Answer 3 · 2017-11-29T10:55:07.923

0

HTML element anchor <a> you can not use value attribute, instead of that you can use data-value attribute, on other hand use unique id as well

 var val =  $(this).attr('data-value');
 console.log(val)

edited Nov 29 '17 at 10:55

answered Nov 29 '17 at 09:34

Kashif Solangi

892
8
12

The variable is not shown in the console log

3 Answers3