CODEWITHSUNDEEP
javascriptjqueryajax
Sylvite
Sylvite

Reputation: 39

Two ajax forms not working at the same time

I have two boxes, one box is called min amount and another is called max amount. When you put 100 in the max amount, it will find products that are less then $100. But when you put lets says later $50 in the min amount, it wont work unless you refresh the page

My question is, how do I make this script work for both of my boxes as if I use one box for the ajax the other ones doess not work without refreshing.

I'm sorry if I sound a bit confusing but this is what I tried so far and it still doesn't work.

   <script>

    //on keyup, start the countdown
    $('#maxprice').keyup(function(){
       doneTyping();
    });

    function doneTyping() {
       var value = $('#maxprice').val();
       $.post("script/limitedfetcher/maxprice.php",
        {
            name: value
        },
        function(data, status){
            $("#loader").empty();
            $('#loader').html(data);
        });


    }
    </script>


    <script>
    $('#minprice').keyup(function(){
       doneTyping();
    });

    function doneTyping() {
       var value = $('#minprice').val();
       $.post("script/limitedfetcher/minprice.php",
        {
            name: value
        },
        function(data, status){
            $("#loader").empty();
            $('#loader').html(data);
        });


    }
    </script>

Upvotes: 1

Views: 51

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Use this!!

Pass the element where keyup occurs to the function.

Then, based on which of the two it is... decide about the URL... The rest of the function is the same, no need to define it twice.

<script>

//on keyup, start the countdown
$('#minprice, #maxprice').keyup(function(){
  doneTyping(this);
});

function doneTyping(element) {
  var value = $(element).val();

  if($(element).attr("id")=="maxprice"){
    url = "script/limitedfetcher/maxprice.php";
  }else{
    url = "script/limitedfetcher/minprice.php";
  }

  $.post(url,{
    name: value
  },
  function(data, status){
    $("#loader").empty();
    $('#loader').html(data);
  });
}
</script>

Upvotes: 2

Related Questions