是否有一种方法可以通过脚本调用表单外部的元素来调用JavaScript函数

5f0d552i 于 2023-01-11 发布在 Java

关注(0)|答案(2)|浏览(102)

我试图调用一个简单的函数，当一个值被选中的形式。问题是，我没有访问的代码，我可以设置函数直接对字段。
如果我有访问权限，我会直接在<Select>元素中写入onChange事件。有没有办法在脚本中调用<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>

这里是我想要函数触发的form元素。我只能访问可以插入脚本的header，而不能访问页面上的元素。而且form已经有了一些其他的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>&nbsp;&nbsp;

JavaScript

来源：https://stackoverflow.com/questions/5953845/is-there-a-way-to-invoke-javascript-function-by-calling-element-outside-of-form

2条答案

按热度按时间

sq1bmfud1#

你感兴趣的元素有id或者name字段吗？我昨天在我的网站上的一个表单中解决了这个问题。你可以使用jquery来轻松地完成这个任务。
增加以下内容：

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

将id_cities_0替换为您可以通过查看源代码找到的元素的id。确保id没有更改。
如果元素没有id，写回。

赞(0）回复(0）举报 2023-01-11

dgiusagp2#

这是很容易做到的没有其他图书馆的依赖性。首先你的问题...

Q：我可以有两个onChange事件吗？
A：是的，如果你注册addEventListener/attachEvent，请查看quirksmode primer事件。你可以有任何类型的事件。

若要在加载事件后将其附加到页面上的某个内容：

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>

赞(0）回复(0）举报 2023-01-11

我来回答

是否有一种方法可以通过脚本调用表单外部的元素来调用JavaScript函数

2条答案

相关问题

热门标签

最新问答