how to get a textbox value from dynamically created div

Question

I am creating dynamic div with html elements and i need to get value that textbox This is my dynamic created content now i need to get the

<div id="TextBoxContainer">
  <div id="newtextbox1"> // this id is dynamic id
    <div class="row cells2">
      <div class="cell">
        <label>Patient Name</label>         
        <div class="input-control text full-size">
          <input type="text" id="PatientName1" placeholder="Patient Name"/> // this id is dynamic id
        </div>
      </div>
      <div class="cell">
        <label>Patient ICNo</label>
        <div class="input-control text full-size" >
           <input type="text" id="PatientICNo" placeholder="Patient ICNo"/>
        </div>
      </div>
    </div>
  </div>
</div>

here i am trying to get value in jquery

if ($("#TextBoxContainer") != null && $("#TextBoxContainer").length > 0) {
    var count = 1;
    $("#TextBoxContainer").each(function () {
        debugger;
        var Pid = "input#PatientName" + count;
        var childdiv = "div#newtextbox" + count;
        count++;
        var patientname = $(this).closest(childdiv).children(Pid).val();           

    });
}

Answer 1

Here you go with a solution https://jsfiddle.net/p9ywL4pm/1/

 if ($("#TextBoxContainer") != null && $("#TextBoxContainer").length > 0) { var count = 1; $("#TextBoxContainer").children().each(function () { var Pid = "input#PatientName" + count; var patientname = $(this).find(Pid).val(); console.log(Pid, patientname); count++; }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="TextBoxContainer"> <div id="newtextbox1"> <div class="row cells2"> <div class="cell"> <label>Patient Name</label> <div class="input-control text full-size"> <input type="text" id="PatientName1" placeholder="Patient Name" /> </div> </div> <div class="cell"> <label>Patient ICNo</label> <div class="input-control text full-size" > <input type="text" id="PatientICNo" placeholder="Patient ICNo"/> </div> </div> </div> </div> <div id="newtextbox2"> <div class="row cells2"> <div class="cell"> <label>Patient Name</label> <div class="input-control text full-size"> <input type="text" id="PatientName2" placeholder="Patient Name"/> </div> </div> <div class="cell"> <label>Patient ICNo</label> <div class="input-control text full-size" > <input type="text" id="PatientICNo" placeholder="Patient ICNo"/> </div> </div> </div> </div> </div> 

I considered two child elements inside #TextBoxContainer container.

Change the #PatientICNo input to

<input type="text" class="PatientICNo" placeholder="Patient ICNo"/>

Use class instead of ID because ID need to unique.

Hope this will help you.

Answer 2

var arrOfValue =[];
$('.input-control text full-size [type="text"]').each(function() { arrOfValue .push($(this).val())})

The arrOfValue will have all the text, use index to get the value.