Insert <p> element inside an input on button click using jQuery

Question

I am having a problem where I need to change the HTML inside of a <button></button>. Here are the relevant lines of HTML:

<input class="form-control" type="text" id="subject" />
<button type="button" class="btn" id="btv"><p>Text 1</p></button>
<button type="button" class="btn" id="btc"><p>Text 2</p></button>

And this is the jQuery:

$('.btn').click(function(){
    var text = $('.btn p').html();
    $('#subject').val(text);
});

All I have managed to do is make the first text show no matter which button I press. I really need a bit of help.

because you select all the elements, not the one that was clicked.... — epascarello
– epascarello, Commented Aug 30, 2017 at 19:41

Death-is-the-real-truth · Accepted Answer · 2017-08-30 19:44:15Z

First of all paragraph inside button in not valid HTML.

But in this case also you can make your code working through the use of $(this) along with .children() like below:-

$(document).ready(function(){
  $('.btn').click(function(){
    $('#subject').val($(this).children('p').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control" type="text" id="subject" />
<button type="button" class="btn" id="btv"><p>Text 1</p></button>
<button type="button" class="btn" id="btc"><p>Text 2</p></button>

Note:-

Make sure that jQuery library added before your script code.

If you are adding your script code on top of page then it should be wrapped inside $(document).ready(function(){..});, but if you are adding script code at the bottom of the page then it's not necessary (in both case jQuery library need to be added before code)

A valid HTML example is like below:-

$('.btn').click(function(){
  $('#subject').val($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="form-control" type="text" id="subject" />
<button type="button" class="btn" id="btv">Text 1</button>
<button type="button" class="btn" id="btc">Text 2</button>
</body>

DCR · Accepted Answer · 2017-08-30 19:33:39Z

1

$('.btn').click(function(){
var text = $(this).html();
$('#subject').val(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="form-control" type="text" id="subject" />
<button type="button" class="btn" id="btv">Text 1</button>
<button type="button" class="btn" id="btc">Text 2</button>
</body>

answered Aug 30, 2017 at 19:33

DCR

15.8k13 gold badges61 silver badges131 bronze badges

Comments

pheaselegen · Accepted Answer · 2017-08-30 19:30:34Z

0

$('#subject').val( $(this).text() )

answered Aug 30, 2017 at 19:30

pheaselegen

3981 gold badge4 silver badges16 bronze badges

1 Comment

altschuler Over a year ago

Code-only answers are often unhelpful in pointing to why your solution is helpful. Please include an explanation for why your code solves the issue.

Maxwell s.c · Accepted Answer · 2017-08-30 19:32:58Z

0

Use text and context

$('.btn').click(function(){
    $('#subject').val($(this).text());
});

answered Aug 30, 2017 at 19:32

Maxwell s.c

1,69816 silver badges31 bronze badges

Collectives™ on Stack Overflow

Insert <p> element inside an input on button click using jQuery

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related