CODEWITHSUNDEEP
javascriptjquery
Elixir
Elixir

Reputation: 287

Button values in single textarea

In my code

<script>
$(document).ready(function(){
    $("#btn").on('click', function() {
        var caretPos = document.getElementById("txt").selectionStart;
        var textAreaTxt = $("#txt").val();
        var txtToAdd = $("#btn").val();
        $("#txt").val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
    })
});
</script>

HTML

<textarea id="txt" rows="15" cols="70"></textarea>
<input type="button" id="btn" value="OK" />
<input type="button" id="btn" value="Bye" />
<input type="button" id="btn" value="TC" />

I want to give these values in textarea. But it is only giving value of Ok button. How I can give each button values in textarea

Upvotes: 1

Views: 682

Answers (5)

Elixir
Elixir

Reputation: 287

<textarea name="insert" rows="5" cols="30" id="insert" onblur="myFunction()"></textarea>
<button class="myvalue" id="myvalue">Ok</button>
    <button class="myvalue" id="myvalue">Bye</button>
    <button class="myvalue" id="myvalue">Tc</button>
<script>
function insertAt (myField, myValue, startSel, endSel)
 {
if (startSel || startSel == '0') {
    var startPos = startSel;

    var endPos = endSel;

    myField.val(myField.val().substring(0, startPos)+ myValue+ myField.val().substring(endPos, myField.val().length));

  }`  else {
  myField.val() += myValue;
  }`}var targetBox = $('textarea#insert'),
startSel, 
endSel;`targetBox.bind('focusout', function() {
startSel = this.selectionStart;
endSel = this.selectionEnd;
});

$(".myvalue").click(function() {
    var myValue = $(this).text();
    insertAt(targetBox, myValue, startSel, endSel);

});    
</script>

Finally It Works

Upvotes: 1

Arunprasanth K V
Arunprasanth K V

Reputation: 21901

try this html

<textarea id="txt" rows="15" cols="70"></textarea>
<input type="button" id="btn" value="OK" />
   <input type="button" id="btn" value="Bye" />
   <input type="button" id="btn" value="TC" />

javascript

 $('input#btn').click(function() 
    { 
       $('#txt').val($('#txt').val()+this.value); // append the value of each button
    })

Demo here

Upvotes: 1

Sadikhasan
Sadikhasan

Reputation: 18600

My suggestion to you change button id to class because id is unique for each element so you have to use class instead of id.

$("input.btn").on('click', function() {
    $("#txt").val($("#txt").val()+$(this).val());
})

Demo

Upvotes: 0

allnodcoms
allnodcoms

Reputation: 1262

All your buttons have the same 'id', and 'OK' is the first one, so that's the one that's being returned...

To get the value of the button that's clicked you'd need to give each one a unique id (which should be the case anyway).

I would put your buttons in a separate container, probably a div, and apply the click handler to that. In the handler function, see if the event target has a value attribute, and if it has, send it to your textbox.

Or you could give each button a handler, it depends on your circumstances...

Danny

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

You have the same id on elements. ID's must be unique. You can use class and end to this:

$(".btn").on('click', function() {
  $("#txt").val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txt" rows="5" cols="10"></textarea>
<input type="button" class="btn" value="OK" />
<input type="button" class="btn" value="Bye" />
<input type="button" class="btn" value="TC" />

Upvotes: 4

Related Questions