forms - javascript how to run the same function onLoad and onChange - Stack Overflow

admin管理员组

文章数量:1289858

I have a form that has many select menus, most of them are Yes/No and depending on the selected option, I display/hide some advanced options. One of the select menus is the following:

<td><%= f.select :CBIAvailable, ['Yes' , 'No'],{}, {:id=>"cbi_available_id", :class=>"cbi_available_class", :onChange=>"showHideOptions('cbi_available_id','cbi_options_id')", :onLoad=>"showHideOptions('cbi_available_id','cbi_options_id')"} %></td>

When I change from 'Yes' to 'No' or the opposite, showHideOptions javascript functions is called properly, but I can't have that function to be called when I reload the form.

Anyone can tell me what am I dong wrong?

Thanks

UPDATE

<script language="javascript" type="text/javascript">
function showHideOptions(selectorId,optionsId) {
  if (document.getElementById) {
    var selector = document.getElementById(selectorId);
    var options = document.getElementById(optionsId);
    if (selector.value == 'Yes') {
        options.style.display = 'block';
        return false;
    } else {
      options.style.display = 'none';
        return false;
    }
}

window.onLoad = showHideOptions('cbi_available_id','cbi_options_id');

I have a form that has many select menus, most of them are Yes/No and depending on the selected option, I display/hide some advanced options. One of the select menus is the following:

<td><%= f.select :CBIAvailable, ['Yes' , 'No'],{}, {:id=>"cbi_available_id", :class=>"cbi_available_class", :onChange=>"showHideOptions('cbi_available_id','cbi_options_id')", :onLoad=>"showHideOptions('cbi_available_id','cbi_options_id')"} %></td>

When I change from 'Yes' to 'No' or the opposite, showHideOptions javascript functions is called properly, but I can't have that function to be called when I reload the form.

Anyone can tell me what am I dong wrong?

Thanks

UPDATE

<script language="javascript" type="text/javascript">
function showHideOptions(selectorId,optionsId) {
  if (document.getElementById) {
    var selector = document.getElementById(selectorId);
    var options = document.getElementById(optionsId);
    if (selector.value == 'Yes') {
        options.style.display = 'block';
        return false;
    } else {
      options.style.display = 'none';
        return false;
    }
}

window.onLoad = showHideOptions('cbi_available_id','cbi_options_id');

• javascript
• forms
• select
• onload
• onchange

Share Improve this question Follow edited Mar 28, 2012 at 6:43 rh4games asked Mar 28, 2012 at 6:08 rh4gamesrh4games 97222 gold badges1515 silver badges3838 bronze badges 2

• I don't understand. Onload gets called when the form is (re)loaded. What were you expecting? – Mark Fraser Commented Mar 28, 2012 at 6:14
• in my case, :CBIAvailable = 'No', so I expect showHideOptions function to execute when I reload the form and it should display the relevant options for 'No', but in fact the form reloads with the options for 'Yes'. When I change the select menu to 'No', it works fine, and when I change it back to 'No' it works as well. The problem is it does not display the right options onload – rh4games Commented Mar 28, 2012 at 6:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

function yourFunction(){

    //get that select element and evaluate value
    //do you change stuff here
}

window.onload = yourFunction;   //this gets fired on load

//"select" is your element, 
//fetched by methods like document.getElementById();

select.onchange = yourFunction; //this gets fired on change

//you can also use attachEvent (IE) or addEventListener (Others)

---

here's a working demo:

<select id="testSelect">
    <option value="yes">YES</option>
    <option value="no">NO</option>
</select>​​​​​

function getOption() {
    alert('foo');
}

var select = document.getElementById('testSelect');
select.onchange = getOption;
window.onload = getOption;

​

This could happen when you receive postback from your remote server and your response doesn't have <script type="javascript">... yourfunction()...</script>.

Each time you get new response you should send script and exacute it or append to your html element approciate event handler.

Another solution is to use jQuery and use .live() event. This event attach dynamically behaviour to your html. I strongly remend you to use jQuery with live because this library is one of most used libraries in production environment.

Edit

<script type="text/javascript" src="path_to_jquery.js"></script>
<script type="text/javascript">
function showHideOptions(id1,id2){
    //Your code
}
$(document).ready(function() {
   //This function waits for DOM load
   //execute your function for first time
   showHideOptions('cbi_available_id','cbi_options_id');
   //This selector you have to modify or show us generated html to
   // choose the best selector for this purpose
   $('.cbi_available_class').live('change',function(){
        //This will fire change event of html class="cbi_available_class"
        showHideOptions('cbi_available_id','cbi_options_id');
   });
 });
</script>

本文标签： formsjavascript how to run the same function onLoad and onChangeStack Overflow