Forums

Hi Bob. The AJAX double drop down works great in my form. However, I have a question that I know is possible to do but don't know how. Currently, the second drop down says "Please select district" if the first drop down menu is not yet selected. What I want to do is to show all the data in the second drop down menu even though the first drop down is not yet selected, and when the second drop down is selected, it will automatically show the district as well. Is that possible? PLease advice. Thanks.

Hi jmarian1,

I guess so - not sure how it adds value to the form though. I think that the Ajax replaces all the current options so if you create the form with a 'full' select box then changing district will replace show a shorter list.

Bob

Hi Bob, is it complicated? I don't know AJAX and although I am willing to learn. It's fine if they select the district and make a shorter list after in the second drop down but how can I add it in my code to show the list in the second drop down instead of just a message "Please select ....". And on the other side, able to select the district right away when school is selected. I mean both able to select each other and vice versa. Any idea how to include it in the code? PLease advice. Thanks.

custom form code

<?php
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `DistrictCode`, `DistrictName`
FROM `#__district`
ORDER BY `DistrictName`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
?>
<select size="1" id="district" class=" validate['required']" title="" name="district">
<option value="">District is required.</option>
<option value="" selected="selected">Select District</option>
<?php
foreach($data as $d) {
echo " <option value='".$d->DistrictName."'>".$d->DistrictName."</option>";
}
?>
</select>
<div class="clear"></div>
<div id="error-message-district"></div>
</div>
 <div class="formfield" id="autoID-08ade1b79ac61a2f2638fa1a36843215_container_div">
<label>School Name:</label>

<span id="ajax_getschool">Please choose District</span> 
<span id="progress_getschool" style="visibility: hidden;">Searching...</span> 
<div class="clear"></div>
<div id="error-message-school"></div>
</div>

JS

window.addEvent('domready', function() {

$('district').addEvent('change', function () {
// edit these two lines to match your form
var message = "Please select a District";
var a = $('district').value;
if ( a != null && a != '' ) {
getSchool(a);
} else {
$('ajax_getschool').setHTML("<span id='ajax_getschool' >"+message+"</span>")
}
}) ;
<?php if(isset($form->data['district'])){ ?>
$('district').set('value', '<?php echo $form->data['district']; ?>');
$('district').fireEvent('change');
<?php } ?>
});


function getSchool(a){
var form_name = "principal_project";
var url =
"index.php?option=com_chronoforms&chronoform="+form_name+"&event=ajax&format=raw";
new Request.HTML({
url: url,
method: 'post',
onRequest: function(){
$('progress_getschool').setStyle('visibility', 'visible');
},
onComplete: function(){
$('progress_getschool').setStyle('visibility', 'hidden');
<?php if(isset($form->data['SchoolName'])){ ?>
$('SchoolName').set('value', '<?php echo $form->data['SchoolName']; ?>');
<?php } ?>
},
update: $('ajax_getschool'),
data: { 'sid': a }
}).send();
};

ajax event

<?php
$district =& JRequest::getString('sid', '', 'post');
if ( $district ) {
  $db =& JFactory::getDBO();
  $query = "
    SELECT DISTINCT `SchoolName` AS `id`,`SchoolName`, `SchoolAddress`, `SchoolCity`, `SchoolState`,`SchoolZip`
      FROM `#__school`
      WHERE `DistrictName` = '$district'
      ORDER BY `SchoolName`;
  ";
  $db->setQuery($query);
  $data = $db->loadObjectList();
  if ( count($data) ) {
    $m = new stdClass();
    $m->id = 0;
    $m->SchoolName = 'Select School';
    $data = array_merge(array($m), $data);
    $return = JHTML::_('select.genericlist', $data, 'SchoolName',
'class="inputbox required select" size="1" ', 'id', 'SchoolName', 0);
  } else {
    $return = "Sorry, we couldn't find that District";
  }
} else {
  $return = "Sorry, we couldn't find a district id";
}
echo $return;
$mainframe->close();
?>

$mainframe =& JFactory::getApplication(); $mainframe->close();

Hi jmarian1,

I mean both able to select each other and vice versa.

I wouldn't even dream of doing that - you will get in an awful mess unless you are very, very careful. You'll have two drop-downs both trying to update each other at the same time.

Bob

Thanks Bob. I guess I have an idea how to accomplish it. Thanks for your advice!

HI Bob,

I will need to open this thread again for a question regarding an ajax drop down menu. While working on this double drop down as I need it in my form, I also need an ajax that will show all data from my database in just changing the single drop down menu. If we have a double drop down menu here, is there a tutorial also on how to accomplish a single drop down menu to choose from a database and based on selection will automatically show all the data from that table without clicking the submit button? I can do this in clicking the submit button but in just changing the drop down menu to show all data right away without clicking the submit button is what I don't know how to accomplish. Please advice and hope to direct me to the right way. Thanks in advance.

Hi jmarian1 ,

I think what you are asking for is pretty much the same as the 'normal' Ajax except that you want to display the results in a table rather than as options in a drop-down menu.

To do this you'll need to change the code in the Ajak action to return the table and probably also the code in your form to show a table instead of a drop-down select box.

