tags:

views:

27

answers:

0

I've been tasked to develop a fairly simple reservation console for a hotel. It features two <form>s which have corresponding tabs, the active tab applies to the default form and the inactive tab applies to the hidden form. The tabs are clickable and would enable/disable their respective forms.

So far what I am planning is having embedded style and script elements below my main HTML.

Question 1.1: For the HTML, can I just go ahead and straight up do what I want, or am I restricted? Do I have to use any facebook specific elements for plain old stuff like forms?

Here's an example of a snippet I would use:

<ul>
    <li id="tab"><a href="#blah">text</a></li>
    <li id="tab2"><a href="#blah">text</a></li>
</ul>
<form id="hidden">blah</form>
<script>
(function() {
var tab = document.getElementById('tab'),
    tab2 = document.getElementById('tab2');
    tab2.onclick = function() {
        document.getElementById('hidden').style.display='';
        return false;
    }
})();
</script>
<style> #hidden { display:none; }</style>

Question 1.2: Are there pitfalls with this code? Is it bad to rely on private namespacing / anonymous functions because of the way Facebook converts the markup and js? Should I be using inline event handlers such as onclick for event based behavior because it would be easier for the Facebook "converter" to parse it and "recompile" it?

Other background info:

This widget does not have any sort of share buttons, login, pictures. It pretty much will consist of an arrival/departure textfield, dropdowns for adults/kids, and an submit button. This goes for both forms.

related questions