CODEWITHSUNDEEP
javascriptjquery
Md Rathik
Md Rathik

Reputation: 86

Jquery Multiple ID ERROR

when i input data in a input box, then same data insert in all input-box at a same time.Here id="genric_search" when click this input box, its also work on second input box.But i need dynamically insert.

      **<!--its a first input box-->**
     <label>Genric Name</label>
     <input   id="genric_search" name="gname[]"  type="text">
     <div id="suggesstion-box-genric"></div>


    **<!--its a 2nd input box-->**
     <label>Genric Name</label>
     <input   id="genric_search" name="gname[]"  type="text">
     <div id="suggesstion-box-genric"></div>



    Jquery
    <script>
    $(document).ready(function(){
        $('[id="genric_search"]').keyup(function(){
            $.ajax({
                type: "POST",
                url: "search.php",
               /* data:'genric='+$(this).val(),*/
                data:'genric='+$(this).val(),
                beforeSend: function(){
                    $('[id="genric_search"]').css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
                },
                success: function(data){
                    $('[id="suggesstion-box-genric"]').show();
                    $('[id="suggesstion-box-genric"]').html(data);
                    $('[id="genric_search"]').css("background","#FFF");
                }
            });
        });
    });

    function selectmdc(val) {
        $('[id="genric_search"]').val(val);
        $('[id="suggesstion-box-genric"]').hide();
    }
    </script>

       **Error Report**

enter image description here

Upvotes: 1

Views: 66

Answers (1)

Sushanth --
Sushanth --

Reputation: 55750

Use classes instead of id, as is should be unique in a HTML page. Then you can club this with the this to target the right context and use next to get the div following the input.

JS

$(document).ready(function() {
  $('.genric_search"').keyup(function() {
    var $thisInput = this;

    $.ajax({
      type: "POST",
      url: "search.php",
      /* data:'genric='+$(this).val(),*/
      data: 'genric=' + $(this).val(),
      beforeSend: function() {
        $thisInput.css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
      },
      success: function(data) {
        var $inputDiv = $thisInput.next('.suggesstion-box-genric');

        $inputDiv.show();
        $inputDiv.html(data);
        $thisInput.css("background", "#FFF");
      }
    });
  });
});

HTML

 **<!--its a first input box-->**
     <label>Genric Name</label>
     <input name="gname[]"  type="text" class="genric_search">
     <div class="suggesstion-box-genric"></div>


    **<!--its a 2nd input box-->**
     <label>Genric Name</label>
     <input   class="genric_search" name="gname[]"  type="text">
     <div class="suggesstion-box-genric"></div>

Upvotes: 3

Related Questions