The basic principles are exactly the same.

Bob

Hi Bob,

Thank you for your quick response. You are right. The logic is the same, its just that instead of drop down, I need it as a table. Anyway, I did a workaround and manage to show the table but what I wanted to accomplish now is how to make one column from the data showing to a hyperlink so when user click it, it will return the value to the textbox instead of reloading or going to another page. Is that possible? I manage to have a hyperlink to a column but it is going to another page. Is it possible to just return the value when the text is click to show to a textbox? How to accomplish that? Kindly give an idea please... Thanks.

Below is my code for hyperlink in the table. Just a part of the code that doing the hyperlink. Hope it make sense. Please advice. Thanks.

echo '<a href="#project" name="projectname" id="projectname">'.$d->project_name.'</a>';

Hi Bob,

I hope you can help me. I really need this to show badly in my form but I am going nowhere. Just an update to my question above, I manage to create a hyperlink to go to the next page but my problem is I am unable to grab the selection from the last page to populate the textboxes to the next page. I attached my form here. Hope you can help me how to populate the data in my third page (submit event) based on the hyperlink selection of my second page (project event). Please note of the event gap between load event->project event->submit->authorize event. Attached is my form. I hope to hear from you sooner. This is the only piece I can't make it to work. Please advice. thanks.

Hi jmarian1,

I've looked at the form but without the tables none of it 'works' and I can’t follow through the pages. I can't even make sense of which page is which and where the "hyperlink selection of my second page (project event)" is.

If you have a paramter in a URL then ChronoForms will normally pick it up and add it to the $form->data array so that you can then use it in processing the form.

Bob

Hi Bob, sorry for the confusion. My project event has the code like below:

if ($radio == "District"){
$district = JRequest::getString('district', '', 'post');
$db =& JFactory::getDBO();
$query = "
    SELECT  *
        FROM `#__chronoforms_data_principal_project` 
        WHERE `district` = '{$district}'
		ORDER BY `SchoolName`  ";
$db->setQuery($query);
$data = $db->loadObjectList();
if (empty($data)) {
	echo "<p align='center'>Sorry, no project available for the district you selected</p>";
} else {
?>
<table id="project_information" align="center">
<tr><th colspan='7' id='project-head'>Available Projects in <?php echo $district; ?> District</th></tr>
<tr>
      <th>Project Name</th>
      <th>Project Code</th>
      <th>School Name</th>
	  <th>Project Description</th>
	  <th>Project Type</th>
	  <th>Project Status</th>
	  <th>Project Total Cost</th></tr>
<?php
foreach($data as $d) { 
echo '<tr><td id="project_name" name="project_name">';
echo '<a href="index.php?option=com_chronoforms&chronoform=creditcard-doe&event=submit&project_code='.$d->project_name.'" />'.$d->project_name.'</a>';
echo '</td><td>';
echo $d->project_code;
echo '</td><td>';
echo $d->district;
echo '</td><td>';
echo $d->project_description;
echo '</td><td>';
echo $d->project_type;
echo '</td><td>';
echo $d->project_status;
echo '</td><td>';
echo number_format($d->project_cost, 2);
echo '</td></tr>';
}
}
echo "</table>";
} 

which output:
[attachment=1]Screen Shot 2012-03-28 at 6.38.29 PM.png[/attachment]

the hyperlink to go to the next page is under the Project Name column but somehow it doesn't give me any data to my next page if I click the hyperlink as a selection which code is below:

<?php

// Get user object -information from Joomla
$project_name = JRequest::getString('project_name', '', 'post');
$db =& JFactory::getDBO();
$query = "
    SELECT  *
        FROM `#__chronoforms_data_principal_project` 
        WHERE `project_name` = '{$project_name}'
		";
$db->setQuery($query);
$data = $db->loadObjectList();
if (empty($data)) {
	echo "<p align='center'>Sorry, no project available for the school you selected</p>";
} else {
?>

<?php
foreach($data as $d) { 
echo 'Project Name: <input maxlength="150" size="30" class="" title="" type="text" value="'.$d->project_name.'" name="project_name" />';
echo $d->category_code;
echo 'District Name: <input maxlength="150" size="30" class="" title="" type="text" value="'.$d->district.'" name="district" />';
echo $d->district;
echo 'Principal Name: ';
echo $d->principal_name;
echo 'Project Code: ';
echo $d->project_code;
echo 'Project Description: ';
echo $d->project_description;
echo 'Project Type: ';
echo $d->project_type;
echo 'Project Status: ';
echo $d->project_status;
echo 'Project Cost: ';
echo "$";
echo number_format($d->project_cost, 2);
}
}

?>

and looks like this:
[attachment=0]Screen Shot 2012-03-28 at 6.40.20 PM.png[/attachment]
Please help. I hope it's a little clearer. Thanks and hope to hear from you sooner. Thanks again.

Hi Bob,

Hope you can help me figure out how to be able to get the data from previous page to the next page in the above post. Please advice. Thanks again. You can view the form at http://www.auw.org/doe/donate?chronoform=creditcard-doe. Thanks.