How to check if a form variable has a value?

I’m fairly new to js, having to learn alot while I go so apologies if this is an easy question.

I need to change the code below so that it will check to see if there is a value for the model variable, its a select dropdown in a form.
If there is no value then I don’t want the var model to be included in the url part.

I also need to check to see if the var pics is checked (its a checkbox) if its checked then i want to include it, if its not checked then again I need to miss it our from the url part.

Can anyone help me please? I’ve posted a few help threads on here now with no-one repling, if I’ve not given enough detail with this for anyone to be able to help me please tell me. I really need help with this, I’ve posted the full js function below.

Thanks in advance.


function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxDiv');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
var drop_1 = document.getElementById('drop_1').value;
var model = document.getElementById('model').value;
var mileage = document.getElementById('mileage').value;
var colour = document.getElementById('colour').value;
var min_price = document.getElementById('min_price').value;
var max_price = document.getElementById('max_price').value;
var min_engine_size = document.getElementById('min_engine_size').value;
var max_engine_size = document.getElementById('max_engine_size').value;
var pics = document.getElementById('pics').value;
var keywords = document.getElementById('keywords').value;
var queryString = "?drop_1=" + drop_1 + "&model=" + model + "&mileage=" + mileage + "&colour=" + colour + "&min_price=" + min_price + "&max_price=" + max_price + "&min_engine_size=" + min_engine_size + "&max_engine_size=" + max_engine_size + "&pics=" + pics + "&keywords=" + keywords;
ajaxRequest.open("GET", "filtered-cars.php" + queryString, true);
ajaxRequest.send(null); 

}


please can someone help me with this I’ve been trying to get this page working for over 14 hours now. someone must know how to do this…please.

Hi.

Yeah I know your frustration, I just spent last week losing hair over Ajax junk in forms. Lawlz.

I need to change the code below so that it will check to see if there is a value for the model variable, its a select dropdown in a form.
If there is no value then I don’t want the var model to be included in the url part.

I also need to check to see if the var pics is checked (its a checkbox) if its checked then i want to include it, if its not checked then again I need to miss it our from the url part.

Javascript’s API is the DOM, so I think we really need you to post the HTML that this JS is working with. For example, a dropdown always has a value (you mean a select element with options? There’s always one selected unless the whole input is disabled), so we’d need to know what you mean. I’m clumsy with JS so this might not be the cleanest way, but I loop through the select elements options and check to see who the selectedIndex is, and what its value is.
var model = document.getElementById(‘model’).value;
shouldn’t work on a select. Those ones are just more work. Lawlz.

The checkbox is easier: checkboxes have an attribute called “checked” and you can see if that’s true or not with an if/else.
I believe
if (pics.checked) {
do stuff;
}
would work. Browsers give back different values when an attribute doesn’t exist… some give null, some false, I forget… but so far as I know, those would all be false and the if statement should fail if it’s not checked. Otherwise, if (pics.checked = true) maybe.

I’m also pretty sure you don’t want to have the ajax function declare all those other vars-- do that elsewhere. You should assign all those values somewhere else, and after you have them, and after you’ve figured out your URL, then it’s time to call the ajax function.

Because ajax is asynchronous (the “a” of ajax), the problem I’ve always had with it is when it seems to be able to get me a value and then just dies. Oh yes, it was because some other function continued on its merry way before the ajax part was done, and that function never got the value.

I’ve been getting around that by using a callback: in teh part of your ajax function where you get the response, you send that back to the callback (who’s in another function) and that callback can Do Stuff… since it won’t run until the response comes in (it can’t), it’s how you make everything wait til the response comes in before doing stuff.

And a final thing: can users search for these things without JS? (ideally, yes)

I’ve tried what you suggested with the checkbox but I can’t get it to work.
JS is not my strong point at all, I’m learning as I go and in this case failing!!

Here’s the full js code below can anyone see where its going wrong? All I’m trying to do is check if pics checkbox is selected and if so set the var photos to equal Yes.


function showTotalUsedBikes(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ticker');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var drop_1 = document.getElementById('drop_1').value;
	var model = document.getElementById('model').value;
	var mileage = document.getElementById('mileage').value;
	var colour = document.getElementById('colour').value;
	var age = document.getElementById('age').value;
	var min_price = document.getElementById('min_price').value;
	var max_price = document.getElementById('max_price').value;
	var min_engine_size = document.getElementById('min_engine_size').value;
	var max_engine_size = document.getElementById('max_engine_size').value;
	//var pics = document.getElementById('pics').value;
	//var pics = $('input:checkbox:checked').val();        // get the value from a checked checkbox
	if (pics.checked = true) {
		var photos = "Yes";
	}
	else {
  		var photos = "No";
  	}
	
	var keywords = document.getElementById('keywords').value;
	var queryString = "?drop_1=" + drop_1 + "&model=" + model + "&mileage=" + mileage + "&colour=" + colour + "&age=" + age + "&min_price=" + min_price + "&max_price=" + max_price + "&min_engine_size=" + min_engine_size + "&max_engine_size=" + max_engine_size + "&pics=" + photos + "&keywords=" + keywords + "&page=" + pagenum;
	ajaxRequest.open("GET", "numberOfBikes.php" + queryString, true);
	ajaxRequest.send(null); 
}

With that code above, pics will always be undefined. You may want to uncheck that first pics line.

Or, you could combine things together:


var pics = document.getElementById('pics').checked ? 'Yes' : 'No';