Javascript表单:当选择字段改变值时调用指定的提交按钮

Javascript form: call a specified submit button when a select field changes value

本文关键字：调用 按钮 提交 表单 选择 改变 字段 Javascript      更新时间：2023-09-26

我有一个带有多个提交按钮的表单，其中一个是重载按钮，这证明很难编写。

这个想法是，当用户单击"reload"时，提交表单，并根据选择字段的值更新表单。该位的代码片段很简单(简化为基本内容):

<select type="text" id="dataamount" size="1">
    <option value="time0h10m">Latest 10 minutes</option>
    <option value="time1h00m">Latest 1 hour</option>
    <option value="time12h00m">Latest 12 hours</option>
</select>
<input type="submit" id="btnreload" value="reload latest data">
<input type="submit" id="btndelete" value="delete all">
<input type="submit" id="btnrun" value="run">

然后我想，如果用户改变了"reload"字段的值，那无论如何都应该通过"reload"按钮触发提交。(为什么要强迫他们改变，然后点击， = 2个动作?在发生dataamount -> onchange时自动触发提交要好得多。)但我需要指定哪个提交按钮，而不仅仅是提交表单。

我想做这样的事情，但我认为这不会工作或不可靠:

<select type="text" id="dataamount" size="1" 
         onchange="document.getElementById('btnreload').submit();">
etc
or              "..... ('btnreload').click();

但是我找不到任何指南来做到这一点，或者给出我的选择。偶尔会提示，提交字段的click()可能不太受支持，或者提交字段不能总是使用.submit()执行。

我是在良好的兼容性和使用纯javascript(没有jquery等)。理想情况下，我想保持它内联，并避免(启用/禁用+ form.submit())的变通方法，如果可能的话(提交按钮可以改变或成为动态的)。

使用

<select type="text" id="dataamount" size="1" 
         onchange="myFunction();">
 function myFunction() {
        document.querySelectorAll("input[type=submit]")[0].click();
    }

首先，您必须为要提交给服务器的任何数据赋予select和input元素name属性。

第二，向表单添加一个隐藏的输入，并在select onchange事件中将其值设置为可以在服务器端代码中检查的值，然后提交表单:

document.getElementById("hiddenInputId").value = "dataAmountChanged";
document.forms[0].submit();

使用说明:

 document.querySelectorAll("input[type=submit]")[0].click();
相关文章：