Question

我有一个搜索表单，根据所选的选项值，在点击提交按钮后重定向用户。这是我的表格代码：

＆＃13;

    <form method="get" action="http://www.yourdomain.com/hotels/search" role="search">
      <select>
    <option value="">Select Location</option>
    <option value="10">USA</option>
    <option value="3">Canada</option>
    <option value="4">Singapore</option>
    <option value="5">India</option>
    <option value="6">China</option>
    </select>
    <button type="submit">Submit</button>
    </form>

＆＃13;

例如：如果我们选择USA，原因值为10，用户网页将被重定向到以下URL：

http://www.yourdomain.com/hotels/search/USA/USA/10？

我想在问号后添加此特定行：

签=％F％F＆安培;结帐=％F％F＆安培;成人= 0＆安培;子= 0

这样的事情：

http://www.yourdomain.com/hotels/search/USA/USA/10?checkin=%F%F&checkout=%F%F&adults=0&child=0

如何使用JavaScript添加它？

我正在寻找JavaScript来实现它。

提前致谢

Answer 1

我改变了你的代码，并制作了新的jquery功能，可以帮助你！请仔细阅读！

      <form method="get" action="" role="search">
      <select id="country">
    <option value="">Select Location</option>
    <option value="10">USA</option>
    <option value="3">Canada</option>
    <option value="4">Singapore</option>
    <option value="5">India</option>
    <option value="6">China</option>
    </select>
    <button type="button" id="buttonId">Submit</button>
    </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script type = "text/javascript" language = "javascript">
 jQuery(document).ready(function() {
    jQuery("#buttonId").click(function() {
        var country_value = $('#country').val();
       var country_name = $('#country :selected').text(); 
            window.location = "http://www.yourdomain.com/hotels/search/"+country_name + "/" +country_name +"/" + country_value +"?checkin=%F%F&checkout=%F%F&adults=0&child=0";

    });
 });
</script>

Answer 2

您必须使用JavaScript onchange方法。您可以使用jQuery或vanilla js来使用它。使用普通的js。

<form method="get" action="http://www.yourdomain.com/hotels/search" role="search">
      <select onchange="window.location.href = 'http://www.yourdomain.com/hotels/search/USA/USA/' + this.value + '?checkin=%F%F&checkout=%F%F&adults=0&child=0'">
    <option value="">Select Location</option>
    <option value="10">USA</option>
    <option value="3">Canada</option>
    <option value="4">Singapore</option>
    <option value="5">India</option>
    <option value="6">China</option>
    </select>
    <button type="submit">Submit</button>
    </form>

<强> The href property sets or returns the entire URL of the current page.

Answer 3

你可以在javascript端做到这一点。

<input type="submit" value="Send It!" onClick="return ActionDeterminator();">

function ActionDeterminator() {

 //based on the value selected in option drop down u can modify like below
 form.name.action =// set the modified value also you need to add form name to your form
  return true;
}

Answer 4

试试这个

<select id="country_id">
 <option value="10">USA</option>
</select>

 <script>
 $("country_id").on('change', function(){
   var country_id =  $("country_id").val();
   var country =  this.options[this.selectedIndex].text);
    var url      = window.location.href;
    var new_url = url + country + country + country_id ? = "F F"&checkout= "F F" & adults=0 & child=0;
    window.location.href = new_url;
})
 </script>

如何根据选定的选项值重定向表单操作？

4 个答案: