phpjqueryajaxlivesearch

pass variable value of the clicked button (not button in a form) to ajax url?


In idx.php head tag, I have a script like this :

<script type="text/javascript">
$(document).ready(function(){
var alamat="1.php";
//$('button[name="test"]').click(function(){
//var alamat= $(this).val();
//alert(alamat);
//});
    
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
    
    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val('');
                $.ajax({
                type: "POST",
                //url: "1.php",
                url: alamat,
                data: {name: $(this).text()},
                success: function(msg){
                    $("#hasil").html(msg)
                },
                error: function(){
                    alert("failure");
                }
            });
        $(this).parent(".result").empty();
    });
});
</script>

And in the same idx.php, in the body tag, I have this :

  <button name="test" class="btn" value="1.php"><a href="idx.php">THIS</a></button>
  <button name="test" class="btn" value="2.php">THAT</button>

In the 2nd line of the script, I hardcoded the variable alamat value as "1.php"
then in $ajax for the url I use that alamat variable value.
The code runs as expected.

Now I'm trying to have the alamat variable is dynamic based on which button is clicked.
So I commented (//) the 2nd line of the script, and uncommented the 3rd to the sixth line.

When I click the first button, I see the alert window show "1.php"
and when I click the second button, I see the alert window show "2.php".
So I thought the alamat variable has a value, just like as if I hardcoded it.

But it seems the $ajax url has no value as it's just stand still after I click one of the ".result p" list. So it seems the alamat variable value from the clicked button is not passing to $ajax url call.

So my question is :
How do I code it in order to have the $ajax url value can be either "1.php" or "2.php" based on the clicked button ?

or
how to have the alamat variable value (resulted from the 3rd to the sixth line) go on to $ajax url:alamat ?


Solution

  • You're redeclaring alamat inside your function, which makes a whole new (locally scoped) variable. Just say:

    alamat = $(this).val();
    

    This will set the (global) alamat variable that you've already declared outside the function. So your completed code would be:

    var alamat="1.php";
    $(document).ready(function(){
      $('button[name="test"]').click(function(){
        alamat = $(this).val();
      });
      // ...
    }