Using HTML from values in javascript objects

Question

Hope someone can help. I am trying to build a small storefront for a test website and need to get the form values into a javascript object constructor. There are six items on the storefront and I have created a separate from for each one, to give size, quantity, price, product name and product code. How do I get the values entered into the form into variables in javascript so that I can use them in an object constructor. As this is a test form it will not be posted to a server, hence why I need to use javascript to process the order details. Hope you can help as I am pulling my hair out here. Thank you.

<form id="beanieOrderForm" name="beanieForm" action="">
            <input type="hidden" id="beaniePrice" value="15.99">
            <input type="hidden" id="beanieName" value="The Shack Beanie">
            <input type="hidden" id="beanieCode" value="SCSBEA01">
    <h3 class="productHeading">The Beanie</h3>
    <p class="productPrice">£15.99</p>

        <p>Size: 
        <select id="beanieSize">
            <option value="oneSize">One Size</option>
        </select>
        </p>
        <p>Quantity:
        <select id="beanieQuantity">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>              
        </select>
        </p>
        <p>
        <input type="button" class="shoppingButton" value="Add to Basket" onClick="processOrder">
        </p>
        </form>

Possible duplicate of [How can I get form data with JavaScript/jQuery?](https://stackoverflow.com/questions/2276463/how-can-i-get-form-data-with-javascript-jquery) — Gaurav, Dec 31 '17 at 18:23

score 0 · Answer 1 · answered Dec 31 '17 at 18:44

You need to use a method in the form action to call a function that retrieves the values using DOM methods that retrieve the values of the fields of the form by name. You also need to add a submit input that calls a function to process the form. You haven’t added a name attribute. A form by default already stores the user input, you just have to write functions to retrieve the values and store them

Using HTML from values in javascript objects

1 Answers1