0

我有一个表格，里面有很多字段。我正在使用 JS 代码来修改该表单通过 GET 请求提交的参数。

基本上，表单提交 3 个参数——search_address、search_city、search_state、search_zip 以及其他参数——我的 JS 代码只是将地址、城市、州和 zip 参数组合成一个参数并相应地修改搜索查询。

但是当我使用下面的代码运行页面时，原始查询按原样执行——好像 JS 代码没有效果一样。我在这里做错了什么？

这是表单 HTML 标记的 HTML 代码——

 <form method="get" class="searchform" id="searchform" action="target_URL_value">

这是提交按钮的 HTML 代码——

 <input type="submit" class="submit" name="submit" id="searchsubmit" onclick="JavaScript:submit_form()" style="width:20%" />

这是 submit_form 函数的 Javascript 代码——

 <script>

 function submit_form()
 {
     $('searchform').submit( function() {
         var $form = $(this);
         //Arvind IMP put the below paraemeter's name as s or the value of name in Search field of original header.php in parent template...
         // This is a typical search string
         //?post_type=property&search_keyword=&submit=Search&price-min=&price-max=&city=&state=&zip=&beds=&baths=&sqft=&status=
         var data = 'post_type='+$('#post_type').val()+'&search_keyword='+$('#search_address').val()+", "+$('#search_city').val()+", "+$('#search_state').val()+", "+$('#search_zip').val()  
         + '&price-min='+$('#price-min').val()+ '&price-max='+$('#price-max').val() +'&city='+$('#search_city').val()
         + '&state='+$('#search_state').val()+ '&zip='+$('#search_zip').val() +'&beds='+$('#beds').val()
         + '&sqft='+$('#sqft').val()+ '&status='+$('#status').val();
         $.get( $form.attr('action'), data);
         return false;
     });
 }
 </script>
4

4 回答 4

1

不要将提交事件声明为函数。

同时删除内联代码onclick="JavaScript:submit_form()"

最后，不要忘记选择 id（或选择类）#的表单选择器$('#searchform').

$(document).ready(function () {
    $('#searchform').submit(function () {
        var $form = $(this);
        //Arvind IMP put the below paraemeter's name as s or the value of name in Search field of original header.php in parent template...
        // This is a typical search string
        //?post_type=property&search_keyword=&submit=Search&price-min=&price-max=&city=&state=&zip=&beds=&baths=&sqft=&status=
        var data = 'post_type=' + $('#post_type').val() + '&search_keyword=' + $('#search_address').val() + ", " + $('#search_city').val() + ", " + $('#search_state').val() + ", " + $('#search_zip').val() + '&price-min=' + $('#price-min').val() + '&price-max=' + $('#price-max').val() + '&city=' + $('#search_city').val() + '&state=' + $('#search_state').val() + '&zip=' + $('#search_zip').val() + '&beds=' + $('#beds').val() + '&sqft=' + $('#sqft').val() + '&status=' + $('#status').val();
        $.get($form.attr('action'), data);
        return false;
    });
});
于 2013-06-01T18:44:41.487 回答
1

您的选择器不正确。另外，您一次又一次地注册处理程序，调用提交按钮单击。你不需要它。只需将您的处理程序放在 document.ready 下即可先注册。

脚本

<script>
$(function(){
$('.searchform').submit(function () {

        var $form = $(this);
        //Arvind IMP put the below paraemeter's name as s or the value of name in Search field of original header.php in parent template...
        // This is a typical search string
        //?post_type=property&search_keyword=&submit=Search&price-min=&price-max=&city=&state=&zip=&beds=&baths=&sqft=&status=
        var data = 'post_type=' + $('#post_type').val() + '&search_keyword=' + $('#search_address').val() + ", " + $('#search_city').val() + ", " + $('#search_state').val() + ", " + $('#search_zip').val() + '&price-min=' + $('#price-min').val() + '&price-max=' + $('#price-max').val() + '&city=' + $('#search_city').val() + '&state=' + $('#search_state').val() + '&zip=' + $('#search_zip').val() + '&beds=' + $('#beds').val() + '&sqft=' + $('#sqft').val() + '&status=' + $('#status').val();
        $.get($form.attr('action'), data);
        return false;
    });
});
</script>

从您的按钮中删除onclick="JavaScript:submit_form()"，因为您不需要它。

<input type="submit" class="submit" name="submit" id="searchsubmit" style="width:20%" />

演示

于 2013-06-01T18:45:57.650 回答
0

您忘记了一个点来指定类，请参阅：

$('searchform').submit( function() {
   ^----- HERE you lack a dot . to select class name
于 2013-06-01T18:42:48.303 回答
0

你需要使用preventDefault()：

function submit_form()
{
    $('.searchform').submit( function(e) {
         e.preventDefault();
         //rest of code
    });
}
  • 第二个添加点到选择器.searchform；
  • 第三次onclick="JavaScript:submit_form()"从您的表格中删除
于 2013-06-01T18:43:10.380 回答