Populate two text fields according to dropdown value

I've bought the Chronoforms book and a couple of tutorials and I still can't find how to do that. I just want to select an option from a dropdown menu and have two read-only text fields being populated accordingly depended on the value of the dropdown. All values exist in a database table. Dropdown would be names of traning courses and the other two text fields would be date of the course and number of places available for that course. I would create the database mysel but I can't think of a way of populating all fields at the same time. Would that be possible?

I am using Chronoforms 3.2 in Joomla 1.5.26

Hi,

You will need to build some AJAX code to do that, something not quick to do, but you may find old examples here or on google.

Regards,
Max

Hi quantum_leap,

The basic code that you need is on page 326 of the book. The differences are that your $response array will have the two values you looked up and the onComplete function needs to set the values of the two inputs instead of setting Styles.

Bob

Ok, I am trying to make the example code from the book work but it's not really clear what I have to do. I've put the following code into the Form HTML box

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label"
style="width: 150px;">Email</label>
<input class="cf_inputbox" maxlength="150" size="30"
title="" id="email" name="email" type="text" />
</div>
<div class="cfclear"> </div>
</div>

Then, in the Form JavaScript box I have:

window.addEvent('domready', function() {
// set the url to send the request to
var url = 'index.php?option=com_chronocontact
&chronoformname=EmailLookup&task=extra&format=raw';
var email = $('email');
email.addEvent('blur', function() {
// clear any background color from the input
email.setStyle('background-color', 'white');
// check that the email address is valid
regex = /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i;
var value = email.value.trim();
if ( value.length > 6 && regex.test(value) ) {
// if all is well send the JSON request
var jSonRequest = new Json.Remote(url, {
onComplete: function(r) {
// check the result and set the background color
if ( r.email_ok ) {
email.setStyle('background-color', 'green');
} else {
email.setStyle('background-color', 'red');
}
}
}).send({'email': email.value});
} else {
// if this isn't a valid email set background color red
email.setStyle('background-color', 'red');
}
});
});

and in the Extra code one code I have:

<?php
// clean up the JSON message
$json = stripslashes($_POST['json']);
$json = json_decode($json);
$email = strtolower(trim($json->email));
// check that the email field isn't empty
$response = false;
if ( $email ) {
// Check the database
$db =& JFactory::getDBO();
$query = "
SELECT COUNT(*)
FROM `#__users`
WHERE LOWER(`email`) = ".$db->quote($email).";
";
$db->setQuery($query);
$response = (bool) !$db->loadResult();
}
$response = array('email_ok' => $response );
//send the reply
echo json_encode($response);
// stop the from running
$MyForm->stopRunning = true;
die;
?>

Now, what I get is an "Email" label with an input box and I don't know what to do with it! I've followed the tutorial but I can't reproduce what you are presenting in the book. If I manage to reproduce that I will try and take it from there...

Hi quantum_leap ,

I'm not sure what your question is? I'm pretty sure that the code worked when I wrote it. It checks if the email typed in the email input is already used in the jos_users table and changes the color of the input box depending on the result. It's a very basic application.

Bob

Let's start again. Please, read my first post in the beginning. I managed to make the email thing work, thank you.

Basically for my case I used an example from the book to populate a dropdown box from the database. According to the value of that dropdown, I would like for two other read only input boxes to be populated accordingly. What I did here was to create seperate input boxes inside the form that would get the various values from the database and then I used AJAX rel tags (I purchased the ChronoForms creating hideable inputs tutorial) to hide the boxes that were not relevant each time a selection from the dropdown menu was made. It works but if I have a big number of dropdown options(courses) it means that I need to create a large number of hideable inputs and the form code would be huge. I am looking for a way to populate the read only input boxes without creating code for EVERY option in the dropdown menu.

Do you see what I mean?

By the way, the Ajax look up code seems to have some bugs. When I enter a correct email address(displaying the green box) and then write some characters after that and press tab, the box stays green instead of turning red. The same when I enter characters between the already correct email, it still stays green.

