CODEWITHSUNDEEP
jqueryhtml
deakgyuri
deakgyuri

Reputation: 13

Jquery bind for multiple events

I am an amateur in jquery. I am trying to create a search function which works fine with, until the select element is not included. Could you check where is my fault?

$(function () {
$('#keresomezo').bind('keyup change',(function () {

var that = this,
value = $(this).val();

// Take values from html
keresomezo = $("input[name=keresomezo]").val();
keresomezo_ = $("input[name=keresomezo_]").val();
keresomezo_zip = $("input[name=keresomezo_zip]").val();
keresomezo_city = $("input[name=keresomezo_city]").val();
keresomezo_rank = $( ".rank option:selected" ).val();
//keresomezo_rank = $("input[name=keresomezo_rank]").val();

// minimum length
if (value.length >= minlength ) {
// loading
    $('#ccenter').append('<div id="loadingmessage"><img src="style/images/ajax-loader.gif"></div>');

    $.ajax({
    type: "GET",
    url: "pages/search.php",
    data: {
        'company' : keresomezo,
        'contact' : keresomezo_,
        'zip' : keresomezo_zip,
        'city' : keresomezo_city,
        'rank' : keresomezo_rank
        },
        dataType: "text",
        success: function(msg){
        //we need to check if the value is the same
        if (value==$(that).val()) {
            // Set navbox info
                loadnavbox("Company search");
            //Receiving the result of search here
                document.getElementById("ccenter").innerHTML=msg;
                }
            }
        });
    }
}));
});

And the html:

    <div class="contact_keresomezo" id="contact_keresomezo">
  <input type="text" name="keresomezo" id="keresomezo" title="Search by company name" placeholder="Company name">
  <input type="text" name="keresomezo_" id="keresomezo" title="Search by contact name" placeholder="Contact name">
  <input type="text" name="keresomezo_zip" id="keresomezo" title="Search by ZIP code" placeholder="ZIP">
  <input type="text" name="keresomezo_city" id="keresomezo" title="Search by City" placeholder="City">
  <select name="keresomezo_rank" id="keresomezo" class="rank" title="Search by Rank">
  <option value="" selected>Rank</option>
    <?php print company_rank("",$mysqli); ?>
  </select>

</div>

So the code works without the select element but with it, it will not work. I am on this for 2 days now and it makes me crazy.

Thanks!

Upvotes: 0

Views: 43

Answers (1)

msg
msg

Reputation: 8161

You are binding to an id. Id's have to be unique. bind is deprecated in jQuery 3, that's why I changed it to on.

Also you were at some point trying to target select as an input but it's not. You can target it with the :input pseudo selector.

$(function() {
  $(':input[name^="keresomezo"]').on('keyup change', (function() {
    var that = this,
      value = $(this).val();

    // Take values from html
    keresomezo = $("input[name=keresomezo]").val();
    keresomezo_ = $("input[name=keresomezo_]").val();
    keresomezo_zip = $("input[name=keresomezo_zip]").val();
    keresomezo_city = $("input[name=keresomezo_city]").val();

    // Any of these work
    keresomezo_rank = $(".rank option:selected").val();
    keresomezo_rank = $(":input[name=keresomezo_rank]").val();
    keresomezo_rank = $(".rank").val();
    
    console.log(keresomezo);
    console.log(keresomezo_);
    console.log(keresomezo_zip);
    console.log(keresomezo_city);
    console.log(keresomezo_rank);
  }))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact_keresomezo" id="contact_keresomezo">
  <input type="text" name="keresomezo" id="keresomezo" title="Search by company name" placeholder="Company name">
  <input type="text" name="keresomezo_" id="keresomezo" title="Search by contact name" placeholder="Contact name">
  <input type="text" name="keresomezo_zip" id="keresomezo" title="Search by ZIP code" placeholder="ZIP">
  <input type="text" name="keresomezo_city" id="keresomezo" title="Search by City" placeholder="City">
  <select name="keresomezo_rank" id="keresomezo" class="rank" title="Search by Rank">
    <option value="" selected>Rank</option>
    <option value="1">Rank1</option>
    <option value="2">Rank2</option>
  </select>
</div>

Upvotes: 1

Related Questions