djfenom
asked on
Ajax form submitting onchange of any form field
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
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;
});
});
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);
}
});
});
});
ASKER
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.
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"> </div>
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:
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);
}
});
}
});
});
Also, may have to separate the functionality out a bit to get the query to run after your auto suggest code runs.
See below:
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);
}
});
}
ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That works great, many thanks!
Open in new window