How to display/hide fields in a xataface form

Sometimes you are faced with a situation where you want certain components of a form to appear/hide when a certain choice has been selected. You can do this very easily through xataface.

The first thing you need to decide is which element will be the determining factor. If necessary, you can use a field that is of transient type and will only exist in the form, but is never actually stored in the database. We will present an example of this now. In our example, our record can belong to either a course or a conference. Depending on which type it is, it should be associated with either a CourseID or a ConferenceID. If the record is of one type, then the other type's ID should not appear.

So to do this,



We first start by adding a field called CourseOrConference field in the fields.ini file. The user will be able to choose the record to be either a course or conference. Note the use of transient field here, no field exists in the database called CourseOfConference. It is simply be used for this particular situation.

Now once the that choice is selected the hideFields() javascript method is called which is in a separate javascript file.

The javascript file.

hideFields();

//description: used to display which fields to display upon the user choosing conference or course
function hideFields() {
var type = document.getElementById('CourseOrConference').value;
if (type.length == 0){ //if the user hasn't selected the abstract to be part of course or conference or actually reset the type
//clear both type ids, and hide them both
document.getElementById('AbstractConferenceID_form_row').style.display = 'none';
document.getElementById('AbstractConferenceID').value = "";
document.getElementById('AbstractCourseID_form_row').style.display = 'none'; //hide the course_id
document.getElementById('AbstractCourseID').value = "";
} else if (type == 'course'){ //if the user has chosen the abstract to be part of a course
//clear the conference id field, hide it, and display the course
document.getElementById('AbstractConferenceID_form_row').style.display = 'none';
document.getElementById('AbstractConferenceID').value = "";
document.getElementById('AbstractCourseID_form_row').style.display = ''; //makes it appear as it originally was

} else if (type == 'conference'){ //if the user has chosen the abstract to be part of a conference
//clear the course id field, hide it, and display the conference
document.getElementById('AbstractCourseID_form_row').style.display = 'none';
document.getElementById('AbstractCourseID').value = "";
document.getElementById('AbstractConferenceID_form_row').style.display = '';
}
}

We first call the hideFields() in the javascript when it is first loaded. You will see why in a second.

1. First, the ConferenceOrConference form field is selected. If it is empty that means the user hasn't selected anything yet, and thus we should hide the AbstractID and ConferenceID fields. Because xataface uses tables to layout the forms, the proper way to hide them is to actually hide the entire row which contains the label too. We also need to set the values to "" so that if the user chooses to change type then the fields are reset to start again.


2. If the type is a course, then we need to hide all the conference information


3. If the type is a conference, then we need to hide all the conference information

And that's it basically. Note you have to make sure of the proper element ids to be hiding because that is dependent on the name of the field in the database.

Using Xataface to create forms

You can leverage off the power of Xataface to create forms allowing users to submit data to your tables. Here is some code to allow you do that, I'll go into more explanation after:

$app =& Dataface_Application::getInstance();
$record =& $app->getRecord();
$form =& df_create_edit_record_form($record, array('FirstName','LastName'));

$form->addElement('hidden','-action','myaction');
if ($form->validate() ){
$res = $form->process(array(&$form, 'save'), true);
// could return false or PEAR_Error to indicate error.
header('Location: '.DATAFACE_SITE_HREF.'?-action=foo&--msg=Success');
exit;
}
$form->display();

The first two lines are basically grabbing a reference to the xataface application and the current record loaded.

$form =& df_create_edit_record_form($record, array('FirstName','LastName'));

This line will create a xataface form object which represents the same table that this record is taken from. It will only display the FirstName and LastName fields though since the second parameter allows you to select which fields to display. Because it is a edit record form, it will fill in the values of the form with the values from the record that was sent in through the parameter. You can alternatively use the df_create_new_record_form() to create a new form entirely.

$form->addElement('hidden','-action','myaction&#

This line adds a hidden element to the form and then sets the name of the hidden element to be -action. It is basically used to allow the form to figure out what action to take after it has been submitted. Generally, we set the action to be the same action as the current page and then allow the form to be validate (explained below)

if ($form->validate() ){
$res = $form->process(array(&$form, 'save'), true);
// could return false or PEAR_Error to indicate error.
header('Location: '.DATAFACE_SITE_HREF.'?-action=foo&--msg=Success');
exit;
}

The form first gets validated for valid values. And then if it returns true, it will then process the form and basically save the data to the database. From there, we need to redirect the user to the next location. We always put an exit statement after the header() to make sure the code stops after the redirect. Because should the redirect for some reason fail, we don't want the user to be see the form again.

$form->display();

Finally, if the form was not validated (ie. not submitted before, or values wrong) we need to display form which is what this line does.

And there you go! That's how you can use Xataface to help you create forms!