Populate textbox based on dropdown

Hello,

I searched the forum but I can't find a similar question. I would like to assign a value to a textbox based on the selection in the dropdown. With a Google search it looks like I should use a OnChange event but I can't find anything that reflects my situation, or more likely, I just don't understand.

In the dropdown I have 2 values in each row: Vluchtcode and Losplaats. When the user chooses the right Vluchtcode this value will be known to the form. But what about the second (or either third, fourth) value? How can I get the according "Losplaats" to be displayed in for instance a textbox? (so I can use this value to be sent in the email after submitting)

Hopefully I make myself clear because this is all rather new to me. For instance I select "E29 Chateauroux" in the dropdown. Therefor the variable "Vluchtcode" will hold the value "E29". That's okay. And what I would like to achieve is that the value "Chateauroux" will be shown in the textbox "Losplaats".

Is there any way to make it work like this or am I heading in the wrong direction?

My code:

<div class="ccms_form_element cfdiv_select" id="vluchtcode__container_div"><label>Vluchtcode:</label><select size="1" label_over="0" hide_label="0" class=" validate['required']" title="" type="select" name="Vluchtcode">
<option value=''>--?--</option>
<?php
if (!$mainframe->isSite() ) {return;}
$db =& JFactory::getDBO();
$query = "
SELECT `Vluchtcode`, `Vluchtcode`, `Losplaats`
FROM `j17_chronoforms_data_Wedvlucht`
WHERE `Losplaats` in (select b.Losplaats from `j17_chronoforms_data_Wedvlucht` b where str_to_date(b.Losdatum,'%d-%m-%Y') = (select curdate() )  );
";
$db->setQuery($query);
$options = $db->loadAssocList();
foreach ( $options as $o ) {
echo "<option value='".$o[Vluchtcode]."'>".$o[Vluchtcode]." ".$o[Losplaats]."</option>";
}
?>
</select>
<div class="clear"></div><div id="error-message-Vluchtcode"></div></div>


<div class="ccms_form_element cfdiv_text" id="losplaats__container_div"><label>Losplaats:</label><input maxlength="10" size="20" class="" title="" label_over="0" hide_label="0" type="text" value="" name="Losplaats" />
<div class="clear"></div><div id="error-message-Losplaats"></div></div>

Thanks in advance,
Peter.

Hi Peter,

Add id = "Losplaats" to your text field and id = "Vluchtcode" to your dropdown and insert the code below in a "Load JS" action:

window.addEvent('domready', function() {
	$('Vluchtcode').addEvent('change', function(){
		var mytexts = $('Vluchtcode').get('text').split(" ");
		$('Losplaats').set('value', mytexts[1]);
	});
});

Cheers,
Max

Hello Max,

Thanks for your answer. I added the ID's and I dragged a Load JS event to the On Load section. I saved your code into the Load JS event of course. After calling the form it seems like nothing happened. When I select from the dropdown, nothing is displayed in the textfield.

In Safari-console there is one hint about the error: TypeError: 'undefined' is not a function (evaluating 'window.addEvent'). Perhaps I'm doing something wrong? Do you have some idea? Did I put the Load JS on the right place? The ID's you suggested are actually replacing the old ones like id="vluchtcode__container_div" , right?

This is all pretty new to me so it's very possible I'm doing something stupid.

Thanks,
Peter.

Hi itspetrus,

Max's code requries the MooTools library (which is standard with Joomla! and ChronoForms usually loads). The error suggests that either MooTools isn't loaded or there is a JavaScript error on the page which is stopping it running.

What are you trying to achieve here?

My inclination is not to try to do this in the form but to look up the data you need after the form is submitted. If you have the Value of Vluchtcode you can easily do this with a DB Record Loader action (or a few lines of PHP and MySQL).

Bob

Hello Bob,

I didn't remove MooTools or anything like that, so I suppose it is running. I also tried different browsers. Anyway, what I would like to achieve?!

