How can i update the text of more than one label with the same class name using the input blur event

Question

I am working in a project and i have to update the text of a label when the focus is losed in the input This is the html part:

<input id="FirstName" name="FirstName" type="text" value="" class="inputName"/>
<input id="MidName" name="FirstName" type="text" value="" class="inputName"/>
<input id="LastName" name="FirstName" type="text" value="" class="inputName"/>
<p class="passengerTitle1">hola</p>
<input id="FirstName" name="FirstName" type="text" value="" class="inputName"/>
<input id="MidName" name="FirstName" type="text" value="" class="inputName"/>
<input id="LastName" name="FirstName" type="text" value="" class="inputName"/>
<p class="passengerTitle1">hola</p>

and the js code of firing the blur event of the inputs is:

$(document).ready(function () {
      fullName = '';
      $(".inputName").blur(
          function (event) {
            var name = $(this).val();
            fullName += name+ ' ';
            $(".passengerTitle1").text(fullName);
         }
      );
  });

I get the following result: the text of both labels: Phellip E. Summer Edgar B. Thompson

But the expected result is : for the first label Phellip E. Summer for the second label Edgar B. Thompson

this is the jsfiddle link: jsfiddle lin

I wonder for a little help because it a very important project and don't want to miss the deadline of the project. cheers.

Answer 1

You may need to make some changes in your html. I hope this is what you want to achieve.

 $(".inputName").on("blur", function() { var inputName = $(this).parent(".passengerInfo").children(".inputName"); var outputName = ""; $(inputName).each(function() { outputName += $(this).val() + " "; }) $(this).parent(".passengerInfo").children(".passengerTitle1").text(outputName) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="passengerInfo"> <input id="FirstName" name="FirstName" type="text" value="" class="inputName" /> <input id="MidName" name="FirstName" type="text" value="" class="inputName" /> <input id="LastName" name="FirstName" type="text" value="" class="inputName" /> <p class="passengerTitle1">hola</p> </div> <div class="passengerInfo"> <input id="FirstName" name="FirstName" type="text" value="" class="inputName" /> <input id="MidName" name="FirstName" type="text" value="" class="inputName" /> <input id="LastName" name="FirstName" type="text" value="" class="inputName" /> <p class="passengerTitle1">hola</p> </div> 

Answer 2

As others have proposed solutions by changing the html , I'm proposing a solution to implement this without changing the html (if you want to stick to your current html ).

Use .nextAll() and .first() like this:

$(this).nextAll(".passengerTitle1").first().text(fullName);

Implemented on your fiddle: JSFiddle

But you also have another problem, where you are not properly setting the fullName variable.

Again, if you don't want to change the html , you could solve it using .prev() like this:

JSFiddle

Answer 3

$(document).ready(function () {
  $(".inputName").blur(
      function (event) {
        var titel = getPassengerTitel($(this)); // find the titel element
        var fullName = getName(titel); // read Fullname by titel element
        titel.html(fullName);
     }
  );

});

function getName(passengerTitelElem){
 var last = passengerTitelElem.prev();
 var middel = last.prev();
 var first = middel.prev();
 var name ='';
 if(first.val()) name += first.val() + ' ';
 if(middel.val()) name += middel.val() + ' ';
 if(last.val()) name += last.val() + ' ';
 return name;

}

function getPassengerTitel(e) {
 var next = e.next();
 if(next.attr('class') == 'passengerTitle1') {
      return next;
 }
 return getPassengerTitel(next);

}