JS将来自多个文本框的文本输入组合在一起

Question

这是一个小小的例子：

http://jsfiddle.net/YD6PL/80/

HTML：

<input type="text">
<input type="text">
<input type="text">
<input type="text">
<div>
<button class="buttons">d</button>
<button class="buttons">o</button>
<button class="buttons">g</button>
<button class="buttons">s</button>
</div>
<button id="next">Next</button>

JS：

$(document).ready(function () {

    $('input').click(function(){
        $(this).addClass('active').siblings('.active').removeClass('active')
    });

    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $('input.active').val(cntrl);

    });

      $( "#next" ).click( function() {
       alert("When user clicks next button I would like the input from all 4 textboxes strung together into a word and alerted---like 'dogs' in this example");  
      });
});

我怎样才能＆＃39;字符串＆＃39;将每个文本框中的字符放在一起，以提醒单词“狗”。例如在这个例子中？

Answer 1

在#next点击内，您可以输入一个foreach按钮来捕获所有输入字段。

$( "#next" ).click( function() {
    var completeString = "";

    $('input').each(function(){
        completeString += $(this).val();
    });

    alert(completeString);  
});

Answer 2

试试这个：

Fiddle

上的演示

HTML：

<input id="d" type="text">
<input id="o" type="text">
<input id="g" type="text">
<input id="s" type="text">
<div>
    <button class="buttons" value="d">d</button>
    <button class="buttons" value="o">o</button>
    <button class="buttons" value="g">g</button>
    <button class="buttons" value="s">s</button>
</div>
<button id="next">Next</button>

JavaScript的：

$(document).ready(function () {

    $(".buttons").click(function () {
        var cntrl = $(this).val();
        $($('input').get($(this).index())).val(cntrl);
    });

    $("#next").click(function () {
        var toAlert = $('#d').val() + $('#o').val() + $('#g').val() + $('#s').val();
        alert(toAlert);
    });
});

Answer 3

您可以使用下面的每个jquery。

这是jsfiddle：http://jsfiddle.net/w9zn9gLw/1/

$( "#next" ).click( function() {
       var str = "";
      $( ".buttons" ).each(function(  ) {

         str += $(this).html();
        });

      alert(str);

  });

如果它回答了您的问题，请标记为答案

Answer 4

循环输入文本将解决此问题

$( "#next" ).click( function() {
      var text = '';
      $.each($('input[type="text"]'),function(v,k){
        text += $(k).val();
        });
      alert(text);
  });

http://jsfiddle.net/YD6PL/85/