将表单输入值作为路径附加到操作 url

Posted

技术标签:

【中文标题】将表单输入值作为路径附加到操作 url【英文标题】:Appending form input value to action url as path 【发布时间】:2016-03-11 17:57:29 【问题描述】:

我有一个这样的表格:

<form action="http://localhost/test">
    <input type="text" name="keywords">
    <input type="submit" value="Search">
</form>

如果我在文本输入字段中输入一个值,假设:'hello' 并提交表单,则 URL 看起来像:http://localhost/test/?keywords=hello

我希望将值附加到操作路径。所以基本上,在表单提交之后,URL 应该是这样的:

http://localhost/test/hello

【问题讨论】:

您可能必须使用 htaccess rewriterule 【参考方案1】:

您可以使用onsubmit 属性并在函数中设置动作,例如:

<form id="your_form" onsubmit="yourFunction()">
    <input type="text" name="keywords">
    <input type="submit" value="Search">
</form>

function yourFunction()
    var action_src = "http://localhost/test/" + document.getElementsByName("keywords")[0].value;
    var your_form = document.getElementById('your_form');
    your_form.action = action_src ;

    

【讨论】:

【参考方案2】:

您可以使用onsubmitjQuery 获得相同的结果。

检查以下内容。

html 代码:

<form id = "your_form" onsubmit="yourFunction()">
    <input type="text" name="keywords">
    <input type="submit" value="Search">
</form>

jQuery 代码:

    function yourFunction()

    var action_src = $("keywords").val();
    var your_form = $('your_form').val();

    var urlLink = "http://localhost/test/";
    urlLink = urlLink + action_src;



    your_form.action = urlLink;


【讨论】:

以上是关于将表单输入值作为路径附加到操作 url的主要内容,如果未能解决你的问题,请参考以下文章

将值附加到 URL 的表单

Angular 2新表单,提交重定向到同一页面,表单字段附加在URL中作为查询参数,新路由器版本

如何通过 JavaScript 将动态 URL 添加到 WordPress 中的表单操作?

如何使用拖放将值附加到输入表单字段中

将输入字段值附加到 .cshtml 页面上的 URL

如何更改联系表单 7 的表单操作 url?