如何在动态输入上使用GetElementsByClassName（）

Question

i got a little problem i want to query my database so when the user use the autocomplete i can get the stock of that product on another column 'td' called *Exist Act * , Ok now with this new scrip when i moveout of the any textbox it change the value of All of the Exist Act column.Is there a solution so the script just change the value on the same row? this is my code i have changed the whole script, this one

$(document).on("mouseout",".service",function(){//begin event
    var $this=$(this);
    var service = $(this).val();        
    var dataString = 'service='+service;
      $.ajax({
        type: "GET",
        url: "busca.php",
        data: dataString,
        success: function(data) {  

     $('.txtHint').html(data);
     }
      });
       });

insted of this one

function showUser(str) {

if (str == "") {
  document.getElementsByClassName("txtHint").innerHTML = "";
  return;
} else {
  if (window.XMLHttpRequest) {

    xmlhttp = new XMLHttpRequest();
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementsByClassName("txtHint").innerHTML = xmlhttp.responseText;
    }
  };
  xmlhttp.open("GET", "busca.php?q=" + str, true);
  xmlhttp.send();

}}

HTML

 <form action="levantar_pedido2.php" method="post" name="form1" target="cuerpo"> <table class="table table-bordered table-condensed" align="left"> <tr class="Estilo9"> <td width="20" align="center ">-</td> <td width="1" align="left"><strong>Cantidad</strong> </td> <td width="50" align="left"><strong>Exist Act *</strong> </td> <td width="100" align="left"><strong>Descripcion</strong> </td> </tr> <tr> <td align="center"> <input type="checkbox" value="X" name="articulo[]" id="articulo" /> </td> <td> <input name="cantidad[]" id="cantidad" type="text" maxlength="5" size="5" value=""> </td> <td align="center"> <div class="txtHint">*</div> </td> <td align="left"> <input onmouseout="showUser(this.value)" type="text" size="50" id="service" class="service" name="service[]" /> <div align="right" class="suggestions"></div> </td> </tr> </table> <table class="table table-bordered table-condensed" align="center"> <div class="inputs"></div> </table> <br> <A class="btn btn-default" id="adder" href="#">Áñadir otro que no este en la lista</A> <div align="right"> <button class="btn btn-primary btn-lg" type="submit" name="Submit" value="Levantar pedido"> <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Levantar pedido</button> </div> </form> 

And this is my js for the dynamic inputs

function addInput() {
    $('.inputs').append(
        '<table " class="table table-bordered table-condensed"  align="left"><tr>'+
        '<td width="20"align="center"><input type="checkbox" value="X" name="articulo[]" id="articulo"/></td> '+
        '<td width="74"> <input name="cantidad[]" id="cantidad" type="text"  maxlength="5" size="5" value="" > </td>'+
        '<td width="50"align="center"><div class="txtHint"> *</div></td>'+
        '<td width="100" align="left"><input onmouseout ="showUser(this.value)" type="text" size="50"   class="service" name="service[]" /></td><div class="suggestions"></div> ' +
        '</tr></table>'
    );

this one is the loop i tried to use

 function showUser(str){

if (str == "") {
    document.getElementsByClassName("txtHint")[0].innerHTML = "";
    return;
} else { 
    if (window.XMLHttpRequest) {

        xmlhttp = new XMLHttpRequest();
    } 
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
           var divs=getElementsByClassName("txtHint");
           for(var x=0;x<divs.length;x++){
            divs[x].innerHTML = xmlhttp.responseText;
        }}
    };
    xmlhttp.open("GET","busca.php?q="+str,true);
    xmlhttp.send();

}}

Sorry for my bad english

Answer 1

Ok now with this new scrip when i moveout of the any textbox it change the value of All of the Exist Act column.Is there a solution so the script just change the value on the same row?

You are doing everything right. The only problem is you are using this code

$('.txtHint').html(data);

in your ajax success method, What this does is it will select all the elements with the class txtHint in the entire table and then change all of them. You need to select only this respective row element with the class txtHint So what you can do is traverse to top to find the tr in which this input element is wrapped and then find the txtHint class named element within this tr and change only that. So use the below code

$this.closest('tr').find('.txtHint').html(data);

Since you already have $this this will hold the current input element which triggered the event and then $this.closest('tr') will get you the parent tr in which the input is wrapped, Now trace down to the element with class txtHint inside this tr and then change only that.

Answer 2

If you are using JQuery and all of your elements containers will have the .input class then use $(".input").html() to access the html of the element. Now if you need to use an event on the dynamically created element then that is a different story. First you will have to select the document or an element that already existed when the page first loaded in order for events to fire on the dynamically created element. See example Below:

Example HTML created dynamically:

 <!--pretend this was added using the JQuery append() function-->
  <div class="input">I was added dynamically</div>

JQuery Event:

 //select the document for example first then the selector
 $(document).on("mouseover",".input",function(){//begin event

          //do something when the event is fired

          //alert the html of element hovered over with an input class
          alert($(this).html());


 });//end event

Update:

The following code will change only td element in a single row after the mouse leaves the .service class element. Replace $('.txtHint').html(data); in your ajax success function with the following code:

/* Select the parent element which is a 
  td element and then select the previous
  td element which contains the txtHint class 
  */
  $(this).parent().prev("td").html(data);

Answer 3

First off, I would look over how selectors work in jQuery. Unless necessary, I would by consistent with using only one form of selecting elements (ie either, jQuery or document.getElementBy...).

The basic selectors from jQuery are:

$("tagName") about equivalent to document.GetElementsByTagName

$(".className") about equivalent to document.GetElementsByClassName

$("#id") about equivalent to document.GetElementById

You should notice that the first two return multiple items and only the last returns a single element (the first found with that id).

document.getElementsByClassName("txtHint").innerHTML = "";

Is not valid since you get a NodeList and trying to set the innerHTML. jQuery lets you get away with this since it will run/set most things for the whole list of returned items.

$('.inputs').append(..)

Tries to find all the elements with class="inputs" and append HTML to them. In your case you probably want a specific id for the input, so $("#service").append()

Depending on the project it may be cleaner to pass the element to whichever function needs to append to the element.

onmouseout="showUser(this)" and then use this in the function

function showUser(element) {
var str = element.value;
....
$(element).append(...);
}}

But that depends entirely on what you are trying to achieve and the methods purpose.

All the jQuery Selectors are on their website: http://api.jquery.com/category/selectors/ Search of what you need.