Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Passing variable to AJAX

    Hey everyone!

    So I've had this problem that Ive been working on for nearly 2 weeks now, Im so stuck! Im good with PHP, but still pretty new to javascript/AJAX.

    Essentially what I have is a form where users can come to request equipment, in part of the form there are two fields, (Serverostype[] and serverosversion). On my page, users have the ability to add multiple sets of those two fields, so if they have more than one system they can specify the serverostype and serverosversion for each.

    Im using ajax so that when a user selects serverostype, Onchange the dropdown for serverosversion populates with answers, this is done through checking for the div called "divid" Where Im running into a problem is when I add multiple fields and I set my options for the first set, if I continue to any of the other fields ive added, and change "serverostype" it autmatically is going back and changing the first set of fields, not the one that corresponds with it.

    Im trying to be as specific as I can, sorry if this is coming out confusing.


    Essentially I think I need to figure out a way to:

    1) give each div a unique name when the fields are duplicated
    2) when a user goes to change ANY of the fields "serverostype[]" that it will pass a value of the DIV that field is in to the ajax script so that it knows which field to send the results back to.

    Any and all help is appreciated!


    p.s. this is an example of what the script looks like in action so far,



    note that the first set says its operating system is windows, and the second set says its operating system is AIX, since AIX was chosen last, the first sets "version" has been changed to AIX when its supposed to be Windows.


    Code:
    <html>
    <head>
    <title>DROPDOWNNNNNN! RAWR</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <?php
    
    include("../../home/functions.php");
    ?>
    <?php
    $idnum = '1';
    ?>
    <script>
    function getXMLHTTP() { //fuction to return the xml http object
    		var xmlhttp=false;	
    		try{
    			xmlhttp=new XMLHttpRequest();
    		}
    		catch(e)	{		
    			try{			
    				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			catch(e){
    				try{
    				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    				}
    				catch(e1){
    					xmlhttp=false;
    				}
    			}
    		}
    		 	
    		return xmlhttp;
    	}
    	
    	
    	
    	function getOSV(strURL) {		
    		
    		var req = getXMLHTTP();
    		
    		if (req) {
    			
    			req.onreadystatechange = function() {
    				if (req.readyState == 4) {
    					// only if "OK"
    					if (req.status == 200) {						
    						document.getElementById('osdiv'+' ').innerHTML=req.responseText;						
    					} else {
    						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    					}
    				}				
    			}			
    			req.open("GET", strURL, true);
    			req.send(null);
    		}
    				
    	}
    </script>
    
    
    
    
    <!--Below Script used to control adding / deleting servers / client machines-->	
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript">
    $(function(){ addDuplicateFormFuncs(); });
    
    function addDuplicateFormFuncs(){
    
    	$(".inputs").each(function(i){//for each set of .inputs being set1, set2, set3 etc...
    		
    		repeat(this.id); // get the current id of the .inputs element and pass it to the repeat function
    		
    		function repeat(currentSet){
    	
    			var totalInputs = $("#" + currentSet + " .formInputs").length;//get current length of .formInputs of the current set ex. = #set1 .formInputs
    			
    			$("#" + currentSet + " .formInputs:last .add:visible").click(function(){//add click handler to current sets .add ex. = #set1Input1 .add
    				
    				$("#" + currentSet + " .formInputs:last .add").css({"visibility":"hidden"});//hide button for current sets .add
    				$("#" + currentSet + " .formInputs:last .add").unbind();//remove click event from the prior input			
    				$("#" + currentSet + " .formInputs:last").after("<?php
    					//connnects to mssql
    					$con = mssql_connect("localhost","uiuser","uiuser");
    					mssql_select_db('CSSLAB', $con);
    					$query="select DISTINCT platform from OS WHERE status='Active'";
    					$result = mssql_query($query);
    					?><span class=\"formInputs\" id='"+currentSet+"Input"+($("#" + currentSet + " .formInputs").length + 1)+"'><select name=\"serverostype[]\" onChange=\"getOSV('findcity.php?serverostype='+this.value)\"><option value=''>Select OS</option><?php while($row=mssql_fetch_array($result)) { ?><option value='<?php echo $row['platform'] ?>'><?php echo $row['platform'] ?></option><?php } ?></select>OS Version<div id='osdiv'><select name='serverosversion'><option>Select OS Version</option></select></div></td></tr>&nbsp; <a href='#' class='remove'><img src='../removeBtn.gif' alt='remove' /></a>&nbsp;<a href='#' class='add'><img src='../addBtn.gif' alt='add' /></a><br><br></span>")// add another set of inputs for a specific set				
    				if ($("#"+currentSet).parent()[0].scrollHeight != 700){//scroll box 
    					$("#"+currentSet).parent()[0].scrollTop = $("#"+currentSet).parent()[0].scrollHeight;
    				}				
    				$("#" + currentSet + " .formInputs").removeClass("oddBg");//remove oddBg class
    				$("#" + currentSet + " .formInputs:odd").addClass("oddBg");//add back in oddBg class				
    				$("#"+currentSet+" .formInputs input").each(function(){//update the name attribute of the new Input added
    					this.name = "";
    					var inputName = ($(this).parent().parent().attr('id')) + this.alt;
    					this.name = inputName + counter;
    					//this.value = inputName;
    				})		
    				$("#"+currentSet+"Input"+ (totalInputs + 1) +" .remove").click(function(){//bind click event to the remove button	
    					if($(this).parent().next().length == 0){//if there are no inputs after these inputs then you are the last one so...
    					$(this).parent().prev().children(".add").css({"visibility":"visible"});//naviagte to the prior inputs and turn on the add 
    					}					
    					$(this).parent().remove();//remove this inputs for a specific set					
    					$("#" + currentSet + " .formInputs").removeClass("oddBg");//remove oddBg class
    					$("#" + currentSet + " .formInputs:odd").addClass("oddBg");//add back in oddBg class				
    					$("#" + currentSet + " .formInputs").each(function(i){
    						this.id = currentSet + "Input" + (i + 1);
    						$("#"+currentSet+" .formInputs input").each(function(){//update the name attribute of the new Input added
    						this.name = "";
    						var inputName = ($(this).parent().parent().attr('id')) + this.alt;
    						this.name = inputName;
    						//this.value = inputName;
    				})
    					})					
    					repeat(currentSet); //run the repeat function again on the new instance of the DOM, with elements removed					
    					return false; //stop browser defalut event of href
    				})
    								repeat(currentSet); //run this function again on the new instance of the DOM, with elements added
    						return false;//stop browser defalut event of href		
    			})//end click handler			
    		}//end repeat function		
    	})//end each for .inputs
    }
    </script>
    </head>
    
    <body>
    <?php
    //connnects to mssql
    $con = mssql_connect("localhost","uiuser","uiuser");
    mssql_select_db('CSSLAB', $con);
    $query="select DISTINCT platform from OS WHERE status='Active' ORDER by platform desc";
    $result = mssql_query($query);
    ?>
    
    <div class="overFlowAdds">
    <span id="set1" class="inputs">
    <span class="formInputs" id="set1Input1">
    <form method="post" action="" name="form1">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="120">Operating System</td>
        <td  width="120">
    	<select name="serverostype[]" onChange="getOSV('findcity.php?serverostype='+this.value)">
    	<option value="">Select OS</option>
    	<?php while($row=mssql_fetch_array($result)) { ?>
    	<option value="<?php echo $row['platform'] ?>"><?php echo $row['platform'] ?></option>
    	<?php } ?>
     </select></td>
      </tr>
      <tr style="">
        <td>OS Version</td>
        <td ><div id="osdiv<?php $idnum ?>">
    <select name="serverosversion">
    	<option>Select OS Version</option>
            </select></div></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
     <a href="#" class="add"><img src="../addBtn.gif" alt="add" /></a>
    </span>
    </span>
    </div>
    Last edited by chasebadkids; 05-29-2009 at 10:26 PM. Reason: added image


 

Posting Permissions

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