Skip to content

Instantly share code, notes, and snippets.

@mankind

mankind/base.html

Last active July 21, 2016 09:45
Show Gist options
  • Save mankind/09759ba2cb7f997e3cdcb521664f4774 to your computer and use it in GitHub Desktop.
Save mankind/09759ba2cb7f997e3cdcb521664f4774 to your computer and use it in GitHub Desktop.
Download ZIP
Simple user defined form fields using html and javacsript. see demo: http://codepen.io/anon/pen/dMEywE and http://jsbin.com/vikibacese/edit?html,js,output
Raw
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> User define form element Example </title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.23.1.css">
<style>
#div1 {
height: 180px;
padding: 3px 5px 3px 5px;
float:right;
}
#content {
overflow:auto;
width: 100%;
background: gray;
}
#div1, #drag1 {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#drag1 { float:left; }
#select select{
width: 40px;
height: 30px;
}
#input input{
width: 20px;
height: 50px;
}
</style>
<script src='common_methods.js'> </script>
<script src='input_object.js'> </script>
<script src="option_select_object.js"></script>
<script src="https://code.jquery.com/qunit/qunit-1.23.1.js"></script>
<script src="tests.js"></script>
</head>
<body onload="init()">
<div id="content">
<div id="div1" ondrop="CUSTOMFORMELEMENT.commonMethods.drop(event)" ondragover="CUSTOMFORMELEMENT.commonMethods.allowDrop(event)">
<p>
<span id='select-label'>Add combobox</span>
<select id="select">
<option value="">Click to add custom options</option>
</select>
</p>
</div>
<div id="drag1">
<p>Create form by Dragging elements to the right </p>
<p>You can only drag an element once, then use the plus or minus button
that appears to add more of the dragged element </p>
<label id='label' for="text">Simple Text</label>
<input id="input" draggable="true" ondragstart="CUSTOMFORMELEMENT.commonMethods.drag(event)" >
</div>
</div>
<br/>
<div id="qunit"> </div>
<div id="quint-fixture"> </div>
</body>
</html>
Raw
common_methods.js
var CUSTOMFORMELEMENT = window.CUSTOMFORMELEMENT || {};
function init(){
var addPrompt = CUSTOMFORMELEMENT.optionsSelectObject.selectOptionPrompt;
CUSTOMFORMELEMENT.optionsSelectObject.onetimeEventListener("click", addPrompt);
}
CUSTOMFORMELEMENT.commonMethods = {
allowDrop: function (event){
event.preventDefault();
},
drag: function (event){
var childInput = document.getElementById('input');
if (childInput.id == event.target.id) {
CUSTOMFORMELEMENT.inputFieldObject.dragInputField(event);
} else {
alert('please select from the left');
}
},
drop: function(event) {
event.preventDefault();
var parent = document.getElementById('div1');
var childInput = document.getElementById('input');
var childInputLength = parent.getElementsByTagName('input').length;
var dragField = event.dataTransfer.getData('text');
if (childInputLength < 1 && childInput.id == dragField ) {
CUSTOMFORMELEMENT.inputFieldObject.dropField(event);
} else {
alert('please select from the left');
}
}
};
Raw
input_object.js
CUSTOMFORMELEMENT.inputFieldObject = {
dragInputField: function(event){
var child = document.getElementById('input');
var childNodeName = child.cloneNode(true);
var nodeToDrag = childNodeName.nodeName.toLowerCase();
event.dataTransfer.setData('text', nodeToDrag);
},
dropField: function(event){
var parent = document.getElementById('div1');
var button = '<button name="remove_button" id="remove" onclick="CUSTOMFORMELEMENT.inputFieldObject.removeButton(event)"> - </button>';
var add = '<button name="add_button" id="add" onclick="CUSTOMFORMELEMENT.inputFieldObject.addMoreButton()"> + </button>';
var data = event.dataTransfer.getData('text');
event.target.appendChild(document.getElementById(data));
parent.innerHTML += button;
parent.innerHTML += add;
CUSTOMFORMELEMENT.inputFieldObject.addBackDraggableInput();
CUSTOMFORMELEMENT.inputFieldObject.labelPrompt();
},
addBackDraggableInput: function(){
var parent = document.getElementById('drag1');
childNode = parent.getElementsByTagName('input').length;
var child = document.getElementById('input');
var cloneChildNode = child.cloneNode(true);
if (childNode === 0) {
parent.appendChild(cloneChildNode);
}
},
labelPrompt: function() {
var input = prompt("Please enter a label", "eg name");
if (input != null) {
var label = document.createElement("label");
var parent = document.getElementById("div1");
var c = parent.getElementsByTagName('input')[0];
var d = parent.getElementsByTagName("label").length;
if (d >= 1) {
label.id = 'label' + d++;
label.innerHTML = input;
parent.appendChild(label);
} else {
label.id = 'label';
label.innerHTML = input;
parent.appendChild(label);
}
}
},
addMoreButton: function (){
var parent = document.getElementById('div1');
var newInputField = '<br /><input width="20" height="50" id="input">';
var child = document.getElementById('input');
var t = parent.getElementsByTagName('input')[0];
cloneChild = child.cloneNode(true);
var d = parent.getElementsByTagName("input").length;
var labelLength = parent.getElementsByTagName("label").length;
var counter = 1;
cloneChild.id = "input" + d++;
var removeButton = document.getElementById('remove');
var cloneRemoveButton = removeButton.cloneNode(true);
cloneRemoveButton.id = "remove" + labelLength++;
var addButton = document.getElementById('add');
var cloneAddButton = addButton.cloneNode(true);
parent.appendChild(cloneChild);
parent.appendChild(cloneRemoveButton);
parent.appendChild(cloneAddButton);
CUSTOMFORMELEMENT.inputFieldObject.labelPrompt();
},
removeButton: function(event) {
target = event.target;
inputId = target.id.replace('remove', 'input');
labelId = target.id.replace('remove', 'label');
var parent = document.getElementById('div1');
var removeInput = document.getElementById(inputId);
var removeButtonRemoval = document.getElementById(target.id);
var addButtonRemoval = document.getElementById('add');
var removeLabel = document.getElementById(labelId);
parent.removeChild(removeButtonRemoval);
parent.removeChild(addButtonRemoval);
removeLabel.parentNode.removeChild(removeLabel);
removeInput.parentNode.removeChild(removeInput);
}
};
Raw
option_select_object.js
CUSTOMFORMELEMENT.optionsSelectObject = {
selectOptionPrompt: function() {
var option = prompt('please enter options seperated by comma for example', 'option1, option2');
optionArray = option.split(',');
if (optionArray != null) {
CUSTOMFORMELEMENT.optionsSelectObject.loopOverSubmittedPromptOptions();
}
CUSTOMFORMELEMENT.optionsSelectObject.removeDefaultOption();
},
removeDefaultOption: function() {
var removeOption = document.getElementById("select").options[0];
removeOption.parentNode.removeChild(removeOption);
},
loopOverSubmittedPromptOptions: function() {
for(var i = 0; i < optionArray.length; i++) {
var select = document.getElementById('select');
var addOption = document.createElement('option');
addOption.text = optionArray[i];
select.add(addOption);
}
},
onetimeEventListener: function(type, callback) {
var node = document.getElementById('select');
node.addEventListener(type, function handler(event) {
event.target.removeEventListener(event.type, handler);
return callback();
});
}
};
Raw
test.js
QUnit.test('test default select option can be removed', function(assert){
removeOption = CUSTOMFORMELEMENT.optionsSelectObject.removeDefaultOption();
assert.equal(removeOption, undefined);
});
QUnit.test("Test", function (assert) {
var optionParent = document.getElementById("myselect");
optionParent.click();
assert.equal(op.length, 2);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment