Web page submit button that parses current page

Question

From the following web page code:

(Don't read through it now - just skip past it and take a look at what I'm needing to grab onto from the following code then you can come back to this code.)

<table class="shop_table cart" cellspacing="0">
  <thead>
    <tr>
      <th class="product-remove">&nbsp;</th>
      <th class="product-thumbnail">&nbsp;</th>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
    </tr>
  </thead>
  <tbody>

    <tr class="cart_item">

      <td class="product-remove">
        <a href="http://dev123.MyDomain.com/cart/?remove_item=02e74f10e0327ad868d138f2b4fdd6f0&#038;_wpnonce=2eef060511" class="remove" title="Remove this item">&times;</a> 
      </td>

      <td class="product-thumbnail">
        <a href="http://dev123.MyDomain.com/product/5-htp-power/">
          <img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/2806-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2806" />
        </a>
      </td>

      <td class="product-name">
        <a href="http://dev123.MyDomain.com/product/5-htp-power/">5-HTP Power</a> 
      </td>

      <td class="product-price">
        <span class="amount">&#36;19.55</span> 
      </td>

      <td class="product-quantity">
        <div class="quantity">
          <input type="number" step="1" name="cart[02e74f10e0327ad868d138f2b4fdd6f0][qty]" value="35" title="Qty" class="input-text qty text" size="4" />
        </div>
      </td>

      <td class="product-subtotal">
        <span class="amount">&#36;97.75</span> 
      </td>
    </tr>
    <tr class="cart_item">

      <td class="product-remove">
        <a href="http://dev123.MyDomain.com/cart/?remove_item=6ea9ab1baa0efb9e19094440c317e21b&#038;_wpnonce=2eef060511" class="remove" title="Remove this item">&times;</a> 
      </td>

      <td class="product-thumbnail">
        <a href="http://dev123.MyDomain.com/product/5-w/">
          <img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/1120-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="1120" />
        </a>
      </td>

      <td class="product-name">
        <a href="http://dev123.MyDomain.com/product/5-w/">5-W</a> 
      </td>

      <td class="product-price">
        <span class="amount">&#36;19.35</span> 
      </td>

      <td class="product-quantity">
        <div class="quantity">
          <input type="number" step="1" name="cart[6ea9ab1baa0efb9e19094440c317e21b][qty]" value="104" title="Qty" class="input-text qty text" size="4" />
        </div>
      </td>

      <td class="product-subtotal">
        <span class="amount">&#36;77.40</span> 
      </td>
    </tr>
    <tr class="cart_item">

      <td class="product-remove">
        <a href="http://dev123.MyDomain.com/cart/?remove_item=c16a5320fa475530d9583c34fd356ef5&#038;_wpnonce=2eef060511" class="remove" title="Remove this item">&times;</a> 
      </td>

      <td class="product-thumbnail">
        <a href="http://dev123.MyDomain.com/product/7-keto/">
          <img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/2922-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2922" />
        </a>
      </td>

      <td class="product-name">
        <a href="http://dev123.MyDomain.com/product/7-keto/">7-Keto</a> 
      </td>

      <td class="product-price">
        <span class="amount">&#36;38.25</span> 
      </td>

      <td class="product-quantity">
        <div class="quantity">
          <input type="number" step="1" name="cart[c16a5320fa475530d9583c34fd356ef5][qty]" value="3" title="Qty" class="input-text qty text" size="4" />
        </div>
      </td>

      <td class="product-subtotal">
        <span class="amount">&#36;114.75</span> 
      </td>
    </tr>
    <tr class="cart_item">

      <td class="product-remove">
        <a href="http://dev123.MyDomain.com/cart/?remove_item=182be0c5cdcd5072bb1864cdee4d3d6e&#038;_wpnonce=2eef060511" class="remove" title="Remove this item">&times;</a> 
      </td>

      <td class="product-thumbnail">
        <a href="http://dev123.MyDomain.com/product/acidophilus/">
          <img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/1666-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="1666" />
        </a>
      </td>

      <td class="product-name">
        <a href="http://dev123.MyDomain.com/product/acidophilus/">Acidophilus</a> 
      </td>

      <td class="product-price">
        <span class="amount">&#36;15.95</span> 
      </td>

      <td class="product-quantity">
        <div class="quantity">
          <input type="number" step="1" name="cart[182be0c5cdcd5072bb1864cdee4d3d6e][qty]" value="22" title="Qty" class="input-text qty text" size="4" />
        </div>
      </td>

      <td class="product-subtotal">
        <span class="amount">&#36;31.90</span> 
      </td>
    </tr>
    <tr>
      <td colspan="6" class="actions">

        <div class="coupon">

          <label for="coupon_code">Coupon:</label>
          <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code" />
          <input type="submit" class="button" name="apply_coupon" value="Apply Coupon" />


        </div>

