rsvp2.html

{% extends "base.html" %}
{% block content %}
<div class="fancybox">
    <div class="fancybox-title">
        <a href="{% url home %}" class="icon-home" >Home</a><h3>RSVP for {{guest.email}} {% if disabled %}<a id="edit_form">Click to edit form</a>{% endif %}</h3>
    </div>
    <div class="fancybox-body">
        <form action="{% url rsvp %}" method="post" id="rsvp_form">
            {% if disabled %}
                <h3>Here's what we have for you. You can update your RSVP by logging in with your email and editing the form:</h3>
            {% endif %}
            {{ form.non_field_errors }}
             <p>
                 {{ form.email.errors }}
                 <label for="email">{{ form.email.label }}</label>
                 {{ form.email }}
             </p>
             <p>
                {{ form.name.errors }}
                <label for="name">{{ form.name.label }}</label>
                {{ form.name }}
            </p>
           <p>
               {{ form.coming.errors }}
               <label for="coming">{{ form.coming.label }}</label>
               {{ form.coming }}
           </p>            
           <!--- IF YES -->
           <p class="rsvp_yes">
               {{ form.count.errors }}
               <label for="count">{{ form.count.label }}</label>
               {{ form.count }}
           </p>
           <!-- Reaching pune details -->
           <p class="rsvp_yes">
               {{ form.checkin.errors }}
               <label for="checkin">{{ form.checkin.label }}</label>
               {{ form.checkin }}
           </p>
           <p class="rsvp_yes">
               {{ form.checkout.errors }}
               <label for="checkout">{{ form.checkout.label }}</label>
               {{ form.checkout }}
           </p>
           <!--- Bombay airport ride? -->
           <p class="rsvp_yes">
               {{ form.ride_from_bom.errors }}
               <label for="ride_from_bom">{{ form.ride_from_bom.label}}</label>
               {{ form.ride_from_bom }}
            </p>
           <!-- END OF "IF YES" -->
            <!-- Message -->
            <p>
                <label for="message">Optional Message for the couple:</label>
                <textarea name="message" rows="5" cols="40" maxlength="200">{{ form.message }}</textarea>
            </p>
            <!-- display previous messages -->
            {% if guest.message %}
            <div style="float: left;"><label for="message-print">Previous messages posted by you:</label></div>
            <div style="float: left; width: 600px">{{ guest.message|linebreaksbr }}</div>
            {% endif %}
            <p>
                <input type="submit" value="Submit" class="submit">
            </p>

	    
        </form>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script type='text/javascript'>
    jQuery(function($){
        // snippet to hide and show
        $('select#id_coming').change(function(e){
            display_all_fields();
        });
        
        function display_all_fields(){
            var select = $('select#id_coming').val();
            if( select === "1" || select === '2'){
                $('.rsvp_yes').show();
            } else {
                $('.rsvp_yes').hide();
            }
        }
        display_all_fields();
        
        $("#id_checkin" ).datepicker({ 
            minDate: new Date(2012, 5, 9), 
            maxDate: new Date(2012, 5, 10),
            dateFormat: 'yy-mm-dd'
        }).bind('keydown', false);
        
        $("#id_checkout" ).datepicker({ 
            minDate: new Date(2012, 5, 10), 
            maxDate: new Date(2012, 5, 11),
            dateFormat: 'yy-mm-dd'
            
        }).bind('keydown', false);
        
        $('#edit_form').click(function(e){
            $('[disabled]').removeAttr('disabled'); // enable all the fields
        });
        
        {% if disabled %}
            $('#rsvp_form :input').not('.submit').not('[name="message"]').attr('disabled', true);
        {% endif %}
        
        $('#rsvp_form').submit(function(){
            $('[disabled]').removeAttr('disabled');
            $('.submit').attr('disabled', true);
            $.post({url: $(this).attr('action'), data: $(this).serialize()})
        })
    });
</script>
{% endblock %}