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 ul#employees
form#myForm form#myForm
div.clonedInput#input1 div.Name#input1(style='display: none')
input(type='text', id='employee_name', value='name') input(type='text', id='employee_name', value='name')
input(type='text', id='employee_salary', value='salary') 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 div
input(type='button', id='btnAdd', value='add another name') input(type='button', name='Exercise', value='add another exercise', class="btnAdd" )
input(type='button', id='btnDel', value='remove name') 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') input(type='button', id='save', value='Save')

View File

@@ -18,28 +18,32 @@ html
$('#employees').html(out); $('#employees').html(out);
}); });
$('#btnAdd').click(function() { $('.btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 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 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 // 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 // manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// insert the new element after the last "duplicatable" input field // 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 // enable the "remove" button
$('#btnDel').prop('disabled',false); $('.btnDel').prop('disabled',false);
// business rule: you can only add 5 names // business rule: you can only add 5 names
if (newNum == 12) if (newNum == 12)
$('#btnAdd').prop('disabled',true); $('#btnAdd').prop('disabled',true);
}); });
$('#btnDel').click(function() { $('.btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element $('#input' + num).remove(); // remove the last element
@@ -51,7 +55,7 @@ html
$('#btnDel').prop('disabled',true); $('#btnDel').prop('disabled',true);
}); });
$('#btnDel').attr('disabled',true); $('.btnDel').attr('disabled',true);
$('#save').click(function() { $('#save').click(function() {