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

Question

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

Answer 1

您可以使用 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>

Answer 2

在您的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>

Answer 3

您的要求无法完成。提交表单后，它实际上将重定向（使用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];
}

Answer 4

我删除了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>