CODEWITHSUNDEEP
javascriptjqueryhtml
Pardis Ak
Pardis Ak

Reputation: 73

Get inputs value in javascript using arrays

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)

Upvotes: 0

Views: 74

Answers (3)

Anjan Kumar GJ
Anjan Kumar GJ

Reputation: 81

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>

Upvotes: 0

Saurabh Yadav
Saurabh Yadav

Reputation: 3386

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>

Upvotes: 1

Tu Nguyen
Tu Nguyen

Reputation: 10179

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>

Upvotes: 1

Related Questions