Link to home
Start Free TrialLog in
Avatar of Errol Farro
Errol FarroFlag for Aruba

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
========
<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>

Open in new window



FIGURE 2
========
var data = $(this).serialize();

FIGURE 3
========
cmd=_cart&add=1&item_no=a15&item_name=can++-+tuna+for+cats&amount=8.00&discount_amount=1.00&currency_code=USD&return=+&cancel_return=+
Avatar of leakim971
leakim971
Flag of Guadeloupe image

this is no recommended if you've to send this somewhere to a new page, your data need to be escaped, so there's a reason serialize do that for you

if you really want to do it (not sure why), here a test page : https://jsfiddle.net/34bo2ddL/

    var form = $(this);
    var data = [];
    $("input:hidden[name]").each(function() {
        data.push(    $(this).attr("name") + "=" + $(this).val()    );
    });
    data = data.join("&");
    alert(data); // checking  

Open in new window

Avatar of Errol Farro

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
row?
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/
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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Many many thanks !!!!!