Created
January 18, 2011 14:57
-
-
Save randrew/784532 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script><script type="text/javascript">// Requires that JQuery also be in scope | |
function findInputList(button) { | |
var mainDiv = $(button).parent(); | |
while ( !mainDiv.hasClass('inputList') ) { | |
mainDiv = $(mainDiv).parent(); | |
} | |
return mainDiv; | |
} | |
function findItems(button) { | |
return $('.inputListItem', findInputList(button)); | |
} | |
function addItem(button) { | |
var count = $(':hidden', findInputList(button))[0]; | |
var items = findItems(button); | |
var item = $(items[items.length-1]); | |
var newItem = item.clone(true); | |
var i; | |
// Increment counter | |
$(count).val(parseInt($(count).val())+1); | |
// We have to change the raw html because IE doesn't allow the | |
// name field to be changed. | |
newItem.html(newItem.html().replace(/fval\[(\d+\.)*(\d+)\.(\d+)\]/g, | |
function(a, b, c, d) { | |
var newC = parseInt(c)+1; | |
return a.replace(/\d+\.\d+\]/, newC+'.'+d+']'); | |
} | |
)); | |
newItem.appendTo(item.parent()); | |
// Copy the values of all children that had the name attribute set. | |
// The direct html insertion does not preserve the most current | |
// values. It only preserves default values, so if we want values | |
// copied, we have to use an approach like this. | |
var items2 = findItems(button); | |
var newLast = $(items2[items2.length-1]); | |
var c1 = $('[name]', item); | |
var c2 = $('[name]', newLast); | |
if ( c1.length == c2.length ) { | |
for ( i = 0; i < c1.length; i++ ) { | |
$(c2[i]).val($(c1[i]).val()); | |
} | |
} | |
} | |
function removeItem(button) { | |
var items = findItems(button); | |
if ( items.length > 1 ) { | |
var count = $(':hidden', findInputList(button))[0]; | |
var item = $(items[items.length-1]); | |
item.remove(); | |
// Decrement counter | |
$(count).val(parseInt($(count).val())-1); | |
} else { | |
alert('Cannot remove any more rows'); | |
} | |
} | |
</script><style type="text/css">input {display: block;} | |
.digestive-error-list { | |
color: white; | |
background-color: rgb(100, 0, 0); | |
}</style><h1>Enter the names of places and some tags</h1><form enctype="application/x-www-form-urlencoded" method="POST" action="/"><div class="inputList"><div><input type="button" onclick="alert('<label for="place-form-fval[0]" class="digestive-label">Name</label><input type="text" name="place-form-fval[0]" id="place-form-fval[0]" value="" class="digestive-input" /><div class="inputList"><div><input type="button" onclick="alert('&lt;input type=&quot;text&quot; name=&quot;place-form-fval[1]&quot; id=&quot;place-form-fval[1]&quot; value=&quot;&quot; class=&quot;digestive-input&quot; /&gt;'); return false;" value="Add Item" /><input type="button" onclick="removeItem(this); return false;" value="Remove Item" /></div><input type="hidden" name="place-form-fval[1]" id="place-form-fval[1]" value="1" class="digestive-input" /><div class="inputListItem"><input type="text" name="place-form-fval[1.0.0]" id="place-form-fval[1.0.0]" value="" class="digestive-input" /></div></div>'); return false;" value="Add Item" /><input type="button" onclick="removeItem(this); return false;" value="Remove Item" /></div><input type="hidden" name="place-form-fval[0]" id="place-form-fval[0]" value="1" class="digestive-input" /><div class="inputListItem"><label for="place-form-fval[0.0.0]" class="digestive-label">Name</label><input type="text" name="place-form-fval[0.0.0]" id="place-form-fval[0.0.0]" value="" class="digestive-input" /><div class="inputList"><div><input type="button" onclick="alert('<input type="text" name="place-form-fval[0.0.1]" id="place-form-fval[0.0.1]" value="" class="digestive-input" />'); return false;" value="Add Item" /><input type="button" onclick="removeItem(this); return false;" value="Remove Item" /></div><input type="hidden" name="place-form-fval[0.0.1]" id="place-form-fval[0.0.1]" value="1" class="digestive-input" /><div class="inputListItem"><input type="text" name="place-form-fval[0.0.1.0.0]" id="place-form-fval[0.0.1.0.0]" value="" class="digestive-input" /></div></div></div></div><input type="submit" value="Submit" /></form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment