CODEWITHSUNDEEP
javascriptjqueryhtml
Husman
Husman

Reputation: 6909

Retrieving value of form fields in Jquery

I have a form field in html that goes along the lines of:

<form id="tasklist">
  <input type="text" id="name" ...></input>
  ... more form elements here ...
</form>

Now in my jQuery code, I would like to get the value of these form elements, but I am unable to see what I'm doing wrong with the following code:

$(document).ready(function(){
  $("#tasklist").submit(function(){
    alert($("#name").val()); // This does not alert anything on form submit
  });
});

I have made sure all of my html id's are unique, the javascript code is placed at the bottom of the document, in script tags and any other alert placed there works (i.e. alert("hello world"); place before the submit method.

I have seen a few other questions like this on stackoverflow, i.e. (Jquery form field value and Retrieving the Value of an input text field in Jquery) but they do not seem to solve my problem.

Any ideas?

Upvotes: 2

Views: 208

Answers (2)

sdespont
sdespont

Reputation: 14025

You have some typos : the functions are not closed. It cause JS errors and could stop the script execution.

Try :

$(document).ready(function(){
  $("#tasklist").submit(function(){
    alert($("#name").val()); // This does not alert anything on form submit
  });
});

Update

Basic fiddle exemple : http://jsfiddle.net/UQTY2/28/

Upvotes: 1

adeneo
adeneo

Reputation: 318182

When a form is submitted, the page reloads. You need to prevent that!

$(document).ready(function(){
  $("#tasklist").on('submit', function(e){
     e.preventDefault();
     alert( $("#name").val() );
  });
});

And close the functions properly!

Upvotes: 2

Related Questions