Question

On my form there are a few input fields, once the users entered the values into the input field and hit submit, I want the values to populate a few corresponding elements.

How can I do it using jQuery without refreshing the page?

<form method="get">
  <label for="yourName">Your name</label>
  <input name="yourName" id="yourName" type="text">
  <button type="submit">Submit</button>
</form>
<div id="result">
  <span class="rName"></span>
</div>

Some failed JS.

$('#hCardForm').submit(function() {
  var rName = $('#yourName').val();
  $('.rName').text(rName);
});

Answer 1

There are 2 things wrong with your code.
1. you don’t have an id on your form
2. you are not stopping the submit of the form.

You could change the button type equal to button instead of submit and submit the form via jquery.

jsfiddle