Skip to content

Instantly share code, notes, and snippets.

@web20opensource
Last active December 23, 2015 22:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save web20opensource/6706291 to your computer and use it in GitHub Desktop.
Save web20opensource/6706291 to your computer and use it in GitHub Desktop.
mootools + some js stuff for validate the list like a shopping food menu in a restaurant
window.addEvent('domready', function() {
$$('*[id*="S2_98"]').each(function(e){e.style['display']='none';});
$$('input').each(function(input){
input.checked = false;
});
var totalProducts = 0;
var totalProductTag = new Element('label', {
'id': 'totalProductTag',
'html': 'Total Products: '+totalProducts,
'styles': {
'background': 'yellow',
'color': 'black'
}
});
totalProductTag.inject($('fieldset_S2'),'bottom') ;
var totalAccount = 0;
var totalAccountTag = new Element('label', {
'id': 'totalAccountTag',
'html': 'Total Account: '+totalAccount,
'styles': {
'background': 'yellow',
'color': 'black'
}
});
var restFromSum = function(elems){
$$(elems).each(function(input){
if (input.checked){
input.checked=false;
totalProducts--;
totalProductTag.set('html','Total : ' + totalProducts);
var label = $(input.id + '_label').get('html').split(' ').pop();
var actualProductPrice = String.from(label).toInt();
totalAccount -= actualProductPrice;
totalAccountTag.set('html','Total Account: ' + totalAccount);
}
});
};
var br = new Element('br',{html:'/'});
br.inject($('fieldset_S2'),'bottom') ;
totalAccountTag.inject($('fieldset_S2'),'bottom') ;
var isChecked = function(event){
if ( $(this).id == 'forwardbutton' || $(this).id == 'backbutton' || $(this).id == 'S2_12_other')
return;
if ( $(this).id=='S2_8' ){
console.log('clicked');
//event.preventDefault();
if ( $(this).checked )
$$('*[id*=_98]').setStyle('display', 'block');
else{
$$('*[id*=_98]').setStyle('display', 'none');
restFromSum('*[id*=_98]');
}
}
else{
var label = $(this.id + '_label').get('html').split(' ').pop();
var actualProductPrice = String.from(label).toInt();
// other (specify) - no caontains price
this.id == 'S2_12' ? actualProductPrice=0 : true;
if ($(this).checked){
totalProducts++;
totalAccount += actualProductPrice;
}else{
totalProducts--;
totalAccount -= actualProductPrice;
};
totalProductTag.set('html','Total Products: ' + totalProducts);
totalAccountTag.set('html','Total Account: ' + totalAccount);
console.log('Total Products: ' + totalProducts + ' ' +'Total Account: ' + totalAccount);
}
};
$$('input').addEvent('click',isChecked);
});
<!DOCTYPE html>
<html>
<head>
<script src="http://mootools.net/download/get/mootools-core-1.4.5-full-compat-yc.js"></script>
<script src="coffee.js"></script>
<title></title>
<style>
*[id*="S1_98"]{
display:none;
}
</style>
</head>
<body>
<div class="answers">
<fieldset id="fieldset_S2" style="visibility: visible;"><table cellspacing="0" summary="Answers of S2. Column number 1"><tbody>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_1" name="S2_1" tabindex="1"></td>
<td class="answerlabel"><label id="S2_1_label" for="S2_1" style="cursor: pointer;">Pancakes 50$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_2" name="S2_2" tabindex="2"></td>
<td class="answerlabel"><label id="S2_2_label" for="S2_2">Putatoes 25$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_23" name="S2_23" tabindex="3"></td>
<td class="answerlabel"><label id="S2_23_label" for="S2_23">Soup 37$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_24" name="S2_24" tabindex="4"></td>
<td class="answerlabel"><label id="S2_24_label" for="S2_24">Beef stake 120$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_5" name="S2_5" tabindex="5"></td>
<td class="answerlabel"><label id="S2_5_label" for="S2_5">Fruit Salad 30$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_6" name="S2_6" tabindex="6"></td>
<td class="answerlabel"><label id="S2_6_label" for="S2_6">Cake 66.8$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_7" name="S2_7" tabindex="7"></td>
<td class="answerlabel"><label id="S2_7_label" for="S2_7">Tea 22$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_8" name="S2_8" tabindex="8"></td>
<td class="answerlabel"><label id="S2_8_label" for="S2_8">Coffee </label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_981" name="S2_981" tabindex="9"></td>
<td class="answerlabel"><label id="S2_981_label" for="S2_981">Expresso 35$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_982" name="S2_982" tabindex="10"></td>
<td class="answerlabel"><label id="S2_982_label" for="S2_982">Latte 20$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_983" name="S2_983" tabindex="11"></td>
<td class="answerlabel"><label id="S2_983_label" for="S2_983">Capuchino 40$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_984" name="S2_984" tabindex="12"></td>
<td class="answerlabel"><label id="S2_984_label" for="S2_984">Black 22$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_81" name="S2_81" tabindex="13"></td>
<td class="answerlabel"><label id="S2_81_label" for="S2_81">Coffee 30$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_9" name="S2_9" tabindex="14"></td>
<td class="answerlabel"><label id="S2_9_label" for="S2_9">Juice 18$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_10" name="S2_10" tabindex="15"></td>
<td class="answerlabel"><label id="S2_10_label" for="S2_10">Pasta 33$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_11" name="S2_11" tabindex="16"></td>
<td class="answerlabel"><label id="S2_11_label" for="S2_11">Salads 28$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_13" name="S2_13" tabindex="17"></td>
<td class="answerlabel"><label id="S2_13_label" for="S2_13">Tacos 40$</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S2_12" name="S2_12" tabindex="18"></td>
<td class="answerlabel"><label id="S2_12_label" for="S2_12">Other (specify)</label><input type="text" value="" id="S2_12_other" class="othertextfield" name="S2_12_other" tabindex="19" size="15" __oldvalue=""><label id="S2_12_other_label" class="confirmit-offscreen" for="S2_12_other">Other (specify)</label></td>
</tr>
</tbody></table>
</fieldset>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment