Difference between val() and text()

Question

What the difference between jQuery\'s functions val() and text()?

Where would you use one over the other?

Answer 1

.val() function returns value from input element and .text() function returns value from other than input elements. We can also pass string argument to these functions to set the value of the calling element. Below code shows how to set value to DOM elements using .val() and .text() functions:

HTML Part:

Click the "Submit Query" to see it work

Jquery Part:

$(document).on("submit", "form", function (e) {
    $("#first").val("This input is set by .val() function");
    $("#second").text("A new text is set using .text() function!");
    return false;
})

Demo: http://jsfiddle.net/urhys9zj/6/