JS code to change form submit is not working

Question

I have a form that has many fields in it. I am using JS code to modify the parameters submitted by that form via GET request.

Basically the form submits 3 params- search_address, search_city,search_state, search_zip along with other params-- My JS code just combines the address, city, state, and zip params into a single param and modifies the search query accordingly.

But when I run the page with the code below, the original query goes through as it is- as if the JS code has no effect. What am I doing wrong here?

This is the HTML code for the form HTML tag--

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

This is the HTML code for the submit button--

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

This is the Javascript code for submit_form function--

 <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>

Answer 1

Do not declare the submit event into a function.

Also remove inline code onclick="JavaScript:submit_form()"

And finally, do not forget the # of the form selector $('#searchform') to select the id (or . to select the class)

$(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;
    });
});

Answer 2

Your selector is incorrect. Plus you are registering the handler again and again, calling the submit button click. You dont need it. Just place your handler under document.ready to register first up.

Script

<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>

Remove onclick="JavaScript:submit_form()" from your button as you don't need it.

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

Demo

Answer 3

You forgot a dot to designate the class, see:

$('searchform').submit( function() {
   ^----- HERE you lack a dot . to select class name

Answer 4

You need use preventDefault() :

function submit_form()
{
    $('.searchform').submit( function(e) {
         e.preventDefault();
         //rest of code
    });
}

• second add dot to selector .searchform ;
• third remove onclick="JavaScript:submit_form()" from your form