Cannot read value form element with JQuery/Javascript

Question

I cannot get the value of a form element, even though from other similar questions this is supposed to work.

FYI - I have a function that writes 2 id's (#selected_sign & #selected_sign_form) to an article and a form nested in the article - this is purely for styling/identification purposes.

Here is the function that fails to get the element value based on the assigned IDs:

var sSize_prices= new Array();
sSize_prices["45"]=45; //per sq ft
sSize_prices["60"]=65; //per sq ft

function getSizePrice() {
var getSizePrice=0;

var theForm = document.forms["selected_sign_form"];
var selectedSize = theForm.elements["os0"];
alert(selectedSize.value);

getSizePrice = sSize_prices[selectedSize.value];

return getSizePrice;
}

Here is the HTML markup containing the ID'd article and form:

<section class="sign_type">
    <h3>Selection</h3>
    <article class="signs" onclick="calculateTotal()" id="selected_sign">
      <figure class="sample">
        <a href="/cat/s1b.png" rel="lightbox" title="Sign preview">
          <img class="sign_preview" src="/cat/s1.png" alt="Sign preview" title="Sign preview" />
        </a>
      </figure>
      <form action="" class="options" onsubmit="return false;" id="selected_sign_form">
        <div class="sign_option1"><label class="on0">Size:</label>
          <select name="Size" class="os0" onclick="calculateTotal()">
            <option value="45">45cm sq</option>
            <option value="60">60cm sq</option>
          </select>
        </div>
        <div class="sign_option2"><label class="on1">Qty:</label>
          <input name="Quantity" class="os1" value="1" onkeyup="calculateTotal()" />
        </div>
        <div class="sign_option3"><label class="on2">Fine:</label>
          <input name="Custom" class="os2" value="" />
        </div>
      </form>
      <div class="price"></div>
    </article>
</section>

I don't think you can assign array values like this: `sSize_prices["45"]=45;`. In JavaScript you can only access array-index by number. If you want it the way you have now, you need to use an [**Object**](http://www.w3schools.com/js/js_objects.asp) — myfunkyside, Nov 05 '14 at 06:17
That is purely to check the value against the array to find the corresponding 'price'. It works very well, especially for large option arrays with different pricing for each option. — Matthew6, Nov 05 '14 at 06:21

score 1 · Answer 1 · answered Nov 05 '14 at 06:09

You can do it using jQuery. You can use different jQuery Selector, use 'id' selector to get form element and use .find() to get select element.

var sSize_prices= new Array();
sSize_prices["45"]=45; //per sq ft
sSize_prices["60"]=65; //per sq ft

function getSizePrice() {
var getSizePrice=0;

var selectBox= $("#selected_sign_form").find(".os0:first");
alert($(selectBox).val());

getSizePrice = sSize_prices[$(selectBox).val()];

return getSizePrice;
}

NOTE - please include jquery library before above script. To include jquery library see this

score 0 · Accepted Answer · answered Nov 05 '14 at 06:41

0

Your code is fine, just needs a small HTML amending.

The following line is looking for an element inside your form, with the attribute "name" that equals "os0":

theForm.elements["os0"];

If you'll set the name of your "select" tag to "os0" - it will work.

E.G.

<select name="os0" class="os0" onclick="calculateTotal()">

answered Nov 05 '14 at 06:41

Yonatan Ayalon

1,959
18
19

This works perfectly, too, and is even more efficient a solution. Thanks! – Matthew6 Nov 05 '14 at 07:51

Cannot read value form element with JQuery/Javascript

2 Answers2

Linked