动态文本框输出

Question

我已经让JQuery使用下拉列表输出动态文本框，但我无法获取要输出的值。我会失踪什么？我错过了什么？我有一种感觉，我也需要另一个计数器来输出。

＆＃13;

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
v1<label id="v1"></label> <br> v2
<label id="v2"></label><br> v3
<label id="v3"></label><br> v4
<label id="v4"></label><br>


<div style="padding:16px;">


  v1
  <INPUT id="v1" type="text"><br> v2 <input type="text" id="v2" name="v2"> <br> v3
  <input type="text" id="v3" name="v3"><br> v4 <select id="dropdown">
  <option value="0">Select number of inputs</option>
  <option value="1">1 input</option>
  <option value="2">2 inputs</option>
  <option value="3">3 inputs</option>
  <option value="4">4 inputs</option>
</select>
  <div id="input-holder"></div>
</div>

<button id="Get">Get TextBox Value</button>


<script>
  $(':button#Get').click(function() {
    $('#v1').html($('input#v1').val());
    $('#v2').html($('input#v2').val());
    $('#v3').html($('input#v3').val());
    $('#v4').html($('input#v4').val());


  });


  $('#dropdown').change(function() {
        if ($(this).val() > 0) {
          $('#input-holder').empty();
          for (i = 1; i <= $(this).val(); i++) {
            $('#input-holder').append('Enter Info:' + < input type = "text"
              name = "v4'+i+'"
              id = "' + i +'" > ');
            }
          }
        });
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

**Id name should not repeat in a page**

v1<label id="v1"></label> <br> v2
<label id="v2"></label><br> v3
<label id="v3"></label><br> v4
<label id="v4"></label><br>


<div style="padding:16px;">
<br>
    v1
    <INPUT id="v11" type="text"><br> v2 <input type="text" id="v22" name="v2"> <br> v3
    <input type="text" id="v33" name="v3"><br> v4 <select id="dropdown">
    <option value="0">Select number of inputs</option>
    <option value="1">1 input</option>
    <option value="2">2 inputs</option>
    <option value="3">3 inputs</option>
    <option value="4">4 inputs</option>
</select>
    <div id="input-holder"></div>
</div>`

<button id="Get">Get TextBox Value</button>


<script>
    $('#Get').click(function() {

        $('#v1').html($('input#v1').val());
        $('#v2').html($('input#v2').val());
        $('#v3').html($('input#v3').val());
        $('#v4').html($('input#v4').val());


    });


    $('#dropdown').change(function() {
        if ($(this).val() > 0) {
            $('#input-holder').empty();
            for (i = 1; i <= $(this).val(); i++) {
                $('#input-holder').append('Enter Info: < input type = "text"  name = "v4'+i+'"  id = "' + i +'" > ');
            }
        }
    });
</script>

Answer 2

您的代码中存在两个错误。

1）你确实包含了jquery。 2）脚本中的语法错误。

检查其工作下面的代码。

＆＃13;

＆＃13;

  $(':button#Get').click(function() {
    $('#v1').html($('input#v1').val());
    $('#v2').html($('input#v2').val());
    $('#v3').html($('input#v3').val());
    $('#v4').html($('input#v4').val());


  });


  $('#dropdown').change(function() {
    if ($(this).val() > 0) {
      $('#input-holder').empty();
      for (i = 1; i <= $(this).val(); i++) {
        $('#input-holder').append('Enter Info:' + '< input type = "text" name = "v4'+i+'" id = "' + i +'" > ');
      }
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

v1<label id="v1"></label> <br> v2
<label id="v2"></label><br> v3
<label id="v3"></label><br> v4
<label id="v4"></label><br>


<div style="padding:16px;">


  v1
  <INPUT id="v1" type="text"><br> v2 <input type="text" id="v2" name="v2"> <br> v3
  <input type="text" id="v3" name="v3"><br> v4 <select id="dropdown">
  <option value="0">Select number of inputs</option>
  <option value="1">1 input</option>
  <option value="2">2 inputs</option>
  <option value="3">3 inputs</option>
  <option value="4">4 inputs</option>
</select>
  <div id="input-holder"></div>
</div>

<button id="Get">Get TextBox Value</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这将有效，

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
v1<label id="v1"></label> <br> v2
<label id="v2"></label><br> v3
<label id="v3"></label><br> v4
<label id="v4"></label><br>


<div style="padding:16px;">


  v1
  <INPUT id="v1" type="text"><br> v2 <input type="text" id="v2" name="v2"> <br> v3
  <input type="text" id="v3" name="v3"><br> v4 <select id="dropdown">
  <option value="0">Select number of inputs</option>
  <option value="1">1 input</option>
  <option value="2">2 inputs</option>
  <option value="3">3 inputs</option>
  <option value="4">4 inputs</option>
</select>
  <div id="input-holder"></div>
</div>

<button id="Get">Get TextBox Value</button>


<script>
  $(':button#Get').click(function() {
    $('#v1').html($('input#v1').val());
    $('#v2').html($('input#v2').val());
    $('#v3').html($('input#v3').val());
    $('#v4').html('');
    var v4Value= '';
    $('#input-holder input').each(function(i,v){
      v4Value +=$(v).val() + " " ;
    })
    $('#v4').html(v4Value);

  });


  $('#dropdown').change(function() {
          $('#input-holder').empty();
        if ($(this).val() > 0) {
          for (i = 1; i <= $(this).val(); i++) {
            $('#input-holder').append('Enter Info:' + '<input type = "text" name = "v4'+i+'" id = "' + i +'" > ');
            }
          }
        });
</script>

＆＃13;

＆＃13;

＆＃13;