如何从动态创建的div中获取文本框值

时间:2017-08-24 05:15:53

标签: javascript jquery html

我正在用html元素创建动态div,我需要获得文本框的价值 这是我动态创建的内容,现在我需要获取

<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>

这里我试图在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();           

    });
}

2 个答案:

答案 0 :(得分:1)

您可以使用解决方案https://jsfiddle.net/p9ywL4pm/1/

&#13;
&#13;
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++;
    });
}
&#13;
<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>
&#13;
&#13;
&#13;

我在#TextBoxContainer容器中考虑了两个子元素。

#PatientICNo输入更改为

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

使用class代替ID,因为ID需要唯一。

希望这会对你有所帮助。

答案 1 :(得分:0)

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

arrOfValue将包含所有文本,使用index来获取值。