Solved

Ajax form submitting onchange of any form field

Posted on 2011-02-23
8
497 Views
Last Modified: 2012-05-11
I have a form with multiple fields that when submitted, the results are retrieved via ajax on the same page. This works perfectly. However, to retrieve the results you have to press a button, submitting the form.

I would like it so that if any of the fields are changed, the results are updated without having to press the button, kind of like a search filter. There are currently several text fields, a couple of dropdowns and there will be a few checkboxes.

The form is currently processed using the attached code.

Thanks


$(function() {

  $("form#search").submit(function(){
	  
	var range = $("#range").val();
	var subcat = $("#subcat").val();
	var colour = $("#colour").val();
	var size1 = $("#size").val();
	
	var dataString = 'range='+ range + '&subcat=' + subcat + '&colour=' + colour + '&size=' + size1;
		
     $.ajax({
		type: "POST",
		url: "/search_results.php",
		data: dataString,
		success: function(data){
			$("#results").empty().html('<img src="/images/ajax-loader.gif" class="loader" />');
			setTimeout(function() {
				$("#results").html(data);
			}, 1500);
        }
     });
     return false;
  });

});

Open in new window

0
Comment
Question by:djfenom
  • 5
  • 3
8 Comments
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34960859
Probably could do something like this:
$('input, select').change(function()
{
    var range = $("#range").val();
	var subcat = $("#subcat").val();
	var colour = $("#colour").val();
	var size1 = $("#size").val();
	
	var dataString = 'range='+ range + '&subcat=' + subcat + '&colour=' + colour + '&size=' + size1;
		
     $.ajax({
		type: "POST",
		url: "/search_results.php",
		data: dataString,
		success: function(data){
			$("#results").empty().html('<img src="/images/ajax-loader.gif" class="loader" />');
			setTimeout(function() {
				$("#results").html(data);
			}, 1500);
        }
     });
});

Open in new window

0
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34960931
Sorry, in case it's not obvious, you'd want to wrap the above script inside of a $(document).ready() function like this:
 
$(document).ready(function ()
{
    $('input, select').change(function ()
    {
        var range = $("#range").val();
        var subcat = $("#subcat").val();
        var colour = $("#colour").val();
        var size1 = $("#size").val();

        var dataString = 'range=' + range + '&subcat=' + subcat + '&colour=' + colour + '&size=' + size1;

        $.ajax({
            type: "POST",
            url: "/search_results.php",
            data: dataString,
            success: function (data)
            {
                $("#results").empty().html('<img src="/images/ajax-loader.gif" class="loader" />');
                setTimeout(function ()
                {
                    $("#results").html(data);
                }, 1500);
            }
        });
    });            
});

Open in new window

0
 

Author Comment

by:djfenom
ID: 34961047
Ok, that's working, but I have a couple of autosuggest fields which when submitted by the button passed whatever was selected from the autosuggest dropdown. Now that no button is pressed if you start typing say Gr and then select Green, the value that is passed is just the Gr bit which is giving false results?

