Question

我正在使用HTML和javascript从用户那里获取一些值。我在页面上有一个input text和两个buttons。前一个button用于将input text添加到form，第二个button用于将数据发送到javascript脚本。我的代码类似于以下代码：

function add_input_function() {
  var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
  $("#container").append(html);
}

function send_function() {
  var inputs = document.getElementById("text_input");
  for (var i = 0; i < inputs; i++) {
    console.log(inputs.value);
  }
}

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
  <div id="container">
    <input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
  </div>
  <br/>
  <input onclick="add_input_function()" type="button" id="add" value="Add Input">
  <br/>
  <input onclick="send_function()" type="button" id="add" value="Send">
</form>

我想获取所有值并在控制台中显示它们，并用-分开。你能帮助我吗？（我的for循环现在不起作用）

Answer 1

为每个输入添加一些类，然后单击“发送”按钮，按类选择器获取所有元素，然后循环遍历元素以获取值

 <form method="post">
    <div id="container">
        <input class="input info" type="text" placeholder="Your text" /><br/>
    </div>
    <br/>
    <input onclick="add_input_function()" type="button" id="add" value="Add Input">
    <br/>
    <input onclick="send_function()" type="button" id="add" value="Send">
</form>

<script>
    function add_input_function() {
        var html = "<input type='text' class='info' placeholder='Your text' /><br/>";
        $("#container").append(html);
    }

    function send_function() {
        var inputText = [];
        var inputs = document.getElementsByClassName("info");
        for (var i = 0; i < inputs.length; i++) {
            console.log(inputs[i].value);
            inputText.push(inputs[i].value)
        }

        var finalContent = inputText.join(' - ');
        console.log(finalContent);
    }
</script>

Answer 2

这是另一种选择

function add_input_function() {
  var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
  $("#container").append(html);
}

function send_function() {
  let result = '';
  $('input[type="text"]').each(function(index){
     result += $(this).val() + '-';     
  });
  alert(result);
}

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
  <div id="container">
    <input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
  </div>
  <br/>
  <input onclick="add_input_function()" type="button" id="add" value="Add Input">
  <br/>
  <input onclick="send_function()" type="button" id="add" value="Send">
</form>

Answer 3

我希望这对您有帮助...

 var index=1;
 var inpidarr=[];
 inpidarr.push("text_input0")
    function add_input_function() {
   
   
        var html = "<input type=\"text\" placeholder=\"Your text\" id=\"text_input".concat(String(index))+"\"/><br/>";
        
        $("#container").append(html);
      
        inpidarr.push("text_input".concat(String(index)))
        index++;
    }

    function send_function() {
      ;
       for(i=0;i<inpidarr.length;i++)
       {
        console.log(document.getElementById(inpidarr[i]).value);
       }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form method="post">
    <div id="container">
        <input class="input" type="text" placeholder="Your text" id="text_input0"/><br/>
    </div>
    <br/>
    <input onclick="add_input_function()" type="button" id="add" value="Add Input">
    <br/>
    <input onclick="send_function()" type="button" id="add" value="Send">
</form>

使用数组获取JavaScript中的输入值

3 个答案: