How to accept the input from a text box and display in array format in jQuery?

Question

I have written the code of taking input value from a text box and adding it to an array using the add button and also displaying the values of the array when the display button is clicked.

The thing is I did all this using JavaScript and now I want to do it using jQuery. I tried a code snippet from this website but it's not working. Please help.

<body>
  <script src="jquery-3.3.1.js"></script>

  <input type="text" id="text1"></input>
  <input type="button" id="button1" value="Add" onclick="add_element_to_array();"></input>
  <input type="button" id="button2" value="Display" onclick="display_array();"></input>
  <div id="Result"></div>


  <script>

    var x = 0;
  var sample = [];    // <-- Define sample variable here

      function add_element_to_array(){

        $(document).on('click', '#btnSubmit', function () {
            var test = $("input[name*='i_name']");

            $(test).each(function (i, item) {
                sample.push($(item).val());
            });

            console.log(sample.join(", "));
        });

    }


    function display_array() {
        var e = "<hr/>";
        for (var y = 0; y < sample.length; y++) {
            e += "Element " + y + " = " + sample[y] + "<br/>";
        }
        document.getElementById("Result").innerHTML = e;
    }

  </script>


 </body>

Remove binding the element to event handler i.e. $(document).on('click', '#btnSubmit', function () { from add_element_to_array() method — Satpal
– Satpal, Commented Mar 15, 2018 at 6:25
The output of sample.join(",") is not coming in console.log .And also how to display. — java_jazz
– java_jazz, Commented Mar 15, 2018 at 6:29

Ankit Agarwal · Accepted Answer · 2018-03-15 06:31:02Z

You can use this code to get idea of how it should work. You can also check for non-empty value before pushing the value into the array as an empty value in array will not make any sense.

$(document).ready(function(){
var valueArray = [];
//add value in array
$('#button1').click(function(){
  var textValue = $('#text1').val();
  //push non empty value only
  if(textValue.trim() !== ''){
     valueArray.push(textValue);
     //reset the text value
     $('#text1').val('');
  }
});

//display value
$('#button2').click(function(){
  $('#Result').html(valueArray.toString());
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1"></input>
  <input type="button" id="button1" value="Add"></input>
  <input type="button" id="button2" value="Display"></input>
  <div id="Result"></div>

Saswat · Accepted Answer · 2018-03-15 06:36:52Z

I have added the jquery script considering the following as your suggested html.

<input type="text" id="text1"></input>
<input type="button" id="button1" value="Add"></input>
<input type="button" id="button2" value="Display"></input>
<div id="Result"></div>

The inptArr must be a global array.

<script>
var inptArr = [];
$('#button1').on('click',function(){
    if($('#text1').val() != '')
       inptArr.push($('#text1').val()); 
});

$('#button2').on('click',function(){
    var string = '';
    var lastIndex = parseInt(inptArr.length - 1);
    for(var i = 0; i <= lastIndex ; i++)
    {
        if(i == lastIndex)
            string += inptArr[i];
        else    
            string += inptArr[i] + ',';
    }
    $('#Result').append(string);
});
</script>

ReadyFreddy · Accepted Answer · 2018-03-15 07:00:42Z

This is another way to achieve what you want with minor changes.

You have only one text input element so don't need any each loop.

document.ready() is needed if you define script from starting of the code because at starting there is no defined element that have an id as btnSubmit so this block must wait to dom elements to be ready.

Also you don't need pure javascript code getElementById on display_array() function when you use jquery. You can change it as $("#Result").html(e);

var x = 0;
var array = [];

$(document).ready(function(){    
    $('#btnSubmit').on('click', function () {
      array.push($("#text1").val());
    });
});

function display_array() {
    var e = "<hr/>";
    for (var y = 0; y < array.length; y++) {
        e += "Element " + y + " = " + array[y] + "<br/>";
    }
    $("#Result").html(e);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1"/>
  <input type="button" id="btnSubmit" value="Add"/>
  <input type="button" id="button2" value="Display" onclick="display_array();"/>
  <div id="Result"></div>

wscourge · Accepted Answer · 2018-03-15 06:40:44Z

0

In your code functions passed to onclick attributes are binding the click event to a DOM - don't do that.

var array  = Array();
var input  = $("#text1");
var result = $("#result");

function add_element_to_array(){

  var value = input.val();
  array.push(value);
  console.log("Add:", value);
  // input.val(""); // bonus: clears input after adding text to an array

}

function display_array() {
    
  result.text(array.toString());
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1">
<input type="button" id="button1" value="Add" onclick="add_element_to_array();">
<input type="button" id="button2" value="Display" onclick="display_array();">
<div id="result"></div>

answered Mar 15, 2018 at 6:40

wscourge

11.4k17 gold badges65 silver badges87 bronze badges

3 Comments

java_jazz Over a year ago

are binding the click event to a DOM means??

wscourge Over a year ago

It means that whenever you click the button, you define what happens when the button is clicked. Kinda inception.

wscourge Over a year ago

You can notice, that I have removed $(document).on('click', '#btnSubmit', function () { parts from your functions. They define what happens when the #btnSubmit is clicked, and you call the function when it is clicked.

Collectives™ on Stack Overflow

How to accept the input from a text box and display in array format in jQuery?

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related