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.