Блог

Я пытаюсь вызвать простую функцию, когда в форме выбрано значение. Проблема в том, что у меня нет доступа к коду, где я мог бы установить функцию непосредственно в поле.

Если бы у меня был доступ, я бы просто написал onChange событие непосредственно внутри <Select> элемента. Есть ли какой-либо способ вызвать <Select> элемент внутри скрипта и применить onChange событие там?

Вот мой скрипт на данный момент. Я пытаюсь взять два значения из отдельных <Select> полей и применить их сумму к другому полю.

 <script type="text/javascript">
 function changeQty ()
{
    var productName = MainForm.elements["ProductCode"].value;
    var Quantity1 = MainForm.elements["SELECT___" productName "___23"].value;
    var Quantity2 = MainForm.elements["SELECT___" productName "___24"].value;
    
    var QtyUpdated = Quantity1   Quantity2;
    
    MainForm.elements["QTY." productName].value = QtyUpdated;
    
}
</script>
  

И вот элемент формы, в котором я хочу, чтобы функция запускалась. У меня есть доступ только к заголовку, в который можно вставить скрипт, но не к элементам на странице. Также в форме уже есть какой-то другой JavaScript. Могу ли я получить два onChange события?

 <SELECT name="SELECT___1-DAY-ACUVUE___21" onChange="change_option('SELECT___1-DAY-ACUVUE___21',this.options[this.selectedIndex].value)">
<OPTION value="192" >-12.00</OPTION>

<OPTION value="193" >-11.50</OPTION>
<OPTION value="73" >-11.00</OPTION>
<OPTION value="79" >-10.50</OPTION>
<OPTION value="80" >-10.00</OPTION>
<OPTION value="81" >-9.50</OPTION>
<OPTION value="82" >-9.00</OPTION>
<OPTION value="83" >-8.50</OPTION>
<OPTION value="84" >-8.00</OPTION>
<OPTION value="85" >-7.50</OPTION>

<OPTION value="86" >-7.00</OPTION>
<OPTION value="87" >-6.50</OPTION>
<OPTION value="88" >-6.00</OPTION>
<OPTION value="89" >-5.75</OPTION>
<OPTION value="90" >-5.50</OPTION>
<OPTION value="91" >-5.25</OPTION>
<OPTION value="92" >-5.00</OPTION>
<OPTION value="93" >-4.75</OPTION>
<OPTION value="94" >-4.50</OPTION>

<OPTION value="95" >-4.25</OPTION>
<OPTION value="96" >-4.00</OPTION>
<OPTION value="97" >-3.75</OPTION>
<OPTION value="98" >-3.50</OPTION>
<OPTION value="99" >-3.25</OPTION>
<OPTION value="100" >-3.00</OPTION>
<OPTION value="101" >-2.75</OPTION>
<OPTION value="102" >-2.50</OPTION>
<OPTION value="103" >-2.25</OPTION>

<OPTION value="104" >-2.00</OPTION>
<OPTION value="105" >-1.75</OPTION>
<OPTION value="106" >-1.50</OPTION>
<OPTION value="107" >-1.25</OPTION>
<OPTION value="108" >-1.00</OPTION>
<OPTION value="109" >-0.75</OPTION>
<OPTION value="110" >-0.50</OPTION>
<OPTION value="112" > 0.50</OPTION>
<OPTION value="113" > 0.75</OPTION>

<OPTION value="114" > 1.00</OPTION>
<OPTION value="115" > 1.25</OPTION>
<OPTION value="116" > 1.50</OPTION>
<OPTION value="117" > 1.75</OPTION>
<OPTION value="118" > 2.00</OPTION>
<OPTION value="119" > 2.25</OPTION>
<OPTION value="120" > 2.50</OPTION>
<OPTION value="121" > 2.75</OPTION>
<OPTION value="122" > 3.00</OPTION>

<OPTION value="123" > 3.25</OPTION>
<OPTION value="124" > 3.50</OPTION>
<OPTION value="125" > 3.75</OPTION>
<OPTION value="126" > 4.00</OPTION>
<OPTION value="127" > 4.25</OPTION>
<OPTION value="128" > 4.50</OPTION>
<OPTION value="129" > 4.75</OPTION>
<OPTION value="130" > 5.00</OPTION>
<OPTION value="131" > 5.25</OPTION>

<OPTION value="132" > 5.50</OPTION>
<OPTION value="133" > 5.75</OPTION>
<OPTION value="134" > 6.00</OPTION>
</SELECT>amp;nbsp;amp;nbsp;
  

Установлен ли у интересующего вас элемента идентификатор или поле имени. Вчера я решил эту самую проблему для формы на моем сайте. Вы можете использовать jquery, чтобы легко выполнить это.

Добавьте следующее:

 $(document).ready(function(){
  $("#id_cities_0").change(function(){
    //call your function here
  }); 
})
  

Замените id_cities_0 идентификатором вашего элемента, который вы можете найти, просмотрев исходный код. Однако убедитесь, что идентификатор не изменился.

Если у элемента нет идентификатора, напишите ответ.

Это довольно легко сделать без другой зависимости от библиотеки. Сначала ваши вопросы…

Вопрос: Могу ли я иметь два события onChange.
A: Да, если вы регистрируетесь в addEventListener / attachEvent, смотрите quirksmode primer о событиях. У вас может быть > 1 события любого типа.

Прикрепить событие к чему-либо на странице после его загрузки:

 if (window.addEventListener) {
    window.addEventListener('load',prep,false);
} else if (window.attachEvent) {
    window.attachEvent('onload',prep);
}
  

Где prep была бы функция, которая присоединяет вашу changeQty функцию к любым элементам, которые вам нужны на странице:

 function prep() {
    /* Assuming your MainForm.elements process gets an element*/
    var el=MainForm.elements["SELECT___" productName "___23"];
    if (el.addEventListener) {
        el.addEventListener('change',changeQty,false);
    } else if (el.attachEvent) {
        el.attachEvent('onchange',changeQty);
    }
}
  

onload / load будет ждать, пока загрузится весь DOM, то есть скрипты / css / HTML и графика. Просто предупреждение — если загрузка страницы сложная, она может не сработать сразу после рендеринга страницы. Если вы можете управлять содержимым в конце HTML (до </html> ), то вы можете обойти это следующим образом (вместо того, чтобы присоединять prep к load и определять prep функцию):

 <script>
(function() { 
    /* Assuming your MainForm.elements process gets an element*/
    var el=MainForm.elements["SELECT___" productName "___23"];
    if (el.addEventListener) {
        el.addEventListener('change',changeQty,false);
    } else if (el.attachEvent) {
        el.attachEvent('onchange',changeQty);
    }
}());
</script>
</body>
</html>