从表单提交自定义查询字符串 [英] Submitting a custom query string from form

问题描述

我有一个表单，当我提交时，它会将我带到一个网址www.domain.com/search/?maxprice=10000000，但是我想要的是带我到一个自定义网址例如www.domain.com/search/maxprice_10000000/

我发现这个JavaScript代码是为了允许自定义网址，通过停止窗体执行默认操作，使用 event.preventDefault（）然而，这不是没有工作或没有加载首先

这是我的代码：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（＃propertysearch）。submit（function（event）{
 event.preventDefault（）; 
 
 window.location.href =/; //无论我想要什么，但问题是这似乎并没有执行
}）; 
}）; 
< / script> 
< form id =propertysearchaction =/ searchmethod =GET> 
 
< p> 
< select id =maxpricename =maxpricestyle =width：47％;> 
< option value =10000000>最高价...< / option> 
< option disabled =disabledvalue =10000000>  -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   - < / option> 
< br /> 
 
< option value =100000>？100,000< / option> 
< option value =150000>？150,000< / option> 
< option value =200000>？200,000< / option> 
< option value =250000>？250,000< / option> 
 
< / select>< / p> 
 
< p>< a href =javascript：document.forms ['propertysearch']。submit（）; title =查找物业>立即查找物业< / a> &安培; GT;< / p为H. 
< / form> 
  

任何帮助将不胜感激！

UPDATE 现在我已经通过使用< input type =submitvalue =Submit> 代替< a href =javascript：document.forms ['propertysearch']。submit（）; title =查找物业>立即查找物业< / a>

$ b $ p

感谢您的帮助

div class =h2_lin>解决方案

您示例中的代码使用jQuery。要么包含jQuery，要么使用非jQuery解决方案，如下所示：
$ b

  document.getElementById（'propertytype'）。addEventListener（ 'submit'，function（event）{
 event.preventDefault（）; 
 
 window.location.href =/; //任何你想要的
}）; 
  

请注意，上述内容不是跨浏览器兼容的;您还必须使用 attachEvent 。

---

< a> ，我只会绑定到点击事件：

  $（＃propertysearch a）。on（'click'，function（e）{
 event.preventDefault（）; 
 
 //提交代码
}）; 
 
 // pre jQuery 1.7 
 $（＃propertysearch a）。bind（'click'，function（e）{
  pre> 
I have a form which at the moment when I submit it, it takes me to a url www.domain.com/search/?maxprice=10000000, however what I want it to do is to take me to a custom url e.g. www.domain.com/search/maxprice_10000000/

I found this javascript code which was meant to allow custom urls by stopping the form from doing its default action using event.preventDefault() However this either isnt working or isnt loading in the first place

Here is my code:
    <script type="text/javascript">
    $(document).ready(function() {
    $("#propertysearch").submit(function(event) {
        event.preventDefault();

        window.location.href = "/"; //whatever i want but the problem is this doesnt seem to execute
    });
});
</script>
    <form id="propertysearch" action="/search" method="GET">

<p>
        <select id="maxprice" name="maxprice" style="width:47%;">
            <option value="10000000">Max Price...</option>
                <option disabled="disabled" value="10000000">- - - - - - - - - - - - - - - - - - - - - - -</option>
                <br />

<option value="100000">?100,000</option>
<option value="150000">?150,000</option>
<option value="200000">?200,000</option>
<option value="250000">?250,000</option>

        </select></p>

        <p><a href="javascript:document.forms['propertysearch'].submit();" title="Find a Property">Find a Property Now</a> &gt;</p>
        </form>
Any help would be appreciated!

UPDATE I have now got the code to work by using <input type="submit" value="Submit"> instead of <a href="javascript:document.forms['propertysearch'].submit();" title="Find a Property">Find a Property Now</a>

so how can I change this my <a></a> to make it work

Thanks for your help
解决方案
The code in your example is using jQuery.  Either include jQuery, or go with a non-jQuery solution like so:
document.getElementById('propertytype').addEventListener('submit', function (event) {
    event.preventDefault();

    window.location.href = "/"; //whatever you want
});
Note that the above is not cross-browser compatible; you would have to also use attachEvent.



To use the <a>, I would just bind to the click event:
$("#propertysearch a").on('click', function (e) {
    event.preventDefault();

    //submission code
});

//pre jQuery 1.7
$("#propertysearch a").bind('click', function (e) {


                        
这篇关于从表单提交自定义查询字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！