Javascript中的重定向表单传递值

Question

我想创建一个表单，根据 3 个值将用户重定向到另一个页面：

1)selectfirstcurrency

2)select第二货币

3) input 金额

提交表单时，必须将用户重定向到以下地址： http://www.example.com/sample/firstcurrency-secondcurrency/?price=amount

这是表格：

<form id="currency">

<input id="amount" name="amount" class="amount" type="text" value="" />

<select id="firstcurrency" class="selex" name="firstcurrency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>

<select id="secondcurrency" class="selex" name="secondcurrency">
<option value="AUD">AUD</option>
<option value="JPY">JPY</option>
</select>

<input class="button" type="submit" value="Redirect Me"/>

</form>

你会使用什么 Javascript 代码？

Answer 1

试试这个。使用name and value 形式的内部元素创建对象。然后使用url 的相应位置调用对象属性并使用window.location.href 进行分配。

注意*：出于查看目的，我添加了var url。您需要更改为window.location.href=url

//http://www.example.com/sample/firstcurrency-secondcurrency/?price=amount

function redirect(that){
var params = {};
for( var i=0; i<document.form.elements.length; i++ )
{
   var fieldName = document.form.elements[i].name;
   var fieldValue = document.form.elements[i].value;
   params[fieldName] = fieldValue;
}

console.log(params)
var url ='http://www.example.com/sample/'+params['firstcurrency']+'-'+params['secondcurrency']+'/?price='+params['amount']+''

console.log(url)
return false;
}

Here is the form:

<form id="currency" name="form" onsubmit="return redirect(this)">

<input id="amount" name="amount" class="amount" type="text" value="" />

<select id="firstcurrency" class="selex" name="firstcurrency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>

<select id="secondcurrency" class="selex" name="secondcurrency">
<option value="AUD">AUD</option>
<option value="JPY">JPY</option>
</select>

<input class="button" type="submit" value="Redirect Me"/>

</form>

最终版最新

function redirect(that) {
  var params = {};
  for (var i = 0; i < document.form.elements.length; i++) {
    var fieldName = document.form.elements[i].name;
    var fieldValue = document.form.elements[i].value;
    params[fieldName] = fieldValue;
  }

  window.location.href = 'http://www.example.com/sample/' + params['firstcurrency'] + '-' + params['secondcurrency'] + '/?price=' + params['amount'] + ''
return false;
}

Here is the form:

<form id="currency" name="form" onsubmit="return redirect(this)">

  <input id="amount" name="amount" class="amount" type="text" value="" />

  <select id="firstcurrency" class="selex" name="firstcurrency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>

  <select id="secondcurrency" class="selex" name="secondcurrency">
<option value="AUD">AUD</option>
<option value="JPY">JPY</option>
</select>

  <input class="button" type="submit" value="Redirect Me" />

</form>

Answer 2

function Redirect(){
  //Get values of the elements by their id

  var firstcurrency = document.getElementById('firstcurrency').value;
  var secondcurrency = document.getElementById('firstcurrency').value;
  var amount = document.getElementById('amount').value;

  //Redirect with javascript
  window.location.replace("http://www.example.com/sample/"+firstcurrency+"-"+secondcurrency+"/?price="+amount);
}

在提交按钮上：

<input class="button" type="submit" value="Redirect Me" onclick="Redirect()"/>

Answer 3

我会这样做：

var form = document.getElementById('currency');
form.onsubmit = function(e){

    var firstcurrency = document.getElementById('firstcurrency').value;
    var secondcurrency = document.getElementById('secondcurrency').value;
    var price = document.getElementById('amount').value;

    e.target.action = "http://www.example.com/sample/"+firstcurrency+"-"+secondcurrency+"/?price="+price;

}

此外，要实现完全相同的 url 方案，您必须删除所有输入元素的 name 属性，以免它们作为查询参数附加到 URL 的末尾。

这是更新后的表格：

<form id="currency" >
    <input id="amount" class="amount" type="text" value="" />

    <select id="firstcurrency" class="selex" >
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    </select>

    <select id="secondcurrency" class="selex" >
    <option value="AUD">AUD</option>
    <option value="JPY">JPY</option>
    </select>

    <input class="button" type="submit" value="Redirect Me"/>
</form>