How to change
tag content in input box value?

Question

I have a one word <p>, and I'm looking to change the content of that paragraph to the value of a input box. It's really simple but I'm new to JavaScript and jQuery. This is the paragraph to change

<p class="editor-example" id="screen-name">Name</p>

and this is the form and the button I'm using to get and apply the change

<form id="info">                    
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>

Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!

You should try coding yourself first instead of ask for code. Hint: `$('#nameID').on('change', function() { ... });` — Chaska, Aug 02 '18 at 05:21
Possible duplicate of [Change paragraph text dynamically with jQuery?](https://stackoverflow.com/questions/3441699/change-paragraph-text-dynamically-with-jquery) — dev_ramiz_1707, Aug 02 '18 at 05:21

score 0 · Accepted Answer · answered Aug 02 '18 at 05:21

Put the button inside the form and add an event listener to it. Then grab the value from the input and use innerHTML to replace the content inside p tag

document.getElementById('apply').addEventListener('click', function() {
  document.getElementById('screen-name').innerHTML = document.getElementById('nameID').value.trim()
})

<p class="editor-example" id="screen-name">Name</p>


<form id="info">
  <input id="nameID" name="name" type="text" size="20">
  <button id="apply" type="button">Apply</button>
</form>

score 0 · Answer 2 · answered Aug 02 '18 at 05:21

You need to write keypress event for the text box

$("#text").keypress(function() {
  $("#p").html($("#text").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">p</p>
Please change the value of imput to change p: <input id="text"></input>

Sanoj_V · Answer 3 · 2018-08-02T05:40:51.367

As you said:

Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!

In Jquery:

$(document).ready(function(){
   $('#nameID').keyup(function(){
      $('#screen-name').text($(this).val());
    });
});

In html:

<p class="editor-example" id="screen-name">Name</p>
<form id="info">                    
    <input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>

Cryptex Technologies · Answer 4 · 2018-08-02T05:34:19.033

You can do like this:

$(document).ready(function(){
   $("#nameID").keyup(function(){  
   var name = $("#nameID").val();
   $("#screen-name").text(name);
    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="editor-example" id="screen-name">Name</p>

<form id="info">                    
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>

score 0 · Answer 5 · answered Aug 02 '18 at 06:06

$("#apply").click(function() {
   $("#paragraph").text($("#nameID").val());
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<p id="paragraph">This Text changes from the form below</p>
<form>                    
  <input id="nameID" type="text" >
  <button id="apply" type="button">Apply</button>
</form>

How to change tag content in input box value?

5 Answers5

How to change
tag content in input box value?