[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 426
  • Last Modified:

How to append jQuery AJAX results in the form of <options> for my form?

Experts,

I am attempting to build my form dynamically based on what a user selects.

How can I append the results of my query as <option></option> tags to my second select?

My query is executing perfectly and returns a result but, I am unsure about the <option> portion of this task.

<script type="text/javascript">
$(document).ready(function() {
	$("#JobSite").change(function() {
		// SHOW LOADING IMAGE
		$('.loading_image_sm').show();
		$("#JobDepartment").load("./scripts/test.php?ajax_post=get_department", { value: $(this).val() }, 
			function() {
				//HIDE LOADING IMAGE WHEN QUERY COMPLETED SUCCESSFULLY
				$('.loading_image_sm').hide();			
				var items = [];
				$.each(data, function( key, val ) {
					items.push( "<option value='" + val + "'>" + val + "</option>" );
				});
				$( "#JobDepartments").append(items);
			}
		);
	});
});
</script>

Open in new window


<table cellpadding="2" cellspacing="2" border="0" width="100%">
    <tr>
        <td><b>Site Name: </b></td>
        <td>
            <select id="JobSite">
            <?php
                while($distinct_site = mysql_fetch_array($get_site_query)){
                    echo'<option value="'.$distinct_site['JobSite'].'">'.$distinct_site['JobSite'].'</option>';
                }
            ?>
            </select>
        </td>
    </tr>                
    <tr>
        <td><b>Department Name: </b></td>
        <td>
            <select id="JobDepartment">
                <?php echo $job_department; ?>
            </select>
            <img src="./images/ajax-loader_sm.gif" class="loading_image_sm" />
        </td>
    </tr>
</table>

Open in new window


test.php
		$job_department_sql = "SELECT DISTINCT JobDepartment FROM jobs WHERE JobSite='".$_POST['value']."' ORDER by JobDepartment ASC";
		$job_department_query = mysql_query($job_department_sql) or die ("Could not run query: " . $job_department_sql . "<br />\n" . mysql_error () );
		while($job_department = mysql_fetch_array($job_department_query)){			
			$departments[] = array("JobDepartment"=>$job_department['JobDepartment']);
		}
	//SEND AUTO-SUGGESTION BOX DATA IN A JSON FORMAT
	echo json_encode($departments);

Open in new window

0
evibesmusic
Asked:
evibesmusic
1 Solution
 
RobOwner (Aidellio)Commented:
Is there a reason you're sending json format?

If your test.php just returned the actual html like you do for your first select, it's as easy as leaving the .load()

e.g.

		$("#JobDepartment").load("./scripts/test.php?ajax_post=get_department", { value: $(this).val() }, 
			function() {
				//HIDE LOADING IMAGE WHEN QUERY COMPLETED SUCCESSFULLY
				$('.loading_image_sm').hide();			
			}
		);

Open in new window


test.php
		$job_department_sql = "SELECT DISTINCT JobDepartment FROM jobs WHERE JobSite='".$_POST['value']."' ORDER by JobDepartment ASC";
		$job_department_query = mysql_query($job_department_sql) or die ("Could not run query: " . $job_department_sql . "<br />\n" . mysql_error () );
		while($job_department = mysql_fetch_array($job_department_query)){			
                        echo'<option value="'.$job_department['jobDepartment'].'">'.$job_department['jobDepartment'].'</option>';
                
		}

Open in new window

0
 
evibesmusicAuthor Commented:
@Rob (tagit):

Thank you. Sometimes I make things much more difficult than needed.

Simply returning the results of the PHP while loop worked perfectly.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now