disable form fields when submitting, re-enabling when we get a response

This commit is contained in:
Gered 2014-03-30 17:23:28 -04:00
parent 0d733381d5
commit 2b1be20cc8
2 changed files with 37 additions and 26 deletions

View file

@ -18,6 +18,7 @@ $(document).ready(function() {
e.preventDefault();
var form = $(this);
var fieldset = form.find('fieldset');
var params = {};
form.find('.form-control').filter('[data-fieldname]').each(function() {
@ -38,6 +39,8 @@ $(document).ready(function() {
errorContainer.html('');
errorContainer.hide();
fieldset.attr('disabled', true);
var url = context + 'api' + apiEndpoint + '?' + jQuery.param(params);
$.get(url)
.done(
@ -51,6 +54,8 @@ $(document).ready(function() {
textOutputContainer.text(data);
textOutputContainer.show();
}
fieldset.attr('disabled', null);
})
.fail(
function (response) {
@ -62,6 +67,8 @@ $(document).ready(function() {
response.responseText
);
errorContainer.show();
fieldset.attr('disabled', null);
});
})

View file

@ -1,34 +1,38 @@
<form class="form-horizontal api-form" role="form" id="textForm" data-api-endpoint="/text">
<div class="form-group">
<label for="textText" class="col-sm-2 control-label">Text to Render</label>
<div class="col-sm-10">
<textarea class="form-control" id="textText" placeholder="Enter text" data-fieldname="s"></textarea>
<fieldset>
<div class="form-group">
<label for="textText" class="col-sm-2 control-label">Text to Render</label>
<div class="col-sm-10">
<textarea class="form-control" id="textText" placeholder="Enter text" data-fieldname="s"></textarea>
</div>
</div>
</div>
<div class="form-group">
<label for="textFont" class="col-sm-2 control-label">Font</label>
<div class="col-sm-3">
<select class="form-control" id="textFont" data-fieldname="font">
{% for font in fontNames %}
<option{% if (font == "standard") %} selected{% endif %}>{{ font }}</option>
{% endfor %}
</select>
<div class="form-group">
<label for="textFont" class="col-sm-2 control-label">Font</label>
<div class="col-sm-3">
<select class="form-control" id="textFont" data-fieldname="font">
{% for font in fontNames %}
<option{% if (font == "standard") %} selected{% endif %}>{{ font }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="textFormat" class="col-sm-2 control-label">Format</label>
<div class="col-sm-3">
<select class="form-control" id="textFormat" data-fieldname="format">
<option>html</option>
<option>text</option>
</select>
<div class="form-group">
<label for="textFormat" class="col-sm-2 control-label">Format</label>
<div class="col-sm-3">
<select class="form-control" id="textFormat" data-fieldname="format">
<option>html</option>
<option>text</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Render To ASCII</button>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Render To ASCII</button>
</div>
</div>
</div>
</fieldset>
</form>
<pre class="textOutputContainer" style="display: none;"></pre>