我想根据选项url提交后重定向页面,我尝试了以下代码,但该代码在下面没有任何作用。
请帮助我。
<div class="row">
<div class="wow fadeInLeft animated col-sm-12 col-md-12" data-wow-delay=".2s" data-wow-duration="1500ms">
<div class="san" style="padding:0px; ">
<div class="header-title">
<h3 style="text-align:center;"><strong>Donate Now </strong></h3>
<div class="hr hr-black"></div>
</div>
<br/>
<form id="comment-form1" name="contact-form1" onsubmit="return mysubmit();">
<input type="text" name="name" placeholder="Your Name.." required>
<input type="text" name="email" placeholder="Your Email.."required>
<input type="text" name="phone" placeholder="Your 10 digit Phone.."require pattern="[0-9]{10}">
<select id="option" class="chosen" style="width:500px;">
<option selected disabled>Select Bank</option>
<option value="netbanking.hdfcbank.com/netbanking/?_ga=2.196148587.673827790.1549438128-1636006557.1549438128">Hdfc Bank</option>
<option value="www.icicibank.com/safe-online-banking/safe-online-banking.page?itm=nli_hp_0_btn_ib_loginbtn" >ICICI Bank</option>
<option value="netbanking.canarabank.in/entry/ENULogin.jsp" >Canara Bank</option>
</select>
<input name="submit" type="submit" value="Submit" /><br>
</form>
<br/><br/>
</div>
</div>
<script>
function mysubmit(){
//you can return false; here to prevent the form being submitted
//useful if you want to validate the form
window.location.href='https://'+document.getElementById('option').value;
}
</script>
</div>
</div>
</section>
答案 0 :(得分:3)
您可以使用 Event.preventDefault()
document.getElementById('comment-form1').addEventListener('submit',(e)=>{
e.preventDefault();
window.location = ('https://'+document.getElementById('option').value);
})
<div class="row">
<div class="wow fadeInLeft animated col-sm-12 col-md-12" data-wow-delay=".2s" data-wow-duration="1500ms">
<div class="san" style="padding:0px; ">
<div class="header-title">
<h3 style="text-align:center;"><strong>Donate Now </strong></h3>
<div class="hr hr-black"></div>
</div>
<br/>
<form id="comment-form1" name="contact-form1">
<input type="text" name="name" placeholder="Your Name.." required>
<input type="text" name="email" placeholder="Your Email.."required>
<input type="text" name="phone" placeholder="Your 10 digit Phone.."require pattern="[0-9]{10}">
<select id="option" class="chosen" style="width:500px;">
<option selected disabled>Select Bank</option>
<option value="netbanking.hdfcbank.com/netbanking/?_ga=2.196148587.673827790.1549438128-1636006557.1549438128">Hdfc Bank</option>
<option value="www.icicibank.com/safe-online-banking/safe-online-banking.page?itm=nli_hp_0_btn_ib_loginbtn" >ICICI Bank</option>
<option value="netbanking.canarabank.in/entry/ENULogin.jsp" >Canara Bank</option>
</select>
<input name="submit" type="submit" value="Submit"/><br>
</form>
<br/><br/>
</div>
</div>
答案 1 :(得分:1)
在您的js函数中添加return false;
,默认情况下onsubmit
会收到true,实际上会使您回到同一页面。
<script>
function mysubmit(){
window.location.href='https://'+document.getElementById('option').value;
return false;
}
</script>
或者您可以将类型更改为按钮,并在单击按钮时触发此功能
<input name="submit" type="button" value="Submit" onclick=' mysubmit()' /><br>
答案 2 :(得分:1)
您的要求无法完成。提交表单后,它实际上将重定向(使用get或post)到定义的操作url。如果您取消了重定向,则表单将不会提交,因为重定向是从服务器发送/请求数据的原因。
我可以通过两种方式解决这个问题。
var form = document.querySelector("#myForm");
var redirectElement = document.querySelector("#selectRedirect");
form.addEventListener("submit", onSubmit);
function onSubmit(event) {
$.ajax({
url: form.action,
context: JSON.stringify(new FormData(document.querySelector('form'))),
method: form.method.toUpperCase()
}).done(redirect);
event.preventDefault();
return false;
}
function redirect() {
window.location.href = redirectElement.value;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectRedirect">
<option selected disabled>Select URL</option>
<option value="url_1">URL 1</option>
<option value="url_2">URL 2</option>
<option value="url_3">URL 3</option>
</select>
<form id="myForm" action="action_url" method="action_get_or_post">
<input type="text" name="somedata" />
<input type="submit" value="Submit" />
</form>
redirectTo
之类的名称添加到select元素,然后使用此脚本即可。
if (document.readyState === "complete") onLoad();
else addEventListener("DOMContentLoaded", onLoad);
function onLoad() {
var redirectTo = getUrlParameter("redirectTo");
if (redirectTo) window.location.href = redirectTo;
}
function getUrlParameter(parameterName) {
return (new RegExp(parameterName + "=([^&]+)", "i").exec(document.URL) || [])[1];
}
答案 3 :(得分:1)
我删除了mysubmit()
,并使用jQuery创建了一个提交时事件:
$("#comment-form1").on("submit",function(event){
event.preventDefault();
window.location.href = 'https://' + document.getElementById('option').value;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="wow fadeInLeft animated col-sm-12 col-md-12" data-wow-delay=".2s" data-wow-duration="1500ms">
<div class="san" style="padding:0px; ">
<div class="header-title">
<h3 style="text-align:center;"><strong>Donate Now </strong></h3>
<div class="hr hr-black"></div>
</div>
<br/>
<form id="comment-form1" name="contact-form1">
<input type="text" name="name" placeholder="Your Name.." required>
<input type="text" name="email" placeholder="Your Email.."required>
<input type="text" name="phone" placeholder="Your 10 digit Phone.."require pattern="[0-9]{10}">
<select id="option" class="chosen" style="width:500px;">
<option selected disabled>Select Bank</option>
<option value="netbanking.hdfcbank.com/netbanking/?_ga=2.196148587.673827790.1549438128-1636006557.1549438128">Hdfc Bank</option>
<option value="www.icicibank.com/safe-online-banking/safe-online-banking.page?itm=nli_hp_0_btn_ib_loginbtn" >ICICI Bank</option>
<option value="netbanking.canarabank.in/entry/ENULogin.jsp" >Canara Bank</option>
</select>
<input name="submit" type="submit" value="Submit" /><br>
</form>
<br/><br/>
</div>
</div>
</div>
</div>
</section>