I need to grab onto the following items:

the 2806 part of alt="2806"

the 35 part of value="35" title="Qty"

the 1120 part of alt="1120"

the 104 part of value="104" title="Qty"

the 2922 part of alt="2922"

the 3 part of value="3" title="Qty"

the 1666 part of alt="1666"

the 22 part of value="22" title="Qty"

I have looked at this page:

Javascript: How to loop through ALL DOM elements on a page?

and this page:

http://www.w3schools.com/js/js_htmldom_nodelist.asp

and I'm in a little bit over my head.

What I need to have is some javascript code that will result in... a variable that contains the following:

<input type="hidden" name="prodnum" value="2806" />
<input type="hidden" name="prodqty" value="35" />
<input type="hidden" name="prodnum" value="1120" />
<input type="hidden" name="prodqty" value="104" />
<input type="hidden" name="prodnum" value="2922" />
<input type="hidden" name="prodqty" value="3" />
<input type="hidden" name="prodnum" value="1666" />
<input type="hidden" name="prodqty" value="22" />

I'm going to continue to struggle with this to see if I can figure it out myself but the odds are not in my favor.

Thanks for any help you can provide!

What are you trying to accomplish? If you need the values to live in javascript and you have access to the data as the page renders why not just set the values? var prodnum1 = 2806; var prodqty1 =35; etc or Use an array to hold them all? — Vladimir Ramik, Mar 10 '15 at 03:24
If you are submitting the data, the fields should be in a form. You can get all the controls in a form using its *elements* collection. So iterate over *form.elements* and collect the ones whose properties match the values you seek. — RobG, Mar 10 '15 at 03:24
I'm trying to modify a free shopping cart page that was developed by a third party. I don't really know PHP or Javascript. — user2792497, Mar 10 '15 at 13:14

score 0 · Accepted Answer · edited May 23 '17 at 12:34

You could do it using a three-dimensional javascript object:

jsFiddle Demo

var stObj = {};
$('#mybutt').click(function(){
    var cnt = 0;
    $('.shop_table tbody tr:not(:last-child)').each(function(){
        //alert( this.className );
        cnt++;
        stObj[cnt] = {};
        $this = $(this);
        var thImg = $this.find('.product-thumbnail a img').attr('alt');
        //alert(thImg);
        var prQty = $this.find('.product-quantity div input').val();
        //alert(prQty);
        stObj[cnt]['thImg'] = thImg;
        stObj[cnt]['prQty'] = prQty;
    });
    alert( JSON.stringify(stObj) );
});

Notes:

(1) Object stObj is defined globally (i.e. outside - above - the functions in which it is used)

(2) jQuery selector tr:not(:last-child) prevents trying to find alt and value in last table row

(3) In jsFiddle, the #tst div is immediately hidden by code. If visible, it just shows the code is broken without having to push any buttons.

References:

Multi-dimensional associative arrays in javascript

javascript or jquery: Looping a multidimensional object

Hi gibberish. Thanks for posting that. I took a look at it and it is definitely beyond my capabilities. I do understand a little of it and I will probably understand it more - the more I reread it. — user2792497, Mar 11 '15 at 18:50
@user2792497 You might find these resources helpful for free 10-min video tutorials - tons of em: [phpAcademy.org](https://phpacademy.org/videos/php-and-mysql-with-mysqli) and [theNewBoston.com](https://www.thenewboston.com/videos.php?cat=32) — cssyphus, Apr 03 '15 at 15:54

Web page submit button that parses current page

1 Answers1