Hi quantum_leap,

If you are adding hundreds of hidden inputs then it sounds as though your form may be over - complicated. What do all these extra inputs do?

The way to populate them is to modify the script that sets the styles as I said earlier.

Bob

PS I just created an Email Check from from the book Code Bundle and that is working correctly.

I am sorry, I don't quote understand. Would you be so kind as to send me a simple form that does the above? Basically I need a dropdown menu with let's say 2 values and two other inputs fields that all get populated accroding to the dropdown menu value but take information from the database. If I could see the code after importing it, I think I would be able to reverse engineer it. Thank you!

Hi quantum_leap,

The Extra Code needs to be changed so that it returns the two values you need in a JSON array.


The JavaScript function here needs to be changed to add the returned vaues to the inputs:

onComplete: function(r) {
  // check the result and set the background color
  if ( r.email_ok ) {
    email.setStyle('background-color', 'green');
  } else {
    email.setStyle('background-color', 'red');
  }
}
}).send({'email': email.value});

Bob

Ok, I have this html code

<div class="left-column-layout">
     <div class="form_item">
     	<div class="form_element cf_dropdown">
        <label class="cf_label" style="width: 150px;">Course Name</label>
        <select class="cf_inputboxpayment_method validate-selection" id="" size="1" title="Please select payment method" name="payment_method" tabindex=9 />
			<option name="please-select" value="" rel="none">Please select</option>
			<option name="course1" value="course1" rel="course1">Course 1</option>
			<option name="course2" value="course2" rel="course2">Course 2</option>
			</select> 
     </div>
     </div>
</div>

<div class="form_item">
    <div class="form_element cf_textbox">
        <label class="cf_label">Current locations available</label>
        <input class="cf_inputbox" maxlength="150" size="30" title="" id="location" name="location" type="text" />
    </div>
    <div class="cfclear"> </div>
</div>

<div class="form_item">
    <div class="form_element cf_textbox">
        <label class="cf_label" >Places available</label>
        <input class="cf_inputbox" maxlength="150" size="30" title="" id="places_available" name="places_available" type="text" />
    </div>
    <div class="cfclear"> </div>
</div>

It's a dropdown menu with 2 options: Course 1 and Course 2. There are also two input boxes named Current locations available and Places available.

How would I change this code so that I would get different values dependent on which course is selected? In your example you use one input box that searches through the database for any emails that haven't been used, then populating the same input box. How would I change the code so that I could populate the other boxes?

Hi quantum_leap,

You'd use the same MooTools syntax to identify the element $('input_id') and then the appropriate MooTools.JavaScript method to set the value.

I think that the MooTools 1.12 syntax is:

$('input_id').value = 'xxx';

Bob

Very hand for me to understand(As I said before, I am not strong on programming).

Anyway, I wrote this javascript code.

window.addEvent('domready', function() {
	// set the url to send the request to
	var url = 'index.php?option=com_chronocontact&chronoformname=EmailLookup&task=extra&format=raw';
	var location = $('course_name');
	var location = $('location');
	var location = $('places_available');
      
            // if all is well send the JSON request
            var jSonRequest = new Json.Remote(url, {
            	onComplete: function(r) {
                	// check the result and set the background color
                  	if ( $('course_name').value = '2 Day Refresher Training'; ) {
                    	location.value('Location 1');
                  	} else {
                    	location.value('Location 2');
                  	}
                }
            })
};

Obviously, it doesn't work. Am I getting close? Do I need to include any PHP code on the Extras box?

Hi quantum_leap,

You may need to get help from someone with more experience in JavaScript. This function has a small collection of bugs

                     if ( $('course_name').value = '2 Day Refresher Training'; ) {
                       location.value('Location 1');
                     } else {
                       location.value('Location 2');
                     }

You do need to have code in the Extra Code box to get the values you need from the database.

Bob