how to check individual values of multiple inputs with the same class. The duplicate classes of the inputs came from append

Question

The jQuery cant seem to detect the values of the appended inputs.

$(document).ready(function() {
  
var i = 1;
  
// This is where I append the additional inputs.
$('.wiz-btn-add').click(function() {
    
  i = i + 1;
    
  $('.educ-cont-add').append(
    '<div class="educ-title">Attainment ' + i + '</div>' +
    '<div class="req2 educ-wiz-col-1">' +
      '<div><label>Name of School*</label></div>' +
      '<div><label>Degree Course</label></div>' +
      '<div><label>Inclusive Date From</label></div>' +
    '</div>' + 
    '<div class="educ-wiz-col-2">' +
      '<div>' +
        '<input name="school[]" type="text" class="req2 wizard-input-school">' +
        '<label>Year Graduated*</label>' +
        '<input name="grad[]" type="text" class="req2 wizard-input-grad">' +
      '</div>' +
      '<div>' +
        '<input name="degree[]" type="text" class="req2 wizard-input-degree">' +
        '<label>Level*</label>' +
        '<select name="level[]" class="req2 wizard-input-level" name="level">' +
          '<option>Select Level</option>' +
          '<option>College</option>' +
          '<option>Post Graduate</option>' +
          '<option>Vocational</option>' +
        '</select>' +
      '</div>' +
      '<div>' +
        '<input name="astart[]" type="text" class="req2 wizard-input-start">' +
        '<label>Inclusive Date From</label>' +
        '<input name="afinish[]" type="text" class="req2 wizard-input-afinish">' +
      '</div>' +
    '</div>' +
    '<div class="content-line"></div>' );
} );
  
  
// This where I check the values of each if its empty.
$('.req2').keyup(function(){
  
  if (
  
    $(".wizard-input-school").val() != "" &&
    $(".wizard-input-degree").val() != "" &&
    $(".wizard-input-afinish").val() != "" &&
    $(".wizard-input-astart").val() != "" &&
    $(".wizard-input-level").val() != "none" &&
    $(".wizard-input-grad").val() != ""
    
  ) {
    
    $(".wiz-next2").removeAttr('disabled');
    $(".wiz-next2").css("opacity","1")
    
  } else if (
  
    $(".wizard-input-school").val() === "" ||
    $(".wizard-input-degree").val() === "" ||
    $(".wizard-input-afinish").val() === "" ||
    $(".wizard-input-astart").val() === "" ||
    $(".wizard-input-level").val() === "none" ||
    $(".wizard-input-grad").val() === ""
    
  ) {
    $('.wiz-next2').attr('disabled','disabled');
    $(".wiz-next2").css("opacity",".5")
  }
  
});
  
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wizard-content2">

  <div class="educ-title">Attainment 1</div>

  <div class="educ-wiz-col-1">
    <div>
      <label>Name of School*</label>
    </div>
    <div>
      <label>Degree Course</label>
    </div>
    <div>
      <label>Inclusive Date From</label>
    </div>
  </div>

  <div class="educ-wiz-col-2">
    <div>
      <input name="school[]" type="text" class="req2 wizard-input-school">
      <label>Year Graduated*</label>
      <input name="grad[]" type="text" class="req2 wizard-input-grad">

    </div>
    <div>
      <input name="degree[]" type="text" class="req2 wizard-input-degree">
      <label>Level*</label>
      <select name="level[]" class="req2 wizard-input-level" name="level">
        <option value="none">Select Level</option>
        <option value="College">College</option>
        <option value="Post Graduate">Post Graduate</option>
        <option value="Vocational">Vocational</option>
      </select>
    </div>

    <div>
      <input name="astart[]" type="text" class="req2 wizard-input-astart">
      <label>Inclusive Date From</label>
      <input name="afinish[]" type="text" class="req2 wizard-input-afinish">
    </div>

  </div>

  <div class="content-line"></div>
  <div class="educ-cont-add"></div>

Thanks!

You need to use delegated event binding. When you call `$("..").keyup` it only binds to the elements that exist at that time, and not to any applied in the future (via append). See here for more info: http://stackoverflow.com/questions/203198/event-binding- on-dynamically-created-elements — freedomn-m, Mar 14 '17 at 14:38
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Mar 14 '17 at 14:38
i cant seem to get what you mean im really sorry can you please explain it in a easier manner i would greatly appreciate your answer thanks — Samuel Marvin Aguilos, Mar 14 '17 at 14:49
Where is an element with `wiz-next-2` that you're trying to disable? — larz, Mar 14 '17 at 15:02
`$('.req2').keyup(function()` becomes `$('document').on('keyup', '.req2', function()` — freedomn-m, Mar 14 '17 at 15:04
i am trying to add an image to show you what i am trying to achieve but i cant add because of reputation — Samuel Marvin Aguilos, Mar 14 '17 at 16:10
@freedomn-m sir i tried the .on() but it doesnt seem to get it done please respond thanks — Samuel Marvin Aguilos, Mar 17 '17 at 08:34
My bad, read the link. It should be: `$(document).on("keyup", ".req2", function(){` — freedomn-m, Mar 17 '17 at 08:47
sorry to bother you @freedomn-m it worked to detect my key up but the problem is the .val() function detects only the value of the original input not the value of the appended one. Like the part in .wizard-input-school. I was thinking if there is a possible way to detect the wizard-inputs appended and original individually to check if there is a empty input thanks — Samuel Marvin Aguilos, Mar 17 '17 at 15:24
You've not made it easy on yourself, it would be easier with a containing div around all of the new content, but this might work in this scenario (will be brittle, in that you change anything it might stop working). Inside the event handler, add: `var wrapper = $(this).closest(".educ-wiz-col-2");` then in all of your `.val` calls add the wrapper, eg: `$(".wizard-input-school", wrapper).val()`. This will give you the values in the context of the one you're changing. It won't work in all cases as you've used `req2` in multiple places - adding an outer wrapper would help that. — freedomn-m, Mar 17 '17 at 16:42
@freedomn-m sir thank you for this very smart answer but your previous answer got to detect the keyup of all the inputs like this code. Ill explain the flow of so you might get the idea. I am trying to disable a next button if a input is blank even the appended one. Thankfully from you help i was able to detect the keyup from all the input but the problem is how i can detect the value of the appended one because the code seem to only detect the value of the original one. Thanks for your patience hope im not disturbing you. — Samuel Marvin Aguilos, Mar 17 '17 at 17:40
i want to disable the next button until all fields are field up and once the appended fields comes out it would be disabled because they are blank thanks again — Samuel Marvin Aguilos, Mar 17 '17 at 17:41
@freedomn-m sir if you think what i am trying to achieve is impossible through this process please suggest me a better approach i would gladly change my code just to make this work thank you very much — Samuel Marvin Aguilos, Mar 17 '17 at 17:55

how to check individual values of multiple inputs with the same class. The duplicate classes of the inputs came from append

0 Answers0