javascript - Javascript 中的重定向表单传递值

Question

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

1) 选择第一种货币

2) 选择第二种货币

3) 输入金额

提交表单后，用户必须重定向到以下地址: http://www.example.com/sample/ 第一货币-第二货币/?price=金额

表格如下:

<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 .

Note*:for viewing purpose i was added with var url .you need to change with 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>