javascript - 检查是否针对 2 个提交按钮选择单选按钮
问题描述
我有一组 4 个带有两个提交按钮的单选按钮,即一个类型为“提交”,另一个类型为“按钮”:
<form id='myform' method="POST">
<label style="font-family: sansationregular;">Choose a time frame:</label><br/>
<input type="radio" name="time" value="t1"><label style="margin-left: 10px;font-family: sansationregular;; vertical-align: middle;"> Today</label> </input>
<input type="radio" name="time" value="t2"><label style="margin-left: 10px;font-family: sansationregular;; vertical-align: middle;"> Last 1 Week</label> </input>
<input type="radio" name="time" value="t3"><label style="margin-left: 10px;font-family: sansationregular;; vertical-align: middle;"> Last 1 Month</label> </input>
<input type="radio" name="time" value="t4"><label style="margin-left: 10px;font-family: sansationregular;; vertical-align: middle;"> Last 1 Year </label></input>
<br/><br/>
<input type="submit" class="k" align="middle" id="btn1" value="Download Raw Data" style="font-family: sansationregular; vertical-align: middle;" />
<input type="button" class="k" id="btn2" value="Most Frequent Words">
</td>
</form>
我已经使用以下脚本验证了第一个按钮的选择:
var form = document.getElementById('myform');
var btn = document.getElementById('btn2');
form.onsubmit = function() {
if ($(this).find('input[type="radio"]:checked').length > 0) {
form.action="{{ url_for('choice') }}"
form.target = '_blank';
} else {
alert("Please choose the desired option!");
form.action="{{ url_for('home') }}"
form.target='_self'
}
};
但是,在下一次验证中使用与上述相同的方法不起作用。下面的代码是我想验证单选按钮是否选择/不反对第二个提交按钮的地方。
btn.onclick = function() {
form.target = '_blank';
form.action="{{ url_for('wordcloud') }}"
form.submit();
}
任何帮助表示赞赏。谢谢!
解决方案
您的代码不起作用,因为,
直接调用 HTMLFormElement.submit() 方法时,不会引发提交事件(特别是不会运行表单的onsubmit事件处理程序),也不会触发约束验证。
查看此链接了解更多信息,https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
或者,您可以这样做。希望这可以帮助。
var form = document.getElementById('myform');
var btn = document.getElementById('btn2');
function inputLength() {
return $('#myform').find('input[type="radio"]:checked').length > 0;
}
function submitForm() {
if (inputLength()) {
form.action="{{ url_for('choice') }}"
form.target = '_blank';
} else {
alert("Please choose the desired option!");
form.action="{{ url_for('home') }}"
form.target='_self'
}
}
form.onsubmit = submitForm;
btn.onclick = function() {
form.target = '_blank';
form.action="{{ url_for('wordcloud') }}"
submitForm();
form.submit();
}
推荐阅读
- javascript - 如何根据传入的文本检测文本框的高度?
- php - 如何修改 .htaccess 文件以避免拥有同一个 index.php 文件的多个副本?
- python-3.x - 使用正则表达式捕获并删除开始和结束 xml 打开和关闭标记
- python - /create_entry/ 处的 ValueError
- java - 在 Android 中使用 RadioButton 启用夜间模式
- arduino-ide - 为什么我无法在 Arduino Ide 1.8.13 上输入任何内容
- r - 如何放大部分绘图并删除缩放区域外的注释?
- c - 试图找出一种同时提示用户输入整数或字符并接受字符或整数输入的方法
- python - 如何替换数据框列中大于特定值的值?
- r - 是否有统一多列的 R 函数?