jquery-serializetojson
Version:
Adds the method .serializeToJSON() to jQuery that Serialize an HTML form (familiar with ASP MVC) to a JavaScript object, supporting nested attributes and arrays.
117 lines (110 loc) • 3.75 kB
HTML
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Example of form similar to Razor (ASP MVC) -->
<form id="myForm">
<div class="form-group">
<label>Name</label>
<input type="text" name="Customer.FullName" class="form-control" />
</div>
<div class="form-group">
<label>e-mail</label>
<input type="text" name="Customer.Email" class="form-control" />
</div>
<div class="form-group">
<label>Payment</label>
<select name="Payment" class="form-control">
<option value="">Select payment...</option>
<option value="1">Credit Card</option>
<option value="2">Cash</option>
</select>
</div>
<div class="form-group">
<label>Credit Card Company</label>
<select name="CreditCardCompany" multiple class="form-control">
<option value="Company A">Company A</option>
<option value="Company B">Company B</option>
<option value="Company C">Company C</option>
</select>
</div>
<div class="form-group">
<label>New Customer?</label>
<div class="radio">
<label>
<input type="radio" name="IsNewCustomer" value="True" /> Yes
</label>
<label>
<input type="radio" name="IsNewCustomer" value="False" /> No
</label>
</div>
</div>
<div class="form-group">
<label>Marketing: </label>
<div class="checkbox">
<label>
<input type="checkbox" name="ReceiveEmailPartner" value="true" /> You agree to receive e-mail partner?
<input type="hidden" name="ReceiveEmailPartner" value="false" />
</label>
<label>
<input type="checkbox" name="ReceiveSMSPartner" value="true" /> You agree to receive SMS partner?
<input type="hidden" name="ReceiveSMSPartner" value="false" />
</label>
</div>
</div>
<table>
<thead>
<tr>
<th>Product ID</th>
<th>Name</th>
<th>Quantity</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="54457" name="Product[0].ID" class="number" /></td>
<td><input type="text" value="Smartphone" name="Product[0].Name" /></td>
<td><input type="text" value="5" name="Product[0].Quantity" class="number" /></td>
<td><input type="text" value="1,054.99" name="Product[0].Cost" class="money" /></td>
</tr>
<tr>
<td><input type="text" value="97518" name="Product[1].ID" class="number" /></td>
<td><input type="text" value="iPad" name="Product[1].Name" /></td>
<td><input type="text" value="3" name="Product[1].Quantity" class="number" /></td>
<td><input type="text" value="2,119.99" name="Product[1].Cost" class="money" /></td>
</tr>
</tbody>
</table>
</form>
<div class="clearfix">
<button type="button" id="btnSerialize" class="btn btn-primary pull-right">serializeToJSON</button>
</div>
<div class="form-group">
<label>Result</label>
<textarea id="result" class="form-control" rows="5"></textarea>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../src/jquery.serializeToJSON.js"></script>
<script type="text/javascript">
$(function(){
$("#btnSerialize").on("click", function(){
var obj = $("#myForm").serializeToJSON({
parseFloat: {
condition: ".number,.money"
}
});
console.log(obj);
var jsonString = JSON.stringify(obj);
$("#result").val(jsonString);
})
});
</script>
</body>
</html>