当我提交时基于选择框提交重定向页面

时间:2019-02-06 07:59:27

标签: javascript forms

我想根据选项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>

4 个答案:

答案 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。如果您取消了重定向,则表单将不会提交,因为重定向是从服务器发送/请求数据的原因。

我可以通过两种方式解决这个问题。

  1. 取消表单提交,而是发送一个ajax请求。收到回复后,您就可以重定向。

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>

  1. 将URL存储在localStorage,cookie或url参数中,然后在重定向后进行重定向。要使用url参数来执行此操作,只需将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>