javascript - 如何使用一个提交表单执行两个单独的操作
问题描述
因此,我尝试使用单个提交输入在一个表单上执行两个操作。我可以将表单填充到我想要的电子邮件中,但我想重定向到确认页面。我在这里查看了其他查询,他们似乎没有打开页面。我看到其他人能够锚定这是我主要尝试过的,我尝试在 ValidateForm() 脚本中运行 jquery 函数,但也没有打开页面。
HTML
<head>
<title>Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/styles.css">
<meta charset="UTF-8">
<script src="/js/Validate.js">
</script>
<style type="text/css">
html, body{
height: 100%;
}
body{
width: 100%;
background-image: url(/img/BpD6ruBXZqiH2Qvq4axJXZ.jpg);
background-size: cover;
background-repeat: no-repeat;
}
</style>
<body>
<div class="container">
<form name=”inputForm” onsubmit="return ValidateForm()" action="mailto:c.esteves@chcfl.org?Subject=Customer info" method="post" enctype="text/plain">
<div class="row">
<div class="col-25">
Input First Name: <red>* required</red>
</div>
<div class="col-75">
<input id="fnameID" type=”text” name=fName required="required"/>
</div>
</div>
<br>
<div class="row">
<div class="col-25">
Input Last Name: <red>* required</red>
</div>
<div class="col-75">
<input id="lnameID" type=”text” name=lName required="required"/>
<br>
</div>
</div>
<div class="row">
<div class="col-25">
Input Date before today: <red>* required</red>
</div>
<div class="col-75">
<input id="birthID" type=”date” name=birth placeholder="mm/dd/yyyy" required="required"/>
<br>
</div>
</div>
<div class="row">
<div class="col-25">
Input E-mail: <red>* required</red>
</div>
<div class="col-75">
<input id="email" type="email" placeholder="name@domain.com" name=email required="required"/>
<br>
</div>
</div>
<div class="row">
<div class="col-25">
Input Phone Number: <red>* required</red>
</div>
<div class="col-75">
<input id="phone" type="phone" placeholder="+1(555)555-5555" name=phone required="required"/>
<br>
</div>
</div>
<br>
<div class="row">
<div class="col-25">
Message: <br>
</div>
<div class="col-75">
<textarea name=message id="message" cols="30" rows="1"></textarea> <br>
</div>
</div>
<br>
<div class="row">
<div class="col-25">
Security Question: <red>* required</red>
</div>
<div class="col-75">
<input id="verify" type=”text” name=verify placeholder="Dog talk and tree clothes?" required="required"/>
<br>
</div>
</div>
<div class="row">
</div>
<a link href="http://www.analog-gamers.com/confirmationpage.html" ><input type="submit" value="send" name="submit"></a>
<input type="reset" name="reset" value="reset"/><br>
</div>
</form>
</body>'''
```function ValidateForm(){
var fName = document.getElementById("fnameID").value;
if(!ValidateNotBlank(fName,"First Name")) return false;
var lName = document.getElementById("lnameID").value;
if(!ValidateNotBlank(lName,"Last Name")) return false;
var bDay = document.getElementById("birthID").value;
if(!ValidateNotBlank(bDay,"Date")) return false;
var email = document.getElementById("email").value;
if(!ValidateNotBlank(email,"Email")) return false;
if(!ValidateEmail(email,"Email")) return false;
if(!ValidateDate()) return false;
var number1 = document.getElementById("phone").value;
if(!phoneLength(number1,"phone")) return false;
if(!securityQuestiony()) return false;
return true;
}```
解决方案
首先删除a
包裹的input
.
现在,我想function verify()
可能会返回更多验证,因此您只需要输入类似这样的最终条件:
if (validation is ok) { document.location.assign('http://www.analog-gamers.com/confirmationpage.html');}
else { show errors }
如果这不起作用,请分享更多代码。
一般示例:
<form name=”inputForm” onsubmit="return ValidateForm();"
action="mailto:email@email.org?Subject=Customer info" method="post"
enctype="text/plain">
.
.
.
.
<input type="submit" value="send" name="submit" />
</form>
<script>
function ValidateForm(){
.
.
.
.
/* if(!verify()) return false;
else { */
document.location.assign('http://www.google.com'); // } //yout URL
}
</script>
推荐阅读
- javascript - 如何在 React 的 componentDidMount 中调用 geoLocation
- html - 如何使按钮居中和底部
- python - 检查python中是否存在记录。如果存在则跳过其他过程
- python - 使用 svm 算法检测对象时出错
- docker - 容器启动时应用程序错误地解析 Docker 别名
- java - 在调用方法之前使用spring AOP调用用户定义的方法
- java - 找不到适合 jdbc:mysql//localhost/sakila 的驱动程序
- encryption - 为什么非对称加密的密钥(如 RSA)必须比典型的对称加密算法(如 AES)长得多?
- javascript - 为什么我的打印 iframe 中的 CSS 加载不一致?
- java - 如何从嵌套列表中提取项目 - 放心