PDA

View Full Version : AJAX dropdown not working.


tux
01-21-2010, 04:27 PM
Hi all,

I have been following Davidj's AJAX vids and am trying to adapt them to fit a form on my website.

I can't seem to get it working. Below is the relevant code, can anyone see where I'm going wrong.

My form which is on edit_product.php.....

<form name="upload" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="submitted" id="submitted" value="1" />
<input type="hidden" name="imageID" id="imageID" value="<?php echo $imageID; ?>" />

<div class="form_line"><label for="product_group">Product Category</label><select name="productCatID" id="productCatID" onchange="editProductFunction()"/>
<option value="">Select a Product Category</option>
<?php do{ ?>
<option value="<?php echo $productCat['productCatID']; ?>" <?php if(!(strcmp($productCat['productCatID'], $productCatID))){echo "selected";}?>><?php echo $productCat['productCat']; ?></option>
<?php }while($productCat = @mysql_fetch_array($result5)); ?>
</select>
</div>

<div class="form_line"><label for="choose_product">Choose Product</label><select name="choose_product" id="choose_product" />
<option value="">Select a Product</option>
<div id='product_option'></div>
</select>
</div>
<p>&nbsp;</p>

<div class="form_line"><label for="edit_product">Edit Product</label><input name="edit_product" type="text" id="edit_product" value="" onkeyup="updateCounter(this, 40, 'title', 'countArea1');" onpaste="updateCounter(this, 40, 'title', 'countArea1');"/>
<div class="small_text"><b id="countArea1">40</b> Characters Left.</div>
</div>

<div class="form_line"><label for="product_price">Edit Price</label><input name="product_price" type="text" id="product_price" value="" />
<div class="small_text">This format: 0.00 Pound sign ( ) not required.</div>
</div>

<div class="form_button"><input type="image" name="edit" value="edit" src="Images/Buttons/button_edit.gif" alt="Edit Product" title="Edit Product" />
</div>
</form>

My javascript which is edit_product.js.....

// JavaScript Document
function editProductFunction(){

var ajaxRequest; // magic variable

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;
}
}
}

// Receive Data Function
ajaxRequest.onreadystatechange = function(){

if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('product_option');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}

}

var productCatID = document.getElementById('productCatID').value;

var queryString = "?productCatID=" + productCatID;
ajaxRequest.open("GET", "edit_product_process.php" + queryString, true);
ajaxRequest.send(null);
}

and my PHP process page which is edit_product_process.php.....

<?php

require_once("Connection/PTPconnection.php"); // database connection

$productCatID = $_GET['productCatID'];

//build query
$query = sprintf("SELECT * FROM products WHERE productCatID = '$productCatID'");
$result = @mysql_query($query);
$product = @mysql_fetch_array($result);

$productID = $product['productID'];
$productName = $product['productName'];

//Build Result String


// Insert a new row in the table for each product returned
do {

$dropdown = "<option value=".$productID.">".$productName."</option>";

}while ($product = mysql_fetch_array($result));


echo $dropdown;

?>

Thanks, Paul

tux
01-21-2010, 08:31 PM
Okay I have this sorted and is working fine.

I have posted my altered PHP and Form so anyone interested can see my changes.

The only thing is that I wanted to only dynamically populate the 'option' tags in the form but could only get it to work by dynamically building the whole 'div' as you will see.

If anyone knows how I could just do the 'option' tags please let me know.

Cheers, Paul

Modified PHP:

<?php

require_once("Connection/PTPconnection.php"); // database connection

$productCatID = $_GET['productCatID'];

//build query
$query = sprintf("SELECT * FROM products WHERE productCatID = '$productCatID'");
$result = @mysql_query($query);
$product = @mysql_fetch_array($result);

//Build Result String
$dropdown = "<div class=\"form_line\"><label for=\"choose_product\">Choose Product</label>";
$dropdown .= "<select name=\"choose_product\">";
$dropdown .= "<option value=\"\">Select a Product</option>";

// and populate dropdown with products
do {

$dropdown .= "<option value=".$product['productID'].">".$product['productName']."</option>";

}while ($product = mysql_fetch_array($result));

$dropdown .= "</select>";
$dropdown .= "</div>";

echo $dropdown;

?>

Modified Form:

<form name="upload" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="submitted" id="submitted" value="1" />
<input type="hidden" name="imageID" id="imageID" value="<?php echo $imageID; ?>" />

<div class="form_line"><label for="product_group">Product Category</label><select name="productCatID" id="productCatID" onchange="editProductFunction()"/>
<option value="">Select a Product Category</option>
<?php do{ ?>
<option value="<?php echo $productCat['productCatID']; ?>" <?php if(!(strcmp($productCat['productCatID'], $productCatID))){echo "selected";}?>><?php echo $productCat['productCat']; ?></option>
<?php }while($productCat = @mysql_fetch_array($result5)); ?>
</select>
</div>

<div id="product_option"></div><!-- Javascript call goes in this div -->

<p>&nbsp;</p>

<div class="form_line"><label for="edit_product">Edit Product</label><input name="edit_product" type="text" id="edit_product" value="" onkeyup="updateCounter(this, 40, 'title', 'countArea1');" onpaste="updateCounter(this, 40, 'title', 'countArea1');"/>
<div class="small_text"><b id="countArea1">40</b> Characters Left.</div>
</div>

<div class="form_line"><label for="product_price">Edit Price</label><input name="product_price" type="text" id="product_price" value="" />
<div class="small_text">This format: 0.00 Pound sign ( ) not required.</div>
</div>

<div class="form_button"><input type="image" name="edit" value="edit" src="Images/Buttons/button_edit.gif" alt="Edit Product" title="Edit Product" />
</div>
</form>