Question 35637 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
    $(".inputvalue").html('HELLO <strong>' + inputval + '</strong>');

    Thank you very much.


  2. 0

    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>
    Login or Signup to reply.
  3. 0 
    $(".inputvalue strong").text(inputvalue);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search