Html Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Serialize with in Div Elements</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style>
.progress-label{ float: left; margin-left: 50%; margin-top: 5px; font-weight: bold; text-shadow: 1px 1px 0 #fff;}
</style>
</head>
<body>
<form id="formtkt" name="frmticket" action="" method="post">
<div id="booking_sales">
<p> ename: <input type="text" class="txt_f clsreadonly" name="ename" value="Way to Success For Student" readonly="readonly"></p>
<p> vname: <input type="text" class="txt_f clsreadonly" name="venuename" value="EMR Hotel" id="Venuename" readonly="readonly"></p>
</div>
<input type="hidden" name="vid1" value="testvid1" >
<input type="hidden" name="vid2" value="testvid2" >
<input type="hidden" name="vid3" value="testvid3" >
<input type="hidden" name="vid4" value="testvid4" >
<p><button class="data_save1">Save1</button></p>
<p><button class="data_save2">Save2</button></p>
</form>
<script>
$(function(){
$(".data_save1").button();
$(".data_save2").button();
$("form#formtkt").submit(function () {
return false;
});
$(".data_save1").click(function(){
var data_v = $("#booking_sales :input").serialize();
alert(data_v);
});
$(".data_save2").click(function(){
var data_v = $("#formtkt").serialize();
alert(data_v);
});
});
</script>
</body>
</html>
step 1:
Iif you need to pass the div id booking_sales input values to jquery ajax post data.
Please click the save1 button.and refer the data_save1 click function code.
just display values like as below screenshot.
Step 2:
If you need all form values pass to jquery ajax post data.
Please click the save2.and refer the data_save2 click function code.
Just display output like as below screen shot.
we are special thanks to jquery. please visit http://www.jquery.com
No comments:
Post a Comment