jquery onclick set paragraph/textbox value

Question

I have unordered list of links and i am trying to get the clicked link text. So when i click on some link i would like to display in paragraph or textbox at the bottom of my list text that is cliked. So if I have something like this:

1. item1
2. item2
3. item3

If i click on item2 i would like to get it like: "You just clicked:item2 "

And i manage that with this:

jQuery(function () {
    $('a').click(function () {
        alert('Text is: ' + $(this).text());
    });
});

But that is displaying an alert message. then i do this:

jQuery(function () {
    $('a').click(function () {
        var name = $(this).text();
        $("p#selector").text(name); 
        $("input#textbox").val(name);
    });
});

And it works it send text value of a link to paragraph but it disappear really fast, it show it about second and it's gone, is there any way to prevent this? To stop it from disappearing?

Answer 1

Try this:

jQuery(function () {
    $('a').click(function (e) {
        e.preventDefault();
        var name = $(this).text();
        $("#selector").text(name); 
        $("#textbox").val(name);
    });
});

e.preventDefault() will prevent the link from doing whatever it is doing by default (which sounds like it could be refreshing the page...).

Here's a demo.

I've also amended your selectors - p#selector is inefficient, you should simply use #selector when selecting by ID, as documented in the jQuery API.

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.

EDIT: As it's become apparent that the click handler isn't what you need here, try this solution:

Parse the URL to get the current page using a jQuery URL Parser, and then find the link that corresponds to the URL and get the text:

var url = "one.htm";
var linktext = $("a[href='" + url + "']").text();
$('#output').text(linktext);

Working demo of that bit (just do the URL parsing instead of setting the URL manually).

Answer 2

Try preventing the click event from propagating after you handle it by returning false from the function.

jQuery(function() {
    $('a').click(function () {
        var name = $(this).text();
        $("p#selector").text(name); 
        $("input#textbox").val(name);
        return false;
    });
});

EDIT 1: Which is functionally identical to the answer provided by @Town, who beat me to it

EDIT 2: return false is not quite identical to .preventDefault() (which prevents the default event from occurring, but does not prevent other registered handlers from firing) or indeed .stopPropagation() (which stops event 'bubbling' and prevents handlers further up the DOM from firing). Returning false causes both but as @Town says, if the handler errors before returning, the default event will occur.

Basically... do what he said.