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

时间:2016-02-21 23:07:05

标签: javascript

我对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'。我似乎无法让它工作。

提前致谢!

1 个答案:

答案 0 :(得分:1)

你使用jQuery这很容易

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