[英]How to do two seperate actions with one submit form
因此,我嘗試使用單個提交輸入對一種表單執行兩項操作。 我可以在電子郵件中填寫表格,這是我想要的,但我想重定向到確認頁面。 我在這里查看了其他查詢,但他們似乎沒有打開頁面。 我看到其他人能夠錨定這是我主要嘗試的方法,並且我嘗試在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>
如果您想重定向到“確認”頁面,則可以在自己的網站內添加重定向代碼
ValidateForm()
像這樣:
ValidateForm(){ e.preventDefault(); window.location.replace("test.xyz"); }
但是請記住,這將取消您的原始提交操作。
希望我能正確回答你的問題。
我定義了一個標簽,其中包含不帶(type = submit)輸入或格式不正確的輸入,可以成功啟動到新站點,因此我猜表單提交按鈕禁止將其他單擊事件添加到該按鈕。
監聽提交事件已完成並使用JS重定向到新地址也是一種方法。
在當前window
中添加一個簡短的計時器,以異步方式重定向頁面。
function ValidateForm () {
// whatever validations you need
window.redirectTimer = setTimeout({
window.location = "http://www.stackoverflow.com";
}, 250);
if( !securityQuestion() ) return false;
return true;
}
這會將重定向設置為在250毫秒內發生,並根據您的需要對其進行調整。 這個問題可以用回調之類的方法更有效地解決,因為有時不贊成使用計時器,但是這將需要對代碼進行更復雜的更改,即手動處理數據提交,而不僅僅是通過指定action
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.