Errol Farro
asked on
JQuery serialize and unserialize
I have the below section of an HTML (figure 1).
When the submit button is pressed , jquery in figure 2 is invoked
The result of field data is show in figure 3.
Question: How can I get rid of the "filler fields" in item_name. I would like to get item_name as "can - tuna for cats"
FIGURE 1
========
FIGURE 2
========
var data = $(this).serialize();
FIGURE 3
========
cmd=_cart&add=1&item_no=a1 5&item_nam e=can++-+t una+for+ca ts&amount= 8.00&disco unt_amount =1.00&curr ency_code= USD&return =+&cancel_ return=+
When the submit button is pressed , jquery in figure 2 is invoked
The result of field data is show in figure 3.
Question: How can I get rid of the "filler fields" in item_name. I would like to get item_name as "can - tuna for cats"
FIGURE 1
========
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<a href="single.html"><img src="images/57.png" alt=" " class="img-responsive" /></a>
<p>can - tuna for cats (400 gm)</p>
<h4>$8.00 <span>$10.00</span></h4>
</div>
<div class="snipcart-details">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" value="1" min="1" />
<input type="number" name="add" id="add" value="1" min="1"/>
<input type="hidden" name="item_no" value="a15" />
<input type="hidden" name="item_name" value="can - tuna for cats" />
<input type="hidden" name="amount" value="8.00" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
FIGURE 2
========
var data = $(this).serialize();
FIGURE 3
========
cmd=_cart&add=1&item_no=a1
ASKER
Your solution is very close to what I am looking.
Your solution currently stores ALL the rows in the table in data.
I just need to store row that was clicked on in data
Your solution currently stores ALL the rows in the table in data.
I just need to store row that was clicked on in data
row?
ASKER
I need to retrieve the content of the table's row which was clicked on.
please share a link to your page or create a test page here : https://jsfiddle.net/
ASKER
Below please find full code. As you may see, as soon ast the "ADD TO CART" button is pressed, the jquery reads the whole HTML. I just need the entry of which ADD TO CART button was pressed.
<html lang="en">
<head>
<title>Leisure Link Upload</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
</head>
<body>
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<a href="single.html"><img src="images/57.png" alt=" " class="img-responsive" /></a>
<p>can - tuna for cats (400 gm)</p>
<h4>$8.00 <span>$10.00</span></h4>
</div>
<div class="snipcart-details">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" value="1" min="1" />
<input type="number" name="add" id="add" value="1" min="1"/>
<input type="hidden" name="item_no" value="a15" />
<input type="hidden" name="item_name" value="can - tuna for cats" />
<input type="hidden" name="amount" value="8.00" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<a href="single.html"><img src="images/58.png" alt=" " class="img-responsive" /></a>
<p>junior pet food (90 gm)</p>
<h4>$5.00 <span>$6.00</span></h4>
</div>
<div class="snipcart-details">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="number" name="add" id="add" value="1" min="1"/>
<input type="hidden" name="item_no" value="b20" />
<input type="hidden" name="item_name" value="Junior Pet Food" />
<input type="hidden" name="amount" value="5.00" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<a href="single.html"><img src="images/4.png" alt=" " class="img-responsive" /></a>
<p>dogs food - junior (4 Kg)</p>
<h4>$9.00 <span>$11.00</span></h4>
</div>
<div class="snipcart-details">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="number" name="add" id="add" value="1" min="1"/>
<input type="hidden" name="item_no" value="c30 " />
<input type="hidden" name="item_name" value="dogs food - junior" />
<input type="hidden" name="amount" value="9.00" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</body>
<script>
$(function() {
$('form').submit(function(e) {
var form = $(this);
var data = [];
$("input:hidden[name]").each(function() {
data.push( $(this).attr("name") + "=" + $(this).val() );
});
data = data.join("&");
alert(data);
console.log("data", data);
});
});
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Many many thanks !!!!!
if you really want to do it (not sure why), here a test page : https://jsfiddle.net/34bo2ddL/
Open in new window