从表单中获取字符串后，如何在动态搜索URL中插入字符串？

Question

<form class="notfound-search" method="post" action="https://something.org/?product_cat=&s=VARIABLE&post_type=product">
            <input type="text" placeholder="Search...">
            <button type="submit">Search</button>
        </form>

我正在尝试从表单中获取字符串（要搜索），并且在提交后，该字符串将代替VARIABLE并重定向到新链接。

Answer 1

您可以使用string.replace方法来更改url值，如下所示，但您需要添加一些JavaScript来实现该效果，还需要向元素中添加id属性，如下所示。

<form class="notfound-search" method="post" action="https://something.org/?product_cat=&s=VARIABLE&post_type=product" id="search-form">
            <input id="search-text" type="text" placeholder="Search...">
            <button id="btnSubmit" type="submit">Search</button>
        </form>

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

<script>
$(document).ready(function(){
  $('#btnSubmit').click(function(e) {
        e.preventDefault();

        var url = $('#search-form').prop('action');

        var search = $(#'search-text').val();

        url = url.replace("VARIABLE", search);

        $('#search-form').prop('action', url);

        //or

       $('#search-form').attr('action', url);

        $("#search-form").submit();
    });
});
</script>