Using jQuery to update a span element with form input data but its not updating

Question

I have an h2 element which has styled content (css) inside this I also have a span element called highlight. I want to update this with a text input on the submit button being clicked.

the result I get (on click) is the original text clears out, then is refreshed into the span again so it still shows "John Smith".

//index.html
<span id="highlight">John Smith</span>
<form action="" class="form-inline">
   <input id="name" type="text" placeholder="Enter name" size="35">
   <input type="submit" value="Submit" class="button-btn">
</form>

//app.js 
$(function(){
    let name = $('#name').val();
    $('.button-btn').click(function(){
        $('#highlight').text(name);
    });
});

Its getting frustrating as I think I am doing it right, but obviously not. Thank you in advance for a resolution.

Mamun · Accepted Answer · 2020-03-09 03:14:22Z

2

The reason is you are taking the value of the input element on page load and the value is empty. You should take the value from the input inside the click event handler function:

$(function(){
  console.log($('#name').val() === ""); //true
  $('.button-btn').click(function(e){
    let name = $('#name').val();
    $('#highlight').text(name);
    e.preventDefault(); // prevented the submission of the form for demo
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="highlight">John Smith</span>
<form action="" class="form-inline">
   <input id="name" type="text" placeholder="Enter name" size="35">
   <input type="submit" value="Submit" class="button-btn">
</form>

answered Mar 9, 2020 at 3:14

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jones Over a year ago

Thanks for your help. works great! not sure about e.preventDefault() but will google it

Mamun Over a year ago

@Jones, you are most welcome, I have added that for demo purpose to stay on the same page, you can find more on that ....developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Jones Over a year ago

Thank you helped greatly. My functionality is working great.

Collectives™ on Stack Overflow

Using jQuery to update a span element with form input data but its not updating

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related