How to get the input field Value and put it in a paragraph?

Question

I want to get the value of an input field and put the value in between a paragraph and a <strong></strong> tag.

$(document).ready() {
  $("#submit").on("click", function() {
    let inputval = $("#name").val();
    $(".inputvalue").val(inputval);
  })
}

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <title>jQuery</title>
</head>

<body>
  <header>
    <h1>Jquery</h1>
  </header>
  <main>
    <section>
      <label for="name">Name</label>
      <input type="text" id="name">
      <input type="submit" id="submit">
      <p class="inputvalue">Hallo <strong>here goes the value of the input field</strong></p>
  </main>
  <link rel="stylesheet" href="/lib/css/styleswebd06.css">
  <script src="/lib/jquery.min.js"></script>
  <script src="/lib/js/appwebd06.js"></script>
</body>

</html>

i tried to get the value of the input field #name in class .inputvalue to geht the text hallo inputvalue

`type="submit"` only makes sense when there's something to submit -> a `
` — Andreas, Jan 04 '23 at 14:49

score 0 · Answer 1 · answered Jan 04 '23 at 14:38

Could you try this :

$(document).ready()
{

    $("#submit").on("click", function () {
        let inputval = $("#name").val();
        $(".inputvalue").html('HELLO <strong>' + inputval + '</strong>');
    })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="de">
<head>  
    
    
    

    <meta charset="UTF-8">
    <title>jQuery</title>

</head>
<body>
<header><h1>Jquery</h1></header>
<main>
    <section>
        <label for="name">Name</label>
        <input type="text" id="name">
        <input type="submit" id="submit">
        <p class="inputvalue">Hallo <strong>here goes the value of the input field</strong></p>
</main>
<link rel="stylesheet" href="/lib/css/styleswebd06.css">
    <script src="/lib/jquery.min.js"></script>
        <script src="/lib/js/appwebd06.js"></script> 

</body>
</html>

score 0 · Answer 2 · edited Jan 04 '23 at 14:44

0

$(".inputvalue strong").text(inputvalue);

edited Jan 04 '23 at 14:44

freedomn-m

27,664
8
35
57

answered Jan 04 '23 at 14:44

Faissal Wahabali

42
1
2

1

While this is technically correct, it could do with an explanation and, ideally, an updated snippet - use "copy snippet to answer" button and add your code along with an explanation. – freedomn-m Jan 04 '23 at 14:46

score -1 · Answer 3 · edited Jan 04 '23 at 16:06

-1

$(".inputvalue").html('HELLO <strong>' + inputval + '</strong>');

Thank you very much.

edited Jan 04 '23 at 16:06

Tyler2P

2,324
26
22
31

answered Jan 04 '23 at 14:55

silence1979g

11
1

How to get the input field Value and put it in a paragraph?

3 Answers3