JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<link rel="stylesheet" href="http://stage.nhm.org/site/sites/all/themes/zen_nhm_theme/css/jquery-ui-1.7.2.custom.css">
<script src="http://stage.nhm.org/site/sites/all/themes/zen_nhm_theme/js/jquery-1.3.2.min.js"></script>
<script src="http://stage.nhm.org/site/sites/all/themes/zen_nhm_theme/js/forms.min.js"></script>
<link rel="stylesheet" href="http://stage.nhm.org/site/sites/all/themes/zen_nhm_theme/css/nhm_print.css?v">
<link rel="stylesheet" href="http://stage.nhm.org/site/sites/all/themes/zen_nhm_theme/css/nodes.css?v">
<link rel="stylesheet" href="http://stage.nhm.org/site/sites/all/themes/zen_nhm_theme/css/base.css?v">
<div class="bl_center bl_schoolvisit">

  <h2>Mobile Outreach Registration</h2>
  <p>The stipulations of our grant limit the schools that we may serve. Please fill out the forms to assist us in scheduling a visit to your school.</p>

  <div class="blClear"></div>
  <div class="bl_block">
    <div class="bl_block2">
      <form id="form-outreach-registration" name="form-outreach-registration" method="post" action="">

        <!--
        -
        - step 1
        -
        -->
        <div id="step-1" style="display:none" class="step">
          <div id="all_fields">

            <div id="outreach-choice">
              <div style="margin-top: 0px;">&nbsp;</div>
              <div id="outreach_selection"><p>Please choose which mobile you are interested in: &nbsp;<select name="select_outreach_choice" id="select_outreach_choice"><option value="">< select ></option><option value="Earthmobile">Earthmobile</option><option value="Skymobile">Skymobile</option><option value="Seamobile">Seamobile</option></select></p>    
              </div>
            </div>                    

            <div id="outreach-questions" style="display: none;">
              <div style="margin-top: 0px;">&nbsp;</div>
              <div id="question-1">
                <p>Are you a school within LAUSD? <input type="radio" name="radio_is_lausd" value="yes" />Yes
   ...

JavaScript

/*
 * NHM 'Outreach Registration' Javascript library
 * Michael Picco, Jan/2010
 */

_err = "";
_posted = false;
var _err_msg = "";
var _zip_found = false;
var _list_1 = '/site/sites/default/files/for_teachers/elementary_list.xml';
var _list_2 = '/site/sites/default/files/for_teachers/middle_list.xml';
var _active_list, _mobile_type, _school_name, _school_zip = "";

/*
 * init method
 */
window.onload = function () {

    $(function () {
        $("#error-dialog").dialog({
            autoOpen: false,
            bgiframe: true,
            modal: true,
            position: top,
            closeOnEscape: true,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
        });
    });

    $(function () {
        $("#processing-dialog").dialog({
            autoOpen: false,
            bgiframe: true,
            modal: true,
            position: top,
            closeOnEscape: true,
            draggable: false,
            width: 324
        });
    });

    $("#select_outreach_choice").change(

    function () {
        val = $("#select_outreach_choice").val();
        if (val.length != "") {
            confirm_msg = 'You have selected the \'' + val + '\' \n\nIs this correct?';
            var answer = confirm(confirm_msg);
            //alert(answer);
            if (answer == true) {
                _mobile_type = val;
                if (_mobile_type == "Seamobile") {
                    _active_list = _list_2;
                } else {
                    _active_list = _list_1;
                }
                $("#outreach-choice").hide();
                $("#outreach-questions").slideDown('normal');
            } else {
                $("#select_outreach_choice").val('');
            }
        }
    });

    $("input[name='radio_is_lausd']").click(

    function () {
        val = $("input[name='radio_is_lausd']:checked").val();
        if (val == "yes") {
           ...