javascript - 如何更改搜索栏的表单操作属性

Question

总的来说，我对 Javascript 和 Web 开发非常陌生，因此非常感谢您的帮助!我有一个设置简单搜索栏的表单。我希望表单根据用户在搜索栏中输入的内容进入网址。我查看了其他答案，但似乎没有一个适合我。相关代码如下:

<script type = 'text/javascript'>
    function formSubmit(element){
        var url = $("#search_form").attr("action");
        var newParam = element.value;
        url += "/" + newParam;
        $("#search_form").attr("action", url);
        $("#search_form")[0].submit();
    }
</script>

<form action='./search' method="post" id="search_form">
    {% csrf_token %}
    <label for="search_item">Search: </label>
    <input id="search_item" type="text" name="search_item" value="{{ search_item }}" pattern="[A-Za-z0-9]+">
    <input type="submit" value="Search" onsubmit="formSubmit(search_item)">

基本上，当用户输入内容时，我希望表单转到“/search/user_input_here”。但我似乎无法让它工作。

提前致谢!

Answer 1

你使用 jQuery，所以这很简单

 $("#search_form").submit(function(){
     $(this).attr('action', $(this).attr('action') + '/' + $('#search_item').val());
     return true;
 });