I need some specific values in the email which will be sent after submitting the form. Therefor I believe those values should be on the form. (Perhaps it can be done otherwise, but I don't know how.)

From a dropdown I get the selected row-with-columns but only the first value is assigned to that field. And I need the other values from that same row as well!

The other values from that same row, I would like to display in some other textfields, so I can pick up those fields for the email I like to send in the end.

For instance I select "E29 Chateauroux" in the dropdown. Therefor the variable "Vluchtcode" will hold the value "E29". That's okay. And what I would like to achieve is that the value "Chateauroux" will be shown in the textbox "Losplaats" or otherwise be made available to the email which I would like to send after the submit.

Thanks,
Peter.

Hi Peter,

If you only need to use them in the email then look them up after the form is submitted. Using the DB Record Loader action in the On Submit event will do it. Put Vluchtcode in the DB Field and Request Parameter boxes and set the table to j17_chronoforms_data_Wedvlucht

Bob

Hi Bob,

Thanks for your hint. I think that it will work out. I see a lot of possibilities here! Going to try it.

Regards,
Peter.

Hi Bob. I have the same problem and it didn't show the data from my table. Not sure what I am doing wrong or maybe because of the mootools problem. I am using 1.7.4 fresh install with full package and I don't see any mootools plugin to enable it. Is the mootools automatically installed and doesn't show in the plugin manager? Anyway, below is my HTML code I used for the dropdown list.

<div class="form_item">
    <div class="form_element cf_dropdown">
       <label class="cf_label" style="width:150px;">Select School:</label>
         <select class="cf_inputbox validate-selection" id="schools" size="1" name="schools">
<option value=''>Select School</option>
<?php
if (!$mainframe->isSite() ) {return;}
$db =& JFactory::getDBO();
$query = "
SELECT `SchoolCode`, `SchoolName`
FROM `#_school`
WHERE `SchoolCode` = '$schools';
";
$db->setQuery($query);
$options = $db->loadAssocList();
foreach ( $options as $o ) {
echo "<option value='".$o[SchoolCode]."'>".$o[SchoolName]."</option>";
}
?>
</select>
</div>
<div class="cfclear"> </div>
</div>

Bottom line is, I want to show a data from database to a textboxes based on the selection in the drop down list. Is there something I am missing? Please help. Thanks.

Hi jmarian1,

There is no MooTools Upgrade plug-in in Joomla! 1.6/1.7/2.5 it was only needed in later versions of Joomla! 1.5 to offer a choice between the older MooTools 1.12 library and the newer 1.2 library. Versions of Joomla! after 1.5 only offer MooTools 1.2 or later (MooTools 1.4.2 in the current Joomla! 2.5 release).

You might want to look at the Ajax Enabled Drop-down [P] action here. I think that does what you need.

Bob

HI Bob. I guess the Mootools is installed but can't see in the plugin joomla admin. The first drop down list is grabbing the data from my database using the v4 tutorial that I purchased for double drop down list. However, I am not able to make the second drop down list work and grab the data from the database. Also, it is not populating my textboxes based on the drop down list selection. All data is based from one table only. I am not sure where I am making mistake. Would it be possible for you to check please in my JS code and where can I insert the code to show the textboxes? Thanks in advance. My fieldnames are code, sname,saddress,scity,sstate,szip with table #_snfos.
my html code:

<div class="form_item">
    <div class="ccms_form_element cfdiv_custom" id="schools_container_div">
<label for="schools">School Name:</label>
<?php
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `scode`, `sname`
FROM `#__snfos`
ORDER BY `sname`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
?>
<select size="1" class="" title="" type="select" name="schools" id="schools" onChange="ajax(this)" >
<option value="">Select School</option>
<?php
foreach($data as $d) {
echo " <option value='".$d->scode."'>".$d->sname."</option>";
}
?>
</select>
<div class="clear"></div>
<div id="error-message-schools"></div>
</div>
<div class="form_item">
    <div class="ccms_form_element cfdiv_custom" id="district_container_div">
<label for="district">District Name:</label>
<?php
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `dcode`, `dname`
FROM `#__district`
ORDER BY `dname`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
?>
<select size="1" class="" title="" type="select" name="district" id="district" >
<option value="">Select District</option>
<?php
foreach($data as $d) {
echo " <option value='".$d->dcode."'>".$d->dname."</option>";
}
?>
</select>
<div class="clear"></div>
<div id="error-message-schools"></div>
</div>
<div class="ccms_form_element cfdiv_custom" id="district_container_div">
<label for="district">District</label>
<span id='ajax_getdistrict' >Please choose a school</span> 
<span id='progress_getdistrict' style='visibility: hidden; '>Searching . . .</span>
<div class="clear"></div>
<div id="error-message-district"></div>
</div>

my textboxes that needs to be poopulated based from the drop down list above.

<div class="formfield">
    <label for="scode">S Code:</label>
<input id="scode" name="scode" class="text" type="text" value="" readonly>
  </div>
  
  <div class="formfield">
    <label for="saddress">S Address:</label>
    <input id="saddress" name="saddress" class="text" type="text" value="" readonly>
  </div>
  <div class="formfield">
    <label for="scity">S City:</label>
    <input id="scity" name="scity" class="text" type="text" value="" readonly>
  </div>
  <div class="formfield">
    <label for="sstate">S State:</label>
    <input id="sstate" name="sstate" class="text" type="text" value="" readonly>
   </div>
  <div class="formfield">
    <label for="szip">S Zip Code:</label>
    <input id="szip" name="szip" class="text" type="text" value="" readonly>
  </div>

my event JS code:

window.addEvent('domready', function() {
$('schools').addEvent('change', function () {
// edit these two lines to match your form
var message = "Please select a school";
var a = $('schools').value;
if ( a != null && a != '' ) {
getDistrict(a);
} else {
$('ajax_getdistrict').setHTML("<span id='ajax_getdistrict' >"+message+"</span>")
}
}) ;
});
function getdistrict(a){
var form_name = "principalform";
var url =
"index.php?option=com_chronoforms&chronoform="+principalform+"&event=ajax&format=raw";
new Request.HTML({
url: url,
method: 'post',
onRequest: function(){
$('progress_getdistrict').setStyle('visibility', 'visible');
},
onComplete: function(){
$('progress_getdistrict').setStyle('visibility', 'hidden');
},
update: $('ajax_getdistrict'),
data: { 'sid': a }
}).send();
};

event ajax

<?php
$SchoolCode =& JRequest::getString('sid', '', 'get');
if ( $DistrictCode ) {
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `dcode` AS `id`, `dname`
FROM `#__district`
WHERE `scode` = '$SchoolCode'
ORDER BY `dname`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
if ( count($data) ) {
$m = new stdClass();
$m->id = 0;
$m->DistrictName = 'Select District';
$data = array_merge(array($m), $data);
$return = JHTML::_('select.genericlist', $data, 'dname',
'class="inputbox required select" size="1" ', 'id', 'dname', 0);
} else {
$return = "Sorry, we couldn't find that School";
}
} else {
$return = "Sorry, we couldn't find a School Code";
}
echo $return;
?>


<?php
echo $form->data['scode'];
echo $form->data['saddress'];
echo $form->data['scity'];
echo $form->data['sstate'];
echo $form->data['szip'];
global $mainframe;
$mainframe->close();
?>

Hi Bob,

I did installed the enabled drop down but sorry I don't know where in the event to use it. Is there a tutorial here somewhere? Thanks for all your help. Hope to hear from you soon.

Hi jmarian1,

The Ajax Enabled Drop-down [P] action goes into the On Load event of your form. It uses the result of a drop-down to get more data from the server (usig Ajax) and displays the result in a tag with a specified id. This is pretty much exactly what you are doing here.

In your sode it looks as though you may have got the districts and schools the wrong way round. If I understand correctly the first drop-down is to select a district and the Ajax query gets the schools in that district. If so then this line in the Form JavaScript has to be wrong:

var a = $('schools').value;

because at that point the user hasn’t selected a school, just a district.

Bob

Hi Bob,
Thanks for your help. My double drop down is now working using your chronoform v4 tutorial in the double down. My next problem is how to populate my 5 textboxes based on the second drop down selection (School selected). I created the below code based on how the second drop down works but somehow my second drop down doesn't work anymore. I know for sure that it is my code below causing it. Please help. Any suggestions, comments are very helpful.

My JS code

//populate the school info
window.addEvent('domready', function(){
       $('ajax_getschool').addEvent('change', function(){
        var message = "Please select a school";
        var b = $('ajax_getschool').value;
        if(b != null && b!='') {
               getSchoolInfo(b);
        } else {
        $('school_code').setHTML("<span id='school_code'>"+message+"</span>");
        $('school_address').setHTML("<span id='school_address'>"+message+"</span>");
        $('school_city').setHTML("<span id='school_city'>"+message+"</span>");
        $('school_state').setHTML("<span id='school_state'>"+message+"</span>");
        $('school_zip').setHTML("<span id='school_zip'>"+message+"</span>");
        }
    });
});

function getSchoolInfo(b) {
   var form_name = "principal_form";
   var url="index.php?option=com_chronoforms&chronoform="+form_name+"&event=ajax&format=raw";
new Request.HTML{
url: url,
method: 'post',
onComplete:function(){
      $('school_code').set('value', $SchoolCode);
      $('school_address').set('value', $SchoolAddress);
      $('school_city').set('value', $SchoolCity);
      $('school_state').set('value', $SchoolState);
      $('school_zip').set('value', $SchoolZip);
}
update: ($('school_code'), $('school_address'),$('school_city'),$('school_state'),$('school_zip')),
data: {'sid':b}
}).send();
};

