How to access HTML form elements’ values using jQuery


Use the following code example to access form element values;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jQueryExample</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function() {
var v_username = $('#username').attr('value');
var v_password = $('#password').attr('value');
//alert('username ==> ' + v_username);
//alert('password ==> ' + v_password);
$('#info').html("<font size=\"7\"><b>" + "#Information#" + "</b></font>").show().fadeOut(5000);
$('#span_username').html("<font size=\"5\" color=\"green\"><b> username ==> " + v_username + "</b></font>").show().fadeOut(5000);
$('#span_password').html("<font size=\"5\" color=\"red\"><b> password ==> " + v_password + "</b></font>").show().fadeOut(5000);
return false;
});
});
</script>
</head>
<body bgcolor="#AACCDD">
<h1><b>Form Element Access jQuery</b></h1>
<form id="myForm" method="post">
<table>
<tr><td><b>Username:</b></td><td><input size="50" id="username" type="text" value="tuna"/></td></tr>
<tr><td><b>Password:</b></td><td><input size="50" id="password" type="text" value="123456"/></td></tr>
<tr><td colspan="2"><input id="button" type="submit" value="Submit"/><br/><br/></td></tr>
<tr><td colspan="2"><span id="info"></span></td></tr>
<tr><td colspan="2"><span id="span_username"></span></td></tr>
<tr><td colspan="2"><span id="span_password"></span></td></tr>
</table>
</form>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s