StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In case anyone needs an example of the Javascript for dyanmically adding and removing books (JQUERY needed):</p> <pre><code><script type="text/javascript"> $(document).ready(function() { var bookCount=0; $('#btnAddBook').click(function() { bookCount++; //newElem = go up a to the parent div then grab the previous container var newElem = $(this).parent().prev().clone().attr('id', 'book[' + bookCount + ']'); //for each input inside the div, change the index to the latest bookCount $(newElem).find("input").each(function(){ var name = $(this).attr('name'); var leftBracket = name.indexOf("["); var rightBracket = name.indexOf("]"); var beforeBracketString = name.substring(0,leftBracket+1);//+1 to include the bracket var afterBracketString = name.substring(rightBracket); $(this).attr('name', beforeBracketString + bookCount + afterBracketString); }); //insert it at the end of the books $(this).parent().prev().after(newElem); $(newElem).find("input").each(function(){ $(this).attr('id', $(this).attr('id') + bookCount); }); //enable the remove button $('#btnRemovebook').removeAttr('disabled'); //If we are at 16 divs, disable the add button if (bookCount == 15) $(this).attr('disabled','disabled'); }); $('#btnRemoveBook').click(function() { bookCount--; //remove the last book div $(this).parent().prev().remove(); //in case add was disabled, enable it $('#btnAddbook').removeAttr('disabled'); //never let them remove the last book div if (bookCount == 0) $(this).attr('disabled','disabled'); }); }); </script>  <div id="book[0]"> <label> Book: </label> <input type="text" name="books[0].author" value="Author" /> <input type="text" name="books[0].title" value="Title" /> </div> <div> <input type="button" id="btnAddbook" value="Add another book" /> <input type="button" id="btnRemovebook" value="Remove last book" disabled="disabled" /> </div>  </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload