jQuery get input value on button click

Question

How to make input value showing every input on button click without deleting the previous input ?

$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val();
    $("p").html(getVal);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p></p>
</div>

@AndrewL., check the question again. He wants to add the value without deleting the old value. — Dekel
– Dekel, Commented Sep 4, 2016 at 0:07

Dekel · Accepted Answer · 2016-09-04 00:06:49Z

You have two options:

Add the content to the previous content:

$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val();
    $("p").html($("p").html() + " " + getVal);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p></p>
</div>

Use append instead of html:

$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val();
    $("p").append(getVal);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p></p>
</div>

You usage of html overrides the content of the p element.

Andrew Li · Accepted Answer · 2016-09-04 00:09:34Z

2

Did you mean, append value as a history of values?

If yes, append() is the answer for it.

$(document).ready(function() {
    $("#btn").click(function() {
        var getVal = $("#inputValue").val();
        $("p").append(getVal);
    });
});

Know more on it here, http://api.jquery.com/append/

edited Sep 4, 2016 at 0:09

Andrew Li

58.1k14 gold badges136 silver badges150 bronze badges

answered Sep 4, 2016 at 0:08

ameenulla0007

2,6831 gold badge15 silver badges15 bronze badges

Comments

Hugolpz · Accepted Answer · 2020-09-24 11:30:51Z

1

Use append instead of html

$(document).ready(function(){
    $("#btn").click(function(){
        var getVal = $("#inputValue").val();
        $("p").append(getVal); <--- CHANGE HERE
    });
});

append html

edited Sep 24, 2020 at 11:30

Hugolpz

18.4k29 gold badges106 silver badges193 bronze badges

answered Sep 4, 2016 at 0:04

Lyubomir

20.1k6 gold badges59 silver badges71 bronze badges

Comments

MMezlini · Accepted Answer · 2020-09-24 13:26:16Z

0

It's recommanded to add ID to the p tag and seperate values with a space

$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val() + " " ;
    $("#showInputValue").append(getVal);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p id="showInputValue"></p>
</div>

edited Sep 24, 2020 at 13:26

answered Sep 24, 2020 at 11:46

MMezlini

1631 silver badge14 bronze badges

Collectives™ on Stack Overflow

jQuery get input value on button click

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related