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/6705937 to your computer and use it in GitHub Desktop.
Save web20opensource/6705937 to your computer and use it in GitHub Desktop.
another mootools checkboxes adopted dynamically
/**
* Created with JetBrains WebStorm.
* User: mario.ruiz
* Date: 25/09/13
* Time: 08:59
* To change this template use File | Settings | File Templates.
*/
window.addEvent('domready', function() {
var isChecked = function(){
var e = $(this).getAttribute('id');
var idL = e.substring(e.length-1);
window.console && console.log(e);
window.console && console.log(e);
window.console && console.log(idL);
if ( $(this).checked ){
$('Q9L_'+idL).removeAttribute('disabled');
$('Q9L_'+idL).set('value','');
}
else{
$('Q9L_'+idL).setAttribute('disabled','true');
}
};
var validate = function(event){
$$('input[id*=Q9L]').each(function(e){
var error = 0;
var inputText = $(e).value;
var number = parseFloat(inputText).toFixed(1);
if (isNaN(number))
error = 1;
if (error){
event.preventDefault();
alert("errorNaN")
}
if (number < 0.5 || number > 4.0){
event.preventDefault();
alert("errorRange")
}
window.console && console.log(number);
});
};
//move fieldset_Q9L to fieldset_Q9
// Q9_1 adopt >>> Q9L_2 Q9L_2_label
$$('input[id*=Q9L]').each(function(e){
var id = $(e).getAttribute('id');
var index = id.substring(id.length-1);
window.console &&console.log((id));
window.console &&console.log(index);
var td1 = new Element('td', {
'id': id+'td'+index,
'html': '',
'styles': {
'background': 'black',
'color': 'white'
}
});
var td2 = new Element('td', {
'id': id+'td'+index + '_label',
'html': '',
'styles': {
'background': 'black',
'color': 'white'
}
});
var qidNewFather = 'Q9_';
var qidInputLabel = 'Q9L_'+index+'_label';
$(qidNewFather + index).getParent().getParent().adopt($(td1).adopt(e));
$(qidNewFather + index).getParent().getParent().adopt($(td2).adopt(qidInputLabel));
//$(e).inject( $(qidNewFather + index).getParent().getParent() );
// $(qidInputLabel).inject( $(qidNewFather + index).getParent().getParent());
});
$$('input[type=checkbox]').each(function(e){e.checked=true;e.addEvent('click',isChecked)});;
$('forwardbutton').addEvent('click',validate);
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://mootools.net/download/get/mootools-core-1.4.5-full-compat-yc.js"></script>
<script src="testDeleteme.js"></script>
</head>
<body>
<div class="wrapper">
<table cellspacing="0" cellpadding="0" summary="Survey Page Area" class="pagearea"><caption style="display: none"></caption><thead style="display: none"><tr><th></th></tr></thead><tbody><tr><td><div><div class="questionarea">
</div>
<!-- INPUT LAYOUT START -->
<div style="">
<fieldset id="fieldset_Q9" style="visibility: visible; " >
<table cellspacing="0" summary="Answers of Q9. Column number 1">
<thead class="confirmit-hidden"><tr><th></th><th></th></tr></thead><tbody>
<tr>
<td class="input"><input type="checkbox" value="1" id="Q9_1" name="Q9_1" tabindex="1"></td>
<td class="answerlabel"><label id="Q9_1_label" for="Q9_1">A</label></td>
</tr>
<tr>
<td class="input"><input type="checkbox" value="1" id="Q9_2" name="Q9_2" tabindex="2"></td>
<td class="answerlabel"><label id="Q9_2_label" for="Q9_2">B</label></td>
</tr>
<tr>
<td class="input"><input type="checkbox" value="1" id="Q9_3" name="Q9_3" tabindex="3"></td>
<td class="answerlabel"><label id="Q9_3_label" for="Q9_3">C</label></td>
</tr>
</tbody></table>
</fieldset>
</div><!-- INPUT LAYOUT END -->
</div>
<div class="questionarea" >
<!-- INPUT LAYOUT START -->
<div>
<fieldset id="fieldset_Q9L" style="visibility: visible;"><table cellspacing="0" summary="Answers of Q9L. Column number 1">
<thead class="confirmit-hidden"><tr><th></th><th></th></tr></thead><tbody>
<tr>
<td class="answerlabel"><label id="Q9L_1_label" for="Q9L_1">D</label></td>
<td class="input"><input type="text" value="" id="Q9L_1" class="numberinput" name="Q9L_1" tabindex="4" size="3"></td>
</tr>
<tr>
<td class="answerlabel"><label id="Q9L_2_label" for="Q9L_2">E</label></td>
<td class="input"><input type="text" value="" id="Q9L_2" class="numberinput" name="Q9L_2" tabindex="5" size="3"></td>
</tr>
<tr>
<td class="answerlabel"><label id="Q9L_3_label" for="Q9L_3">F</label></td>
<td class="input"><input type="text" value="" id="Q9L_3" class="numberinput" name="Q9L_3" tabindex="6" size="3"></td>
</tr>
</tbody></table>
</fieldset>
</div><!-- INPUT LAYOUT END -->
</div>
</div></td></tr></tbody></table><div class="navigationarea"><input type="button" onclick=" if(typeof wix=='object') {wix.back(event, 'p176234484');} " value=" &lt;&lt; " name="__bck" id="backbutton" tabindex="9999" class="colordark confirmit-nav"><input type="submit" value=" &gt;&gt; " onclick=" if(typeof wix=='object') {wix.nav(event, 'p176234484');} " name="__fwd" id="forwardbutton" tabindex="9998" class="colordark confirmit-nav"></div></div>
</body>
</html>
@web20opensource
Copy link
Author

*Mootools basic validation from input
*Range accepted [0.5,4.0]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment