Question

I have a form which I wish to be be represented graphically elsewhere on the page after clicking a preview button before the form is submitted. I have written the following:

         $('#preview').click(function() {
            var title = $('#inputTitle').attr('value');
            var location = $('#inputLocation').attr('value');

            $('.title').append(title);
            $('.location').append(location);                
        })

#inputTitle is a <input type="text"> from element
.title is an <h1> tag

This seems to work but is APPEND the right thing to use? every time I click preview it just adds the value to the existing, whereas I need to somehow strip it out first (before each click) or replace it.

Thanks.

Answer 1

Use .text() or .html() instead.

Also bear in mind that using a class like .title as your selector will replace the contents of EVERY instance of that class on your page, which may not be what you want. Consider using an ID selector instead, which is guaranteed to only be matched once (or never).