Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Aug 5th, 2012  |  syntax: None  |  size: 3.88 KB  |  hits: 7  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How to Javascript change Label value from selecting Checkbox and drop-down list
  2. <input type="checkbox" name="events" value="event02 />
  3. Event 01
  4. </input>
  5. <br/>
  6. <input type="checkbox" name="events" value="event02 />
  7. Event 02:
  8. <select name="selectOne" onchange="amount()">
  9.     <option value="00" selected="selected">00</option>
  10.     <option value="01">01</option>
  11.     <option value="02">02</option>
  12.     <option value="03">03</option>
  13.     <option value="04">04</option>
  14.     <option value="05">05</option>
  15.     <option value="06">06</option>
  16.     <option value="07">07</option>
  17. </select>
  18. <br/>
  19. <input type="text" name="displayTxtBox" id="displayTxtBox" size="10" maxlength="50" value="" />
  20.        
  21. <input type="checkbox" id="input1" name="events" value="event01" />
  22. <label for="input1">Event 01</label>
  23. <br/>
  24. <input type="checkbox" id="input2" name="events" value="event02" />
  25. <label for="input2">Event 02</label>
  26.  
  27. <select name="selectOne">
  28.     <option value="00" selected="selected">00</option>
  29.     <option value="01">01</option>
  30.     <option value="02">02</option>
  31.     <option value="03">03</option>
  32.     <option value="04">04</option>
  33.     <option value="05">05</option>
  34.     <option value="06">06</option>
  35.     <option value="07">07</option>
  36. </select>
  37. <br/>
  38. <input type="text" name="displayTxtBox" id="displayTxtBox" size="10" maxlength="50" value="" />​
  39.        
  40. function showAmount(el, selectEl, targetEl, clearOnUncheck) {
  41.     /* the following is an optional, Boolean, variable, so a ternary
  42.        conditional is used, which checks that 'clearOnUncheck' exists,
  43.        if it does then the variable is assigned its own value,
  44.        if *not* then it's explicitly assigned the value of false
  45.        note it's Boolean, *not* a string: don't quote this value */
  46.     var clearOnUncheck = clearOnUncheck ? clearOnUncheck : false;
  47.     if (!el || !selectEl || !targetEl) {
  48.         // sanity checking, these are *required* arguments for the function
  49.         return false;
  50.     }
  51.     // if the checkbox is checked, continue
  52.     else if (el.checked) {
  53.         /* assigning the conditions I'm testing to variables, so if conditions
  54.            change they only have to be changed in one place */
  55.         var index = selectEl.selectedIndex,
  56.             textcontent = (typeof(el.textContent) != 'undefined');
  57.         if (textcontent) {
  58.             // up-to-date browsers
  59.                /* sets the value of the text-input to be the string contained
  60.                   within the selected option from the select element */
  61.             targetEl.value = selectEl
  62.                 .getElementsByTagName('option')[index]
  63.                 .textContent;
  64.         }
  65.         else if (window.innerText) {
  66.             // IE < 8
  67.                // as above, but uses innerText for IE
  68.             targetEl.value = selectEl
  69.                 .getElementsByTagName('option')[index]
  70.                 .innerText;
  71.         }
  72.     }
  73.     /* if the checkbox is unchecked, and you've set the Boolean for the
  74.        optional clearOnUncheck to true (remember, *not* a string, don't quote) */
  75.     else if (!el.checked && clearOnUncheck) {
  76.         /* if clearOnUncheck is true, the value is cleared from the text-input,
  77.            if clearOnUncheck is set to false, or not-set, the text-box value
  78.            persists after unchecking the checkbox */
  79.         targetEl.value = '';
  80.     }
  81. }
  82.  
  83. // references to the elements
  84. var input2 = document.getElementById('input2'),
  85.     select = document.getElementsByName('selectOne')[0],
  86.     textInput = document.getElementById('displayTxtBox');
  87.  
  88. // binding the function to the onchange event of the input2 and selectOne elements.
  89. input2.onchange = function() {
  90.     showAmount(input2, select, textInput, true);
  91. };
  92. select.onchange = function() {
  93.     /* because the clearOnUncheck argument depends on the changing of the
  94.        checkbox there's no point in passing it to the showAmount() function
  95.        in the select's onchange event-handler */
  96.     showAmount(input2, select, textInput);
  97. };​