How to get values from two textboxes and display on third on button click using Javascript?

Question

I two groups and every group have two textboxes. Now I want get values of all text boxes and display in third in this format: 2 apple, 3 watermelon

I will explain better with example:

I want this:

Group 1
Textbox1 = 2
Textbox2 = apple

Group 2
Textbox1 = 3
Textbox2 = watermelon

and third should looks like this:
Textbox3 = 2 apple, 3 watermelon

This is simple html code:

<input type="text" name="text1"><br />
<input type="text" name="text2"><br />

<br/><br/>

<input type="text" name="text1"><br />
<input type="text" name="text2"><br />

<input type="submit" value="Add" id="getValue">

<br /><br />
<input type="text" id="text3" />

I have tried to do like this, and works only with textbox 1, I don't know how to add second textbox in javascript.

$(function () {

            $('#getValue').click(function() {
                $('#text3').val('');
                var values = [];

                $('input[name="text1"]').each(function(i, elem) {
                    $("#text3").val(($("#text3").val() + ', ' + $(elem).val()).replace(/^, /, ''));
                });


            });
        });

Rio Hilmy · Accepted Answer · 2019-10-20 18:13:59Z

2

It could be done in a simpler way if you name each input differently. Like this:

HTML code:

<input type="text" name="group1-text1"><br />
<input type="text" name="group1-text2"><br />

<br/><br/>

<input type="text" name="group2-text1"><br />
<input type="text" name="group2-text2"><br />

<input type="submit" value="Add" id="getValue">

<br /><br />
<input type="text" id="text3" />

Javascript:

$(function () {
    $('#getValue').click(function() {
        let group1 = $('input[name="group1-text1"]').val() + ' ' + $('input[name="group1-text2"]').val();
        let group2 = $('input[name="group2-text1"]').val() + ' ' + $('input[name="group2-text2"]').val();
        let text3 = group1 + ', ' + group2;
        $('#text3').val(text3);
    });
});

answered Oct 20, 2019 at 18:13

Rio Hilmy

6505 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

symlink · Accepted Answer · 2019-10-20 18:13:56Z

1

$(function() {
  $('#getValue').click(function() {
    let finalStr = "";
    let val;
    $('input.inputText').each(function(i, elem) {
      val = $(elem).val().replace(",", "");
      if (val) {
        val = (!(i % 2) && (i > 0)) ? ", " + val: " " + val;
        finalStr += val;
      }
      $("#text3").val(finalStr.trim());
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="text1" class="inputText"><br />
<input type="text" name="text2" class="inputText"><br />

<br/><br/>

<input type="text" name="text1" class="inputText"><br />
<input type="text" name="text2" class="inputText"><br />

<input type="submit" value="Add" id="getValue">

<br /><br />
<input type="text" id="text3" />

answered Oct 20, 2019 at 18:13

symlink

12.2k7 gold badges31 silver badges57 bronze badges

1 Comment

Aleksandar Milosevic Over a year ago

Thanks, this is what I was looking for. This works with dynamic table too.

Collectives™ on Stack Overflow

How to get values from two textboxes and display on third on button click using Javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related