My ajax event code that I added. I also don't know if it is correct.

//get school info
<?php
$ajax_getschool =& JRequest::getString('sid','','get');
if ($ajax_getschool) {
    $db =& JFactory::gtDBO();
    $query = "SELECT `SchoolName`, `SchoolCode`, `SchoolAddress`, `SchoolCity`, `SchoolState`, `SchoolZip`
       FROM #_school
       WHERE 'SchoolName' = '$ajax_getschool';
";
$db->setQuery($query);
$data = $db->loadAssoc();
      if($data) {
          $return = ('$data['school_code'], $data['school_address'], $data['school_city'], $data['school_state'], $data['school_zip'];
} else {
         $return= "Sorry, we couldn't find the school info.";
} 
} else {
         $return = "Sorry, we couldn't find a school info";
}
echo $return;
$mainframe->close();
?>

I ma working on similar problem too.

I call data from the database to populate a first select box that works well.

By changing the value of the select box i would like to populate the textbox with the corresponding data

I know i have to use onchange and i success to display an JS alert when i change the dropdown.

What i don't know if how to display the loaded data in the textbox.

I have already loaded the data i need in an array which looks like this

[JosChronoformsDataInsertProduct] => Array
        (
            [0] => Array
                (
                    [product_type] => A
                    [product_type_detail] => 1
                )

            [1] => Array
                (
                    [product_type] => B
                    [product_type_detail] => 2
                )

        )

So far i success to load the product_type in the select box, now i would like to display the product_type_detail in the textbox


So my question is how to complete this part of the JS function :

 $('my_text_box_id').value = ?????? ;

I guess i have to use $form->data something like this but i block here

Hi laurentmartin,

If you are working with JavaScript then you can't use $form->data which is a PHP variable. I think you need to use something like:

$('my_text_box_id').value = JosChronoformsDataInsertProduct[0][product_type_detail];

Bob

Well, i have tried this, it doesn't work 😢

up

Hi laurentmartin,

There's nothing here to 'up'. The code I posted still looks correct from the example you gave.

Bob

i have been kept digging and found something like this which is able to display the value of the array 0


$('my-text_box_value').value=(<?php print_r($form->data ['JosChronoformsDataInsertProduct'][0]['product_type_detail'])?>);

Now i should replace 0 with a variable like $i, which should be the index of the arrray related to the selection previously done in the dropdown.

So far i still don't know how to get the value of the array corresponding with the value selected in the dropdown. I imagine a loop has to be done to compare string in the dropdown and string in the array and get the array number accordingly. As php code is loaded at the beginning , i guess the array should be stored in a javascript variable before doing the comparison. but so far i don't know how to do...

If you have any idea...

Hi laurentmartin,

I'm still lost here.

Have you looked at the AJAX enabled drop-down That may do what you need?

Bob

I have looked at this thread already.
But i don't need ajax here, this is too much complicated to set up for just what i need to do i think.

I would prefer just to find how to pass the variable from php to javascript and reverse it if needed

Hi laurentmartin,

As I said, I don't understand what you are trying to do here :-(

Bob

Ok
I try again to explain.

I have table database in which i have mainly two column

One is country, one is price

One country = one price

In a form i have a dropdown that get filled with the Country name

Below the dropdown i put a text box where i want to display the price when the user select the country in the dropdown.

So far i have done a DB record loader that put the value of the field Country and price of my database in the session

SO in my data session array i have something like

[country_specs] => Array
(
            [0] => Array
                (
                    [country] =>Germany
                    [price] => 10
                )

            [1] => Array
                (
                    [country] => USA
                    [price] => 6
                )
)

So i have the list of country in my dropdown which can populated directly via Dynamic Data tab of the dropdown

My question is how to get the corresponding value of price when I select country in the dropdown.

As the code is already exectued, i plan to use javascript onchange to update the textbox Price
but i guess i need to open an array in the javascript function which copy the value of the data session. Then, when the dropdown is changed it will call the function of computation to loop the data and update the texbox.

up

Hi laurentmartin,

I don't have much to add. Your post says what you need to do. The only extra bit is to put transfer the data from the array to make it available in JavaScript. I think you can do this in a Load JS action by looping through the data array. It will be something like this:

var price_array = {};
<?php
foreach ( $form->data['country_specs']  as $v ) {
  echo "price_array[{$v['country']}] = {$v['price']};";
}
?>

Bob

Hi Greyhead,

Exactly , I need to transfer the data from the session to javascript on load when the page is loaded.

I will try your code and come back soon.

Greyhead,

Do i really need to go on php to do this ?

I was expecting just do an alert javascript first to make some test.

How do i manage with the php code you propose to display the result in a javascripot alert ?

Typically i put an on change on the dropdown and when changing the country it will put a javascript alert with the price.

Hi laurentmartin,

If you have some other way of doing it that's fine.

Bob

Hi Greyhead,

So far no, i will try to use your methoid, i have inserted it inside the function called by the onchange but without success so far...

Any idea where the problem could come ?

I see in your syntax this

;";"

Is it normal?

Hi laurentmartin ,

Looks like an extra " crept in there.

Bob

Hi Greyhead,

It almost work, i can visualize the php array of the data session via a javascript alert this way, now i need to find how i can copy this php array in a javascript array, so that i can later do a comparison and find the right price when i select the right country in the dropdown .

Can you advise how to copy php array in a javscript array ?


REgards

Up
please help

Hi laurentmartin,

Can you advise how to copy php array in a javscript array ?

Please check this post earlier in this thread.

Bob

Hi Greyhead

I saw this thread already.

I put this inside an alert and it display the full table well.

However now, i need to make comparison and access the data of this table and this is how i am stucked as i have impression that the code you suggest is just doing an echo:

compare the selection in the first dropdown (country) and the value in the table to deduct the price

For this i guess i need to do a for loop but how to access the data table ?.

Thanks for your answer

up😀

Hi laurentmartin,

The code I wrote should be putting your date into a JavaScript array, I think that's what you asked for.

You may need to get help with writing custom JavaScript.

Bob

Hi grey head

I need to make a comparison loop I guess to check which country is selected and deduce the price accordingly

For this I need to access the JavaScript table you said you filled and I need ths table to be indexed so that I can run a for loop

My question is how to access the indexed value of this table ?

Hi laurentmartin,

You may need to get help with writing custom JavaScript.

Bob

Hi Greyhead

Thank you for your comment and indeed i need help to know how to do this.

Reason why i post on the forum🙂

So if you have any help to provide for this, I would be very glad to receive it :-)

Hi laurentmartin,

If you post some code we may be able to help you fix any ChronoForms related problems with it. I'm sorry but we can't do custom coding for you here.

Bob

From the sticky post about Asking Questions in the Forums:

Please do not ask us to Code your Form for you (unless you are prepared to pay). ChronoForms makes it very easy to create forms using the built-in Wizard or to copy and paste code from any HTML editor. We are happy to help out but we don't have the time to do basic work for free.

Please don't ask us to give you basic help with HTML, CSS, PHP or JavaScript. If you want to use the full power of ChronoForms and of Joomla then you are going to need some basic coding skills. There are excellent tutorials on the net and they should really be your first point of reference. Michelle Steigerwalt's post on the Mootools blog Help I don't know JavaScript is an excellent place to start - not just for JavaScript.