基于选择器值的jQuery更改形式动作

Question

情况就是这样。我有一个表单，其中包含一个选择框和一个搜索字段。我需要在选中框中选择的选项来确定搜索字段的操作。我见过这样的多个帖子，但这里我认为我的文章有点不同:我的表单操作是需要能够接受搜索字段输入的URL(对于每个网站来说，URL对于作为搜索查询的标记是非常挑剔的)。例如,

用户从选中框中选择"Digikey“，表单操作将更改为https://www.digikey.com/products/en?keywords=。搜索字段条目是C0603C0G1H180J030BA。我需要这个条目被加到网址查询的一个特定部分，以便它与相应的URL保持一致，如果我只是去www.digikey.com并将相同的搜索输入到他们的站点的搜索中(我建议任何人阅读这个网站，搜索我提供的条目并观察url，以便更好地了解我正在谈论的内容)。

我尝试使用jQuery解决方案。

编辑我收到的URL (用于Digikey)是：

https://www.digikey.com/products/en?q=C0603C0G1H180J030BA

而不是它所需要的：

https://www.digikey.com/products/en?keyword=C0603C0G1H180J030BA

 <form class="form-inline" data-toggle="#octopart" action="http://octopart.com/search" style="padding-top: 10px;">
         <div class="input-group mb-3" style="width: 50%;">
             <div class="input-group-prepend">
                 <select class="custom-select" id="searchEngine">
                     <option value='octopart'>OctoPart</a></option>
                     <option value='digikey'>DigiKey</a></option>
                     <option value='mouser'>Mouser</a></option>
                     <option value='generalsearch'>General Search</a></option>
                 </select>
             </div>    
             <input class="form-control" type="search" name="q" placeholder="Search part ..." name="search" style="width: 200px">
             <div class="input-group-append">
                 <button class="btn btn-outline-success my-2 my-sm-0" data_target="#octopart" type="submit"><i class="fa fa-search"></i></button>
             </div>
        </div>
   </form>

jQuery

$('#searchEngine').change(function(){
        var selectedEngine = $(this).val();
        if (selectedEngine == "octopart") {
            $(this).closest("form").attr("action", "www.octopart.com/search");
            } else if (selectedEngine == "digikey") {
            $(this).closest("form").attr("action", "https://www.digikey.com/products/en?keywords=" + $(this).closest("form").val());
            } else if (selectedEngine == "mouser") {
            $(this).closest("form").attr("action", "www.mouser.com/ProductDetail/");
            } else {
            $(this).closest("form").attr("action", "www.google.com/search");
            }
});

Answer 1

如果要提交该表单，将method设置为'GET'，并更改查询参数中所需字段的name，以匹配端点上的预期参数

仅用于数字密钥的工作示例

​

var resources = {
  digikey: {
    url: 'https://www.digikey.com/products/en',
    query: 'keywords'
  },
  // won't open in iframe in demo
  /* octopart:{
     url:'https://octopart.com/search',
     query:'q'
   }*/

};

var $sInput = $('#search-input');

$('form').submit(function() {
  var params = resources[$('#searchEngine').val()];
  this.action = params.url;
  $sInput.attr('name', params.query);
});

iframe {
  height: 800px;
  width: 100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="GET" target="my-iframe">

  <select id="searchEngine">
    <option value='octopart'>OctoPart</option>
    <option value='digikey' selected>DigiKey</option>
    <option value='mouser'>Mouser</option>
    <option value='generalsearch'>General Search</option>
  </select>

  <input id="search-input" placeholder="Search part ..." value="audio">

  <button type="submit">Submit</button>

</form>


<iframe id="my-iframe" name="my-iframe"></iframe>

​

Answer 2

在这里，您为输入指定了两个名称，这不是最佳实践。

name="q“和name=”搜索“

​

我变了

$(this).closest("form").val()

至

$(this).closest(":input[name=q]").val()


$(this).closest("form").submit(function() {
            var selectedEngine = $("#searchEngine").val();
            if (selectedEngine == "octopart") {
                $(this).closest("form").attr("action", "www.octopart.com/search");
                } else if (selectedEngine == "digikey") {
                $(this).closest("form").attr("action", "https://www.digikey.com/products/en?keywords=" + $(this).closest(":input[name=q]").val());
                } else if (selectedEngine == "mouser") {
                $(this).closest("form").attr("action", "www.mouser.com/ProductDetail/");
                } else {
                $(this).closest("form").attr("action", "www.google.com/search");
                }
    });