Step 1 Character Countdown

gistfile1.txt

{% extends "forms/form_base.html" %}

{% block maincontent %}

{% block additional-js %}
{{ block.super }}
<script type="text/javascript" src="{{ MEDIA_URL }}js/step.2.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/bootstrap-limit.js"></script>
{% endblock %}

<!-- Main begin-->
<div class="row-fluid">
<div class="span8">

<h1>Create a new sponsorship listing: Step 2 of 5</h1><br />
	<form id="form4" name="form4" class="formwell" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="{% url step2 %}">
   
    <label><h1>Step 2: Listing Information</h1><br /></label>
    <div class="progress progress-striped active">
    	<div class="bar" style="width: 25%;"></div>
    </div>
    {% if messages %}
	<ul class="alert">
    	{% for message in messages %}
    	<div {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</div>
    	{% endfor %}
	</ul>
{% endif %}
    <label for="title"><h3>Listing Title</h3></label>
    <input placeholder="Enter Your Sponsorship Title Here" id="title" name="title" type="text" class="field text large"  value="{{form.title}}"> 
    <em id="counter"></em>  
    
    <label for="subtitle"><h3>Short sentence summarizing your listing</h3></label> 
    <input name="subtitle" type="text" class="field text large" placeholder="Enter Your Tagline Here" value="{{form.subtitle}}">
    
    <label for="email"><h3>Description</h3></label>   
    <textarea class="input-xxlarge" id="textarea" rows="5" name="description">{{form.description}}</textarea>

    <label for="email"><h3>Who do you want to sponsor you?</h3></label>   
    <textarea class="input-xxlarge" id="textarea" rows="5" name="seeking_description">{{form.seeking}}</textarea>    
    
    <label for="user_type"><h3>Select a sponsorship category</h3></label>
    <div class="controls">
              <select class="large" id="select01" name="sponsorship_category">                
                {% for category in sponsorship_categories %}<option value="{{category.id}}" selected="selected"> 
            	{{category.name}}
    			</option>
    			{% endfor %}
              </select>
    </div>
    
<br />   
<div id="half">
<label for="user_type"><h3>Upload a photo or video</h3></label>
<p>Pick one of the following to be displayed on your listing page. If you're stuck, <a href="javascript:void(0);" id="reset_disabler">click here to reset</a>.</p>

<div id="form-fieldhalf">
<div class="disabler" id="photo"></div>
<label class="desc" id="title2" for="photo_file">
&nbsp;Upload a photo
</label>
<div>
<input id="photo_file_field" name="photo_file" type="file" class="field file medium" size="14" tabindex="5" />
</div>
</div>


<div id="form-fieldhalf">
<div class="pull-right" id="video"></div>
<label class="desc" id="title106" for="video_url">&nbsp;Upload a Video: 
</label>
<div>
<input id="video_url" name="video_url" type="text" class="field text large" placeholder="Enter Vimeo or Youtube url" maxlength="255" size="15" tabindex="6" value="{{form.video}}" />
</div>
</div>
</div>
    
    
    <span style="margin: 0 auto;">
    <br /><br />
    <button type="submit" class="btn btn-orange btn-medium" value="Next Step: Sponsorship Levels">Next Step: Sponsorship Levels</button>
    </span>

{% csrf_token %}

<li class="hide">
<label for="comment">Do Not Fill This Out</label>
<textarea name="comment" id="comment" rows="1" cols="1"></textarea>
<input type="hidden" id="idstamp" name="idstamp" value="lYFYoxSQuyPfQOk41gfCj87l/KgHj3C/8wCEfk+ljaI=" />
</li>

</form>

</div>
{% include "sidebar.html" %}

$('#title').limit({maxChars:60, counter:'#counter'});
</div><!-- Main end --> 
{% endblock %}