CODEWITHSUNDEEP
javascriptjquery
Drew
Drew

Reputation: 524

Store data on page to variables using Javascript/JQuery

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.

Upvotes: 0

Views: 160

Answers (1)

A.M.N.Bandara
A.M.N.Bandara

Reputation: 1508

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();
}

Upvotes: 1

Related Questions