SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Code JavaScript:
    [CODE]
    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); 
    }[/CODE]

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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)

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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.

    Code JavaScript:
    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); 
    }

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    With that code above, pics will always be undefined. You may want to uncheck that first pics line.

    Or, you could combine things together:

    Code javascript:
    var pics = document.getElementById('pics').checked ? 'Yes' : 'No';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •