Store data on page to variables using Javascript/JQuery

Question

So I am trying to store data to variables on the page when a button is clicked, there are multiple buttons and it needs to store data for that specific button. Each one of these buttons is nested inside a <form onsubmit></form> all the data I need to extra is within this form in different <input> and <div> tags. So using javascript or jquery how can I select the value of a specific and tag. So when the button is clicked on it adds this product to the cart, I want to take the productNumber, price, and quantity and store them to my own variables. When the button is clicked the forum calls onsubmit="ShoppingCartAddAJAX( this ); so I want to store this data in the ShoppingCartAddAJAX function.

Here is what one of the forms on the page looks like.

<form method="post" name="addtocart-501" onsubmit="ShoppingCartAddAJAX( this ); return false;">
    <input type="hidden" name="formName" value="ShoppingCartAddAJAX" />
    <input type="hidden" name="productNumber" value="758201" />
    <input id="qtyproduct" type="hidden" class="hiddenqty" name="dmst_Qty_2805" value="1" />
                    <div class="price">  
                        <div class="pricenew singleprice">
                            $7.99
                        </div>
                    </div>
                </a>

            </div>
        </div>
    </li>
</form>

So I have been trying to get this data by doing something like this.

var pn = $('input[name$="productNumber"]').val();
var qty = $('input[id$="qtyproduct"]').val();

In my javascript file the function looks something like this:

function ShoppingCartAddAJAX(formElement, productNumber) {

var pn = $('formElement.input[name$="productNumber"]').val();
var aa = $('formElement[name$="productNumber"]').val();
var qty = $('input[id$="qtyproduct"]').val();
}

But with alot more code... just showing that the function is passing in formElement and a productNumber.

But this is giving me the product number and quantity of the first product on the page, I need the data for which ever button the user decides to click on and there are multiple ones on the page not just one. I hope that when the button is clicked and that function is fired there is a way to look what forum it came from and then extract that data. I would also like to be able to get the price but it is stored in <div class="pricenew singleprice"> $7.99</div>.

Any help is greatly appreciated.

Hey! alt is not a valid a attribute! (So I've removed it while formatting your HTML indentation) — Roko C. Buljan
– Roko C. Buljan, Commented Dec 7, 2014 at 6:24
According to your onsumbmit attribute(in the form), your function can accept only one parameter. — A.M.N.Bandara
– A.M.N.Bandara, Commented Dec 7, 2014 at 6:24

A.M.N.Bandara · Accepted Answer · 2014-12-07 07:22:03Z

1

You are getting the product number and quantity of the first record since you have multiple input fields in the form with the name of productNumber(according to your description). So what basically happens here is when you call $('input[name="productNumber"]').val() jquery returns you the value of the first input field. Instead of that, do something like this inside your ShoppingCartAddAJAX function.

function ShoppingCartAddAJAX(form)
{
    // Find child an element inside our form with the id of "qtyproduct"
    // I used "find("#qtyproduct")" method so it searches anything nested inside your specific form element
    // You can use "children("#qtyproduct")" method also

    var qty = $(form).find("#qtyproduct").val();
    var pn  = $(form).find("input[name='productNumber']").val();
    var pp  = $(form).find(".pricenew.singleprice").text();
}

edited Dec 7, 2014 at 7:22

answered Dec 7, 2014 at 6:19

A.M.N.Bandara

1,50815 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Drew Over a year ago

So for the product number and quantity I got it to work using: var pn = $(formElement).find('input[name$="productNumber"]').val(); var qty = $(formElement).find('input[id$="qtyproduct"]').val(); Now how can I select the price out of that div? Btw thanks! <div class="pricenew singleprice"> $7.99</div>

Drew Over a year ago

My guess would be var pp = $(formElement).find('div.pricenew singleprice');

A.M.N.Bandara Over a year ago

I've updated my answer. Try visiting this link to learn more about Jquery selectors. api.jquery.com/category/selectors

Drew Over a year ago

When I use var pp = $(formElement).find(".pricenew.singleprice").val(); and $(formElement).find(".pricenew.singleprice"); I get this [prevObject: m.fn.init[8], context: document, jquery: "1.11.1", constructor: function, selector: ""…]

Collectives™ on Stack Overflow

Store data on page to variables using Javascript/JQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related