javascript - 如何使用 Javascript 从两个文本框获取值并在单击按钮时显示在第三个文本框中？

Question

我有两个组，每个组都有两个文本框。现在我想要获取所有文本框的值并以这种格式显示在第三个:2个苹果，3个西瓜

我会用例子更好地解释:

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

这是简单的 html 代码:

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

我尝试这样做，并且仅适用于文本框 1，我不知道如何在 JavaScript 中添加第二个文本框。

$(function () {

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

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


            });
        });

Answer 1

如果您以不同的方式命名每个输入，则可以以更简单的方式完成。像这样:

HTML 代码:

<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);
    });
});