updated app

This commit is contained in:
2012-05-31 09:10:45 -04:00
parent da6ad88d48
commit f3086a009c
2 changed files with 22 additions and 12 deletions

View File

@@ -19,10 +19,16 @@
ul#employees
form#myForm
div.clonedInput#input1
div.Name#input1(style='display: none')
input(type='text', id='employee_name', value='name')
input(type='text', id='employee_salary', value='salary')
div.Exercise#input1(style='display: none')
input(type='text', id='employee_name', value='Exercise')
input(type='text', id='employee_salary', value='Sets')
div
input(type='button', id='btnAdd', value='add another name')
input(type='button', id='btnDel', value='remove name')
input(type='button', name='Exercise', value='add another exercise', class="btnAdd" )
input(type='button', name='Exercise', value='remove exercise', class="btnDel" )
input(type='button', name='Name', value='add another name', class="btnAdd" )
input(type='button', name='Name', value='remove name', class="btnDel" )
input(type='button', id='save', value='Save')

View File

@@ -18,28 +18,32 @@ html
$('#employees').html(out);
});
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('.btnAdd').click(function() {
var classname = $(this).attr("name")
var num = $('.' + classname).length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
var newElem = $("."+classname+"#input" + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
$("."+classname+"#input" + num).after(newElem);
$("."+classname+"#input" + newNum).css('display', 'block');
// enable the "remove" button
$('#btnDel').prop('disabled',false);
$('.btnDel').prop('disabled',false);
// business rule: you can only add 5 names
if (newNum == 12)
$('#btnAdd').prop('disabled',true);
});
$('#btnDel').click(function() {
$('.btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
@@ -51,7 +55,7 @@ html
$('#btnDel').prop('disabled',true);
});
$('#btnDel').attr('disabled',true);
$('.btnDel').attr('disabled',true);
$('#save').click(function() {