Code for this is attached.
<script>
function lookup(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("/list_colours.php", {queryString: ""+inputString+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#colour').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
</script>

<input type="text" id="colour" name="colour" onblur="fill();" onkeyup="lookup(this.value);" value="Type a colour..." title="Type a colour..." size="30" class="loseit1" autocomplete="off" />
            <div class="suggestionsBox" id="suggestions" style="display:none;"> <img src="/images/upArrow.png" class="uparrow" alt="upArrow" />
              <div class="suggestionList" id="autoSuggestionsList"> &nbsp; </div>

Open in new window

0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34961507
Hmm, my thinking is that when the 'change' event is fired, before you do that ajax request which fills $('#results'), you need to do another ajax request to validate if $('#colour') holds a correct colour value.  Pretty much like a pre-query.  Just something simple to see if the colour exists in your color list on the server, and then return a true/false back to the client.

Probably have to tweak it a bit, but something like this:
 
$(document).ready(function ()
{
    $('input, select').change(function ()
    {
        var colour = $("#colour").val();
        var validcolour = false;

        $.ajax({
            type: "GET",
            url: '/list_colours.php',
            data: 'colourcheck=' + colour,
            success: function (data)
            {
                //server should return simple boolean value here
                validcolour = data;
            }
        });

        if (validcolour)
        {
            var range = $("#range").val();
            var subcat = $("#subcat").val();
            var size1 = $("#size").val();

            var dataString = 'range=' + range + '&subcat=' + subcat + '&colour=' + colour + '&size=' + size1;

            $.ajax({
                type: "POST",
                url: "/search_results.php",
                data: dataString,
                success: function (data)
                {
                    $("#results").empty().html('<img src="/images/ajax-loader.gif" class="loader" />');
                    setTimeout(function ()
                    {
                        $("#results").html(data);
                    }, 1500);
                }
            });
        }                
    });
});

Open in new window

0
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34961592
Also, may have to separate the functionality out a bit to get the query to run after your auto suggest code runs.
See below:
 
$(document).ready(function ()
{
    $('input, select').change(function ()
    {
        var colour = $("#colour").val();
        var validcolour = false;

        $.ajax({
            type: "GET",
            url: '/list_colours.php',
            data: 'colourcheck=' + colour,
            success: function (data)
            {
                //server should return simple boolean value here
                validcolour = data;
            }
        });

        if (validcolour)
        {
            GetResults(colour);
        }
    });
});

function fill(thisValue)
{
    $('#colour').val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
    GetResults(thisValue);
}

function GetResults(colour)
{
    var range = $("#range").val();
    var subcat = $("#subcat").val();
    var size1 = $("#size").val();

    var dataString = 'range=' + range + '&subcat=' + subcat + '&colour=' + colour + '&size=' + size1;

    $.ajax({
        type: "POST",
        url: "/search_results.php",
        data: dataString,
        success: function (data)
        {
            $("#results").empty().html('<img src="/images/ajax-loader.gif" class="loader" />');
            setTimeout(function ()
            {
                $("#results").html(data);
            }, 1500);
        }
    });
}

Open in new window

0
 

Author Comment

by:djfenom
ID: 34961761
Thanks P1ST0LPETE, I have a couple of issues though:

Firstly, there is 2 autocomplete boxes and secondly, the user won't necessarily use the autosuggest in the way it is meant to be used. For example, they may type in a colour and not select from the list, like you can in Google, if this is the case then the colour will be passed as undefined and not display the results.
0
 
LVL 10

Accepted Solution

by:
P1ST0LPETE earned 500 total points
ID: 34963116
Ok, scratch the idea of the pre-query.

Check this idea.  Give your ajax request like a 1 second delay before it fires off.  This should give the fill() function the time it needs to populate the auto complete box BEFORE the GetResults() function accesses the value of the auto complete box .  However, you only want to apply this delay when the user is currently working in one of the auto complete fields.  See below:
 
$(document).ready(function ()
{
    $('select, input').change(function ()
    {
        if (this.id == 'Colour' || this.id == 'YourOtherAutoCompleteId')
        {
            setTimeout("GetResults()", 1000);
        }
        else GetResults();
    });
});

function GetResults()
{
    var range = $("#range").val();
    var subcat = $("#subcat").val();
    var colour = $("#colour").val();
    var size1 = $("#size").val();

    var dataString = 'range=' + range + '&subcat=' + subcat + '&colour=' + colour + '&size=' + size1;

    $.ajax({
        type: "POST",
        url: "/search_results.php",
        data: dataString,
        success: function (data)
        {
            $("#results").empty().html('<img src="/images/ajax-loader.gif" class="loader" />');
            setTimeout(function ()
            {
                $("#results").html(data);
            }, 1500);
        }
    });
}

Open in new window

You may want to test a bit to see if you can shorten the delay.  I was able to manually test this theory with just a 2 second delay, and I would image code can operate much faster than my fingers can type :-).  1000 milliseconds is just playing it safe.

0
 

Author Comment

by:djfenom
ID: 34995425
That works great, many thanks!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
XML extra information 8 28
What if i make webbased alternative for MS Access 5 67
Extracting content from meta tag PHP MYHTML DOM 3 20
Ajax and PHP 4 29
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question