CODEWITHSUNDEEP
jqueryhtmlcsslaravel
Vahn Marty
Vahn Marty

Reputation: 1478

How to transfer text from button to textbox, Using Jquery ? [code provided]

My original code was in a laravel blade format. and this is the code :

  <div class="text-center textbox">
      @for($i=0 ; $i<$data->length ; $i++)
      <input type="text" name="txt{{$i+1}}"  id="txt{{$i+1}}">
      @endfor
    </div>

    <div class="text-center char-btn">
      @for($i=0 ; $i<$data->length ; $i++)
      <button type="button" name="charbutton" id="charbutton" class="btn btn-success">{{$data->shuffle[$i]}}</button>
      @endfor
    </div>

To provide the view, here's the html view.

$(document).ready(function() {
    $('button[name=charbutton]').click(function() {
      var string = $(this).text();
      console.log(string);
      addText(string);
     $(this).prop('disabled', true);
    });
});

var length = 5;

function addText(string)
{
  var i;
  for(i=1; i<= length; i++)
  {
    var inp = $('input[type=text]').val();

    if(inp == '')
    {

       $('input[type=text]').val(string);
      i = length + 1;
    }
    else{
      console.log ('else');
    }
  }
}
input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    width: 20px;
}

.textbox{
      margin: 30px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center textbox">
    <input type="text" name="txt1"  id="txt1">
    <input type="text" name="txt2"  id="txt2">
    <input type="text" name="txt3"  id="txt3">
    <input type="text" name="txt4"  id="txt4">
    <input type="text" name="txt5"  id="txt5">
    
    </div>

    <div class="text-center char-btn">
   
      <button type="button" name="charbutton" id="charbutton" class="btn btn-success">o</button>
      <button type="button" name="charbutton" id="charbutton" class="btn btn-success">t</button>
      <button type="button" name="charbutton" id="charbutton" class="btn btn-success">h</button>
      <button type="button" name="charbutton" id="charbutton" class="btn btn-success">m</button>
      <button type="button" name="charbutton" id="charbutton" class="btn btn-success">u</button>
    
    </div>

my problem is how to fix this (when you click a letter, all textbox will be replaced by same letter).

Upvotes: 0

Views: 153

Answers (1)

Rounin
Rounin

Reputation: 29511

In jQuery,

$('input[type=text]')

is the entire node collection.

It's the equivalent of

document.querySelectorAll('input[type=text]')

If you want to examine each element, one at a time:

document.querySelectorAll('input[type=text]')[0]
document.querySelectorAll('input[type=text]')[1]
document.querySelectorAll('input[type=text]')[2]

etc.

then you need the .eq(index) method in jQuery:

$('input[type=text]').eq(0)
$('input[type=text]').eq(1)
$('input[type=text]').eq(2)

Working Example:

$(document).ready(function() {

    $('button[name^=charbutton]').click(function() {
      var string = $(this).text();
      console.log(string);
      addText(string);
     $(this).prop('disabled', true);
    });

var length = 5;

function addText(string) {

  for (var i = 0; i < length; i++) {
    var inp = $('input[type=text]').eq(i).val();

    if (inp === '') {
       $('input[type=text]').eq(i).val(string);
       break;
    }
  }
}

});
input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    width: 20px;
}

.textbox{
      margin: 30px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="text-center textbox">
<input type="text" name="txt1"  id="txt1">
<input type="text" name="txt2"  id="txt2">
<input type="text" name="txt3"  id="txt3">
<input type="text" name="txt4"  id="txt4">
<input type="text" name="txt5"  id="txt5">
</div>


<div class="text-center char-btn">
<button type="button" name="charbutton1" id="charbutton0" class="btn btn-success">o</button>
<button type="button" name="charbutton2" id="charbutton1" class="btn btn-success">t</button>
<button type="button" name="charbutton3" id="charbutton2" class="btn btn-success">h</button>
<button type="button" name="charbutton4" id="charbutton3" class="btn btn-success">m</button>
<button type="button" name="charbutton5" id="charbutton4" class="btn btn-success">u</button>
</div>

Upvotes: 1

Related Questions