Interactive Form Using HTML and JQUERY

Question

I am trying to create an interactive form using HTML and JQuery. The idea is for the user to type their name, email, and comment. Then, the input from the user would be appended to an HTML paragraph and displayed on the form. I was able to create the form, but am having trouble displaying the user's input. Any help is greatly appreciated!

Here is the code I have:

$("form").submit(function(event) {
  var user_name = $('#form').find('input[name="name"]').val();
  var user_email = $('#email').val();
  var user_comment = $('#comment').val();
  $("p.feedback").append("user_name");

});

h1 {
  text-align: center;
}

.aligncenter {
  text-align: center;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<h1 style="border: 2px solid black;
        background-color: white;" " > </h1>
        <div  style = "border: 2px solid black; background-color: white; padding: 25px 50px; "">
  <h2>Biography</h2>
  <p> </p>
  <h2>Education</h2>
  <p> </p>
  <h2>Research Interests</h2>
  <p> </p>
  <h2>Contact Information</h2>
  <p> </p>
  </div>
  <form>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label><br>
    <input type="text" id="email" name="email"><br>
    <label for="comment">Comment:</label><br>
    <input type="text" id="comment" name="comment"><br>
    <input type="submit" value="Submit">
  </form>
  <p class="feedback"></p>

You never prevent the submit, so the page is unloaded. Also, I strongly advise against learning jQuery if you aren't perfectly fluid with the native DOM API yet. — connexo
– connexo, Commented Nov 21, 2020 at 4:44
How do you want to do that ? If you just want to append to the page in <p class="feedback"></p>, and you do not need to save it to a server of DB, then you could just use JS or jQuery to do that. Otherwise, you'll need to submit the form via AJAX to save to the server and to validate data, and with a success response, then append the data to the page. Either way, you are still going to use JS/Jquery to edit the DOM, like $(".feedback").html('Some Content Here"), append it to that element if you want to add multiple comments. — SScotti
– SScotti, Commented Nov 21, 2020 at 4:48
You don't want the page to refresh. Here's a simple jsfiddle that you can use to play with and copy and paste your code into. Use console.log to discover any errors with you jQuery or Javascript code. jsfiddle.net/AvCCb Here's a slightly more complex example. jsfiddle.net/darshanags/6vxMs/6 — react_or_angluar
– react_or_angluar, Commented Nov 21, 2020 at 5:09

Luan Eduardo · Accepted Answer · 2020-11-21 04:56:38Z

Try this:

$('#form').on('submit', function(e){
  e.preventDefault(); // Prevent the form to send
  $('#feedback')
    .append('<div>'+$('#name').val()+'</div>')
    .append('<div>'+$('#email').val()+'</div>')
    .append('<div>'+$('#comment').val()+'</div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 style="border: 2px solid black; background-color: white;"></h1>

<div style="border: 2px solid black; background-color: white; padding: 25px 50px;">
  <h2>Biography</h2>
  <p></p>
  <h2>Education</h2>
  <p></p>
  <h2>Research Interests</h2>
  <p></p>
  <h2>Contact Information</h2>
  <p></p>
</div>

<form id="form">
  <label for="name">Name:</label><br>
  <input type="text" id="name"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email"><br>
  <label for="comment">Comment:</label><br>
  <input type="text" id="comment"><br>
  <input type="submit" value="Submit">
</form>

<div id="feedback"></div>

Vish · Accepted Answer · 2020-11-21 04:51:15Z

0

You are using the input type as Submit. Which is used along with a form action. Which will be redirected to or directed to. So your code should be such that when the page loads, the code should execute or else use the input as a button.

Here is the fiddle which is writing the hardcoded user_name. Update the code to get the value. Go through the jQuery API.

answered Nov 21, 2020 at 4:51

Vish

346 bronze badges

Comments

s.kuznetsov · Accepted Answer · 2020-11-21 07:16:32Z

And this decision is from me. Wrap your code in ready event:

$(document).ready(function () {
   ...
});

I also used the <br> tag to wrap the value on a new line.

$(document).ready(function () {
  $("form").submit(function(event) {
    event.preventDefault();
    var user_name = $('#name').val();
    var user_email = $('#email').val();
    var user_comment = $('#comment').val();
    $("p.feedback").append("user_name: " + user_name + "<br>email: " + user_email + "<br>comment: " + user_comment);

  });
});

h1 {
  text-align: center;
}

.aligncenter {
  text-align: center;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<h1 style="border: 2px solid black;
        background-color: white;" " > </h1>
        <div  style = "border: 2px solid black; background-color: white; padding: 25px 50px; "">
  <h2>Biography</h2>
  <p> </p>
  <h2>Education</h2>
  <p> </p>
  <h2>Research Interests</h2>
  <p> </p>
  <h2>Contact Information</h2>
  <p> </p>

  <form>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label><br>
    <input type="text" id="email" name="email"><br>
    <label for="comment">Comment:</label><br>
    <input type="text" id="comment" name="comment"><br>
    <input type="submit" value="Submit">
  </form>
  <p class="feedback"></p>

Collectives™ on Stack Overflow

Interactive Form Using HTML and JQUERY

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related