Merge pull request #383 from pcoder/bug/order_now_button_disabled_on_page_load
This PR fixes the "Order Now" button appearing blue (active) momentarily on page load. Also, calculator form is now refactored.
This commit is contained in:
Pcoder
GitHub
commit
2e97640a03
3 changed files with 166 additions and 260 deletions
|
|
@ -0,0 +1,89 @@
|
||||||
|
{% load staticfiles i18n%}
|
||||||
|
<form id="order_form" method="POST" action="" data-toggle="validator" role="form">
|
||||||
|
{% csrf_token %}
|
||||||
|
<div class="title">
|
||||||
|
<h3>{% trans "VM hosting" %} </h3>
|
||||||
|
</div>
|
||||||
|
<div class="price">
|
||||||
|
<span id="total">15</span>
|
||||||
|
<span>CHF/{% trans "month" %}</span>
|
||||||
|
<div class="price-text">
|
||||||
|
<p>{% trans "VAT included" %}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="descriptions">
|
||||||
|
<div class="description form-group">
|
||||||
|
<p>{% trans "Hosted in Switzerland" %}</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="description input">
|
||||||
|
<i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
|
||||||
|
<input class="input-price select-number" type="number" min="1" max="42" id="coreValue" name="cpu" data-error="{% trans 'Please enter a value greater than or equal to 1.' %}" required>
|
||||||
|
<span> Core</span>
|
||||||
|
<i class="fa fa-plus-circle right" data-plus="cpu" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
<div class="help-block with-errors"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="description input">
|
||||||
|
<i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
|
||||||
|
<input id="ramValue" class="input-price select-number" type="number" min="2" max="200" name="ram" data-error="{% trans 'Please enter a value greater than or equal to 2.' %}" required>
|
||||||
|
<span> GB RAM</span>
|
||||||
|
<i class="fa fa-plus-circle right" data-plus="ram" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
<div class="help-block with-errors"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="description input">
|
||||||
|
<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
|
||||||
|
<input id="storageValue" class="input-price select-number" type="number" min="10" max="500" step="10" name="storage" data-error="{% trans 'Please enter a value greater than or equal to 10.' %}" required>
|
||||||
|
<span>{% trans "GB Storage (SSD)" %}</span>
|
||||||
|
<i class="fa fa-plus-circle right" data-plus="storage" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
<div class="help-block with-errors"></div>
|
||||||
|
</div>
|
||||||
|
<div class="description select-configuration input form-group justify-center">
|
||||||
|
<label for="config">OS</label>
|
||||||
|
<select name="config" id="">
|
||||||
|
{% for template in templates %}
|
||||||
|
<option value="{{template.id}}">{{template.name}} </option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" name="total">
|
||||||
|
<!--<div class="description check-ip">
|
||||||
|
<input type="checkbox" name="ipv6"> Ipv6 Only<br>
|
||||||
|
</div>-->
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="description input justify-center">
|
||||||
|
<label for="name" class="control-label">{% trans "Name"%}</label>
|
||||||
|
<input type="text" name="name" class="form-control" placeholder="{% trans 'Your Name'%}" data-minlength="3" data-error="{% trans 'Please enter your name' %}" required>
|
||||||
|
</div>
|
||||||
|
<div class="help-block with-errors">
|
||||||
|
{% for message in messages %}
|
||||||
|
{% if 'name' in message.tags %}
|
||||||
|
<ul class="list-unstyled"><li>
|
||||||
|
{{ message|safe }}
|
||||||
|
</li></ul>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="description input justify-center">
|
||||||
|
<label for="email" class="control-label">{% trans "Email"%}</label>
|
||||||
|
<input name="email" type="email" pattern="^[^@\s]+@([^@\s]+\.)+[^@\s]+$" class="form-control" placeholder="{% trans 'Your Email' %}" data-error="{% trans 'Please enter a valid email address' %}" required>
|
||||||
|
</div>
|
||||||
|
<div class="help-block with-errors">
|
||||||
|
{% for message in messages %}
|
||||||
|
{% if 'email' in message.tags %}
|
||||||
|
<ul class="list-unstyled"><li>
|
||||||
|
{{ message|safe }}
|
||||||
|
</li></ul>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="submit" class="btn btn-primary disabled" value="{% trans 'Order Now!' %}"></input>
|
||||||
|
</form>
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
{% extends "datacenterlight/base.html" %}
|
{% extends "datacenterlight/base.html" %}
|
||||||
{% load staticfiles i18n%}
|
{% load staticfiles i18n%}
|
||||||
{% get_current_language as LANGUAGE_CODE %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
|
|
@ -139,94 +138,7 @@
|
||||||
<div class="landing card">
|
<div class="landing card">
|
||||||
<img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
|
<img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
|
||||||
<div class="caption">
|
<div class="caption">
|
||||||
<form id="order_form" method="POST" action="" data-toggle="validator" role="form">
|
{% include "datacenterlight/calculator_form.html" %}
|
||||||
{% csrf_token %}
|
|
||||||
<div class="title">
|
|
||||||
<h3>{% trans "VM hosting" %} </h3>
|
|
||||||
</div>
|
|
||||||
<div class="price">
|
|
||||||
<span id="total">15</span>
|
|
||||||
<span>CHF/{% trans "month" %}</span>
|
|
||||||
<div class="price-text">
|
|
||||||
<p>{% trans "VAT included" %}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="descriptions">
|
|
||||||
<div class="description form-group">
|
|
||||||
<p>{% trans "Hosted in Switzerland" %}</p>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="description input">
|
|
||||||
<i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
|
|
||||||
<input class="input-price select-number" type="number" min="1" max="42" id="coreValue" name="cpu" data-error="{% trans 'Please enter a value greater than or equal to 1.' %}" required>
|
|
||||||
<span> Core</span>
|
|
||||||
<i class="fa fa-plus-circle right" data-plus="cpu" aria-hidden="true"></i>
|
|
||||||
</div>
|
|
||||||
<div class="help-block with-errors"></div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="description input">
|
|
||||||
<i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
|
|
||||||
<input id="ramValue" class="input-price select-number" type="number" min="2" max="200" name="ram" data-error="{% trans 'Please enter a value greater than or equal to 2.' %}" required>
|
|
||||||
<span> GB RAM</span>
|
|
||||||
<i class="fa fa-plus-circle right" data-plus="ram" aria-hidden="true"></i>
|
|
||||||
</div>
|
|
||||||
<div class="help-block with-errors"></div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="description input">
|
|
||||||
<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
|
|
||||||
<input id="storageValue" class="input-price select-number" type="number" min="10" max="500" step="10" name="storage" data-error="{% trans 'Please enter a value greater than or equal to 10.' %}" required>
|
|
||||||
<span>{% trans "GB Storage (SSD)" %}</span>
|
|
||||||
<i class="fa fa-plus-circle right" data-plus="storage" aria-hidden="true"></i>
|
|
||||||
</div>
|
|
||||||
<div class="help-block with-errors"></div>
|
|
||||||
</div>
|
|
||||||
<div class="description select-configuration input form-group justify-center">
|
|
||||||
<label for="config">OS</label>
|
|
||||||
<select name="config" id="">
|
|
||||||
{% for template in templates %}
|
|
||||||
<option value="{{template.id}}">{{template.name}} </option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<input type="hidden" name="total">
|
|
||||||
<!--<div class="description check-ip">
|
|
||||||
<input type="checkbox" name="ipv6"> Ipv6 Only<br>
|
|
||||||
</div>-->
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="description input justify-center">
|
|
||||||
<label for="name" class="control-label">{% trans "Name"%}</label>
|
|
||||||
<input type="text" name="name" class="form-control" placeholder="{% trans 'Your Name'%}" data-minlength="3" data-error="{% trans 'Please enter your name' %}" required>
|
|
||||||
</div>
|
|
||||||
<div class="help-block with-errors">
|
|
||||||
{% for message in messages %}
|
|
||||||
{% if 'name' in message.tags %}
|
|
||||||
<ul class="list-unstyled"><li>
|
|
||||||
{{ message|safe }}
|
|
||||||
</li></ul>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="description input justify-center">
|
|
||||||
<label for="email" class="control-label">{% trans "Email"%}</label>
|
|
||||||
<input name="email" type="email" pattern="^[^@\s]+@([^@\s]+\.)+[^@\s]+$" class="form-control" placeholder="{% trans 'Your Email' %}" data-error="{% trans 'Please enter a valid email address' %}" required>
|
|
||||||
</div>
|
|
||||||
<div class="help-block with-errors">
|
|
||||||
{% for message in messages %}
|
|
||||||
{% if 'email' in message.tags %}
|
|
||||||
<ul class="list-unstyled"><li>
|
|
||||||
{{ message|safe }}
|
|
||||||
</li></ul>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
{% extends "datacenterlight/base.html" %}
|
{% extends "datacenterlight/base.html" %}
|
||||||
{% load staticfiles i18n%}
|
{% load staticfiles i18n%}
|
||||||
{% get_current_language as LANGUAGE_CODE %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
|
|
||||||
<!-- Why Data Center Light? -->
|
<!-- Why Data Center Light? -->
|
||||||
<div class="full-whydcl-sec">
|
<div class="full-whydcl-sec">
|
||||||
<div class="whydcl-header whydcl-section" id="why_dcl">
|
<div class="whydcl-header whydcl-section" id="why_dcl">
|
||||||
|
|
@ -126,9 +123,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -150,94 +144,7 @@
|
||||||
<div class="landing card">
|
<div class="landing card">
|
||||||
<img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
|
<img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
|
||||||
<div class="caption">
|
<div class="caption">
|
||||||
<form id="order_form" method="POST" action="" data-toggle="validator" role="form">
|
{% include "datacenterlight/calculator_form.html" %}
|
||||||
{% csrf_token %}
|
|
||||||
<div class="title">
|
|
||||||
<h3>{% trans "VM hosting" %} </h3>
|
|
||||||
</div>
|
|
||||||
<div class="price">
|
|
||||||
<span id="total">15</span>
|
|
||||||
<span>CHF/{% trans "month" %}</span>
|
|
||||||
<div class="price-text">
|
|
||||||
<p>{% trans "VAT included" %}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="descriptions">
|
|
||||||
<div class="description form-group">
|
|
||||||
<p>{% trans "Hosted in Switzerland" %}</p>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="description input">
|
|
||||||
<i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
|
|
||||||
<input class="input-price select-number" type="number" min="1" max="42" id="coreValue" name="cpu" data-error="{% trans 'Please enter a value greater than or equal to 1.' %}" required>
|
|
||||||
<span> Core</span>
|
|
||||||
<i class="fa fa-plus-circle right" data-plus="cpu" aria-hidden="true"></i>
|
|
||||||
</div>
|
|
||||||
<div class="help-block with-errors"></div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="description input">
|
|
||||||
<i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
|
|
||||||
<input id="ramValue" class="input-price select-number" type="number" min="2" max="200" name="ram" data-error="{% trans 'Please enter a value greater than or equal to 2.' %}" required>
|
|
||||||
<span> GB RAM</span>
|
|
||||||
<i class="fa fa-plus-circle right" data-plus="ram" aria-hidden="true"></i>
|
|
||||||
</div>
|
|
||||||
<div class="help-block with-errors"></div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="description input">
|
|
||||||
<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
|
|
||||||
<input id="storageValue" class="input-price select-number" type="number" min="10" max="500" step="10" name="storage" data-error="{% trans 'Please enter a value greater than or equal to 10.' %}" required>
|
|
||||||
<span>{% trans "GB Storage (SSD)" %}</span>
|
|
||||||
<i class="fa fa-plus-circle right" data-plus="storage" aria-hidden="true"></i>
|
|
||||||
</div>
|
|
||||||
<div class="help-block with-errors"></div>
|
|
||||||
</div>
|
|
||||||
<div class="description select-configuration input form-group justify-center">
|
|
||||||
<label for="config">OS</label>
|
|
||||||
<select name="config" id="">
|
|
||||||
{% for template in templates %}
|
|
||||||
<option value="{{template.id}}">{{template.name}} </option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<input type="hidden" name="total">
|
|
||||||
<!--<div class="description check-ip">
|
|
||||||
<input type="checkbox" name="ipv6"> Ipv6 Only<br>
|
|
||||||
</div>-->
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="description input justify-center">
|
|
||||||
<label for="name" class="control-label">{% trans "Name"%}</label>
|
|
||||||
<input type="text" name="name" class="form-control" placeholder="{% trans 'Your Name'%}" data-minlength="3" data-error="{% trans 'Please enter your name' %}" required>
|
|
||||||
</div>
|
|
||||||
<div class="help-block with-errors">
|
|
||||||
{% for message in messages %}
|
|
||||||
{% if 'name' in message.tags %}
|
|
||||||
<ul class="list-unstyled"><li>
|
|
||||||
{{ message|safe }}
|
|
||||||
</li></ul>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="description input justify-center">
|
|
||||||
<label for="email" class="control-label">{% trans "Email"%}</label>
|
|
||||||
<input name="email" type="email" pattern="^[^@\s]+@([^@\s]+\.)+[^@\s]+$" class="form-control" placeholder="{% trans 'Your Email' %}" data-error="{% trans 'Please enter a valid email address' %}" required>
|
|
||||||
</div>
|
|
||||||
<div class="help-block with-errors">
|
|
||||||
{% for message in messages %}
|
|
||||||
{% if 'email' in message.tags %}
|
|
||||||
<ul class="list-unstyled"><li>
|
|
||||||
{{ message|safe }}
|
|
||||||
</li></ul>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -249,6 +156,4 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- End Why Data Center Light? -->
|
<!-- End Why Data Center Light? -->
|
||||||
|
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue