jquery - how to change div text after form submit

Question

i have a form to enter directions and display a google map

<form action="#" onsubmit="setDirections(this.from.value, 'address', 'en_US'); return false">

Outside the form i have the following:

Formatted Directions<div id="printdirec"><a href="http://maps.google.com/"&gt;Print Directions</a></div>

i want to change the value inside the div tag 'printdirec' to say something else

i tried this (which i thought would work) but it doesn't:

    <script type='text/javascript'>
        $(document).ready(function() {

        $(":submit").click(function(e) {
                $('div.printdirec').val('tttt')
            });

        });
</script>

any suggestions of what i am doing wrong?

Answer 1

$("div#printdirec").html("tttt");

You really should bring all of your submit-logic into the same location. No need to have it in the markup.

Answer 2

The # symbol identifies the ID of the element. Use .text() to set the inner text.

$('div#printdirec').text('tttt');

Answer 3

This line:

$('div.printdirec').val('tttt')

is looking for any divs with the class of printdirec. You'll want to refer to it by id. Also, you'll want to set the text of the div, not the value. Try this:

$('#printdirec').text('tttt');

Answer 4

It would be more reliable to handle the submit event, which gives this:

$("form#id-of-your-form").submit(function(e) {
    $('#printdirec').html('tttt');
});

See Selectors for basic selector syntax. A quick read-through should eliminate an further confusion as to how to correctly address elements.