[英]JS code to change form submit is not working
我有一個包含許多字段的表單。 我正在使用JS代碼通過GET請求修改該表單提交的參數。
基本上,表單提交3個params-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>
不要將submit事件聲明為函數。
同時刪除內聯代碼onclick="JavaScript:submit_form()"
最后,不要忘了#
的形式選擇的$('#searchform')
來選擇ID(或者.
選擇類)
$(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;
});
});
你的選擇器不正確。 另外,您一次又一次地注冊處理程序,調用提交按鈕單擊。 你不需要它。 只需將處理程序置於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%" />
你忘記了一個點來指定課程,請參閱:
$('searchform').submit( function() {
^----- HERE you lack a dot . to select class name
你需要使用preventDefault()
:
function submit_form()
{
$('.searchform').submit( function(e) {
e.preventDefault();
//rest of code
});
}
.searchform
; onclick="JavaScript:submit_form()"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.