如果此脚本禁止提交,为什么还要提交此表单
Why this form is submitted also if this script forbids the submission?
我在JavaScript开发方面绝对是新手,我有以下问题。
我有一个包含两个输入标签的表单,用户可以使用日历脚本可视化和提交按钮(名为 Cerca(插入两个日期(如 dateFrom 和 dateTo(。
当用户单击提交按钮时,将执行一个JavaScript,检查两个日期是否正确(如果两个日期都设置了,并且dateTo是否晚于dateFrom(。如果两个日期正确,则表单将提交到 Java Servlet,否则不会提交。
所以这是我的形式(dataDa
表示日期开始,dataA
表示日期到(:
<form id="dataDaAForm" name="dataDaAForm" action="salwf.do?serv=<%=request.getSession(false).getAttribute("service")%>&matricola=<%=request.getSession(false).getAttribute("matricola")%>" method="post">
<div class="customPanel" style="width: 100% !important; overflow-y: auto;">
<div class="pane">
<table class="dataDaATable" width="100%">
<tr>
<!-- DATA DA: -->
<td align="right">
Da:
</td>
<td>
<input type="hidden" size="9" class="impPrfTot" readonly="readonly"
onchange="cambioDataDa(this.value)"
name="dataDa" id="datada" value=""
style="font-size: 11px;color: #000000;">
<input id="datada2" onchange="" type="text" maxlength="9" size="9"
class="impPrfTot"
readonly="readonly" style="width: 100px" value="<%=request.getSession(false).getAttribute("dataDa")%>"
style="font-size: 11px;color: #000000;">
<img style="cursor:pointer;margin-left: 3px;"
src="js/calendar/cal.gif"
alt="Seleziona data" border="0"
onClick="displayCalendar(document.getElementById('datada'),'yyyymmdd',this)">
</td>
<!-- DATA A: -->
<td align="right">
A:
</td>
<td>
<input type="hidden" size="9" class="impPrfTot" readonly="readonly"
onchange="cambioDataA(this.value)"
name="dataA" id="dataa" value=""
style="font-size: 11px;color: #000000;">
<input id="dataa2" onchange="" type="text" maxlength="9" size="9"
class="impPrfTot" value="<%=request.getSession(false).getAttribute("dataA")%>"
readonly="readonly" style="width: 100px"
style="font-size: 11px;color: #000000;">
<img style="cursor:pointer;margin-left: 3px;"
src="js/calendar/cal.gif"
alt="Seleziona data" border="0"
onClick="displayCalendar(document.getElementById('dataa'),'yyyymmdd',this)">
</td>
<!-- SUBMIT BUTTON: -->
<td>
<button class="dataDadataAButton" name="submitdataDadataA" onclick="testSubmit();">Cerca</button>
</td>
</tr>
</table>
</div>
</div>
</form>
这是检查两个日期是否正确的脚本:
function testSubmit() {
//f = document.forms[0];
var f = document.getElementById('dataDaAForm');
//var dataConfermaDA = f.dataDa.value;
//var dataConfermaA = f.dataA.value;
var dataDa = f.dataDa.value;
var dataA = f.dataA.value;
// TODO:
if (!controllaDate(dataDa, dataA, "'Data Conferma'")) {
return false;
}
//f.action = "edimon.do?serv=M.5";
f.submit();
}
function controllaDate(DataDA, DataA, nomeCampo) {
var check_DataDA = (DataDA != "");
var check_DataA = (DataA != "");
var check_data_DA = check_DataDA;
var check_data_A = check_DataA;
if (!check_data_DA && (check_DataA)) {
alert(nomeCampo + " Selezionare correttamente Data Da");
return false;
}
if (!check_data_A && (check_DataDA)) {
alert(nomeCampo + " Selezionare correttamente Data A");
return false;
}
if (check_data_DA && check_data_A) {
/**
var giorno = DataDA.substr(6, 7);
var mese = DataDA.substr(4, 5);
var anno = DataDA.substr(0, 4);
var dataDa = new Date(anno, mese - 1, giorno);
var giorno = DataA.substr(6, 7);
var mese = DataA.substr(4, 5);
var anno = DataA.substr(0, 4);
*/
var giorno = DataDA.substring(6, 8);
var mese = DataDA.substring(4, 6);
var anno = DataDA.substring(0, 4);
var dataDa = new Date(anno, mese - 1, giorno);
var giorno = DataA.substring(6, 8);
var mese = DataA.substring(4, 6);
var anno = DataA.substring(0, 4);
var dataA = new Date(anno, mese - 1, giorno);
if (dataA < dataDa) {
alert(nomeCampo + " La Data Da deve essere minore o uguale alla Data A");
return false;
}
}
return true;
}
因此,例如,如果我尝试仅插入dataDa
(dateFrom(值而不是dataA
(dateTo(值,则会发生的情况是,当我单击Cerca按钮时,将执行testSubmit()
的JavaScript。
现在在这个脚本中,我有这样的东西:
dataDa = "20141202"
dataA = ""
( dataDa
已设置,dataA
为空(
因此,现在它被称为执行有效日期检查的controllaDate()
脚本。
所以这个脚本收到类似这样的东西(收到的输入参数(:
controllaDate("20141202", "", "'DataConferma'")
因此执行此代码片段:
if (!check_data_A && (check_DataDA)) {
alert(nomeCampo + " Selezionare correttamente Data A");
return false;
}
并在此 if 中输入(因为check_data_A
为假,因为未设置dataA
(。
因此,向调用方显示警报弹出窗口并return false
,即testSubmit()
函数。
所以,正如我所期望的那样,现在回到这一点testSubmit()
:
if (!controllaDate(dataDa, dataA, "'Data Conferma'")) {
return false;
}
并且testSubmit()
函数返回false
并且不应提交我的表单,因为未执行此操作:
f.submit()
但我不知道如果不执行f.submit()
声明,为什么还要提交表格。为什么?我错过了什么?
我可以以某种方式防止表单在返回 false 时提交吗?
<button class="dataDadataAButton" name="submitdataDadataA" onclick="testSubmit();">Cerca</button>
您有一个提交按钮。单击它将提交表单,除非有人阻止它。
onclick
函数调用testSubmit
(返回 false
(,但它对 testSubmit
的返回值不执行任何操作。您必须从onclick
函数返回false
,以防止发生提交按钮的正常操作。
onclick="return testSubmit();"
也就是说,onclick
属性是我们在 90 年代将 JavaScript 绑定到事件处理程序的方式。我们现在有addEventListener
(我们可以绑定到表单的submit
事件,而不是假设它只能通过单击按钮提交(。
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型,然后提交表单
- 添加和删除隐藏字段数组中的值,而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单,并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单,但仍然允许回车工作
- 使用按钮和单选按钮提交表单,但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时,使用JavaScript提交表单
- 提交表单后,Watir文本框输入未持续(重置为以前的文本框输入)