JS string together text input from multiple textboxes

Question

Here is a js fiddle example:

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

How can I 'string' together the characters from each textbox to alert the word 'dogs' for instance in this example?

ZombieCode · Accepted Answer · 2014-09-07 01:44:48Z

2

Inside your #next click you can put in a foeach button to capture all the input fields.

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

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

    alert(completeString);  
});

answered Sep 7, 2014 at 1:44

ZombieCode

1,6603 gold badges25 silver badges49 bronze badges

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

Comments

Weafs.py · Accepted Answer · 2014-09-07 01:53:49Z

Try this:

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

masum7 · Accepted Answer · 2014-09-07 01:43:03Z

0

You can use each of jquery like the below.

Here is the jsfiddle: http://jsfiddle.net/w9zn9gLw/1/

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

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

      alert(str);

  });

Please mark as answer if it answers your question

answered Sep 7, 2014 at 1:43

masum7

8326 silver badges17 bronze badges

Comments

Suraz · Accepted Answer · 2014-09-07 01:48:27Z

0

looping through input text will solve this

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

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

answered Sep 7, 2014 at 1:48

Suraz

1,3091 gold badge8 silver badges10 bronze badges

Collectives™ on Stack Overflow

JS string together text input from multiple textboxes

4 Answers 4

Comments

Demo on Fiddle

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Demo on Fiddle

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related