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" "">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="jquery-1.3.2.min.js"> </script>
<script type="text/javascript">
$('#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;
<body bgcolor="#AACCDD">
<h1><b>Form Element Access jQuery</b></h1>
<form id="myForm" method="post">
<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>


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s