Select element "selected" not changing - JavaScript

Question

I am sure this is (hopefully) going to turn out to be a really stupid question.

I'm making some basic alterations to a form for a client's website - evidently, the site loads a php script in an iFrame that writes 2/3 of the form. The rest of the form is written in a JS file included on the original page after the php script has ended.

I had to, among other things, move a select into the part of the page that is written in JavaScript.

'   <td class="ttcell itemcell1 continent">' +
'   <select name="continent" id="continent" class="long-field" onchange="window.parent.calcTotals()">' +
'   <option value="NA">North America</option>' +
'   <option value="SA" selected>South America</option>' +
'   <option value="EU">Europe</option>' +
'   <option value="MO">Middle-Orient</option>' +
'   <option value="AA">Asia-Australia</option>' +
'   </select>' + 
'   </td>' +

I need to calculate a displayed value when the dropdown selection changes. If I check the value in a JavaScript file included in the PHP document, which is called on form submit, I can check the value there. However, I can't seem to find anywhere to bind the function. If I have onclick as above in the original code, the event fires, but the selected value never changes. If I check the value of the select in another function in the same JavaScript file, the value doesn't change.

The only place the change is reflected is when called from a function in the other PHP file...but trying to bind the event there doesn't seem to work. I am starting to go slightly crazy...

Edit: Solved by binding a click event in JS1 which called a function in JS2 returning the value. In JS1 I was never able to read the true value of the select, and as such could never bind a change event.

There is no code here that would cause a change event to fire. You have onclick, but that's not the same as onchange.... — random_user_name
– random_user_name, Commented Apr 2, 2014 at 21:16

SomeKittens · Accepted Answer · 2014-04-02 21:18:57Z

1

Add an event listener for the change event in your JavaScript:

document.querySelector('#continent').addEventListener('change', function(e) {
    alert(e.target.value);
});

Fiddle example

answered Apr 2, 2014 at 21:18

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

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

1 Comment

oowowaee Over a year ago

On a whim I decided to try adding this after the callback method for the iFrame loading. No dice.

kalai · Accepted Answer · 2014-04-02 21:25:50Z

1

First of all change the onclick event to onchange.

then, instead of using :selected to get the dropdown value, use $("#continent").val()

answered Apr 2, 2014 at 21:25

kalai

292 bronze badges

Comments

oowowaee · Accepted Answer · 2014-07-15 12:05:00Z

So, this is the only solution I could come up with within a reasonable time frame, so excuse the sketchiness.

The structure of the document was [I didn't write it]: HTML (includes JS1) -> Loads HTML file onclick with an iFrame that loads a PHP script (which includes JS2).

I could bind an onclick event in JS1 - onchange would never work as the select attribute never changed.

So, I bound an onclick in JS1 which called the requisite function, which called a function in JS2 that returned $('#continent').val().

In JS1:

       ' <td class="ttcell itemcell1 continent">' +
   ' <select name="continent" id="continent" class="long-field" onclick="window.parent.calcTotals()">' +
   ' <option value="NA">North America</option>' +
   ' <option value="SA" selected>South America</option>' +
   ' <option value="EU">Europe</option>' +
   ' <option value="MO">Middle-Orient</option>' +
   ' <option value="AA">Asia-Australia</option>' +
   ' </select>' + 
   ' </td>' +...


    function calcTotals()
{       
   var $f = $("#cartFrame");
   out = $f[0].contentWindow.returnVal(); ...

In JS2:

function returnVal() {
return $('#continent').val();}

Edit: Long since handed over this project, but I think about it from time to time.
What I suspect might have been happening was a jQuery conflict (iirc he had at least 2 different versions of jQuery being imported in different files).

Collectives™ on Stack Overflow

Select element "selected" not changing - JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related