Get inputs value in javascript using arrays

Question

I am using HTML and javascript to getting some values from the user. I have one input text and two buttons on the page. first button for adding input text to form and the second button for sending data to javascript script. my code is like the following code :

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>

I want to get all of the values and show them in the console and separate with -. Can you help me? (My for loop doesn't work now)

IDs have to be unique (id='text_input[]'); There's jQuery in your script, why don't you use it ($.serialize(), jQuery Learning Center)? — Andreas
– Andreas, Commented Oct 6, 2018 at 9:51

Saurabh Yadav · Accepted Answer · 2018-10-06 10:28:58Z

Add some class for each input, then when you click on send button, grab all element by class selector, and iterate loop on element to get value

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

Tu Nguyen · Accepted Answer · 2018-10-06 10:07:27Z

This is an alternative

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>

Anjan Kumar GJ · Accepted Answer · 2018-10-06 10:54:05Z

i hope it helps...

 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>

Collectives™ on Stack Overflow

Get inputs value in javascript using arrays

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related