Wednesday, 7 August 2013

How to create additional fields and remove them from a form?

How to create additional fields and remove them from a form?

I am trying to allow users to add additional email fields if they want to
add additional email accounts, and hit remove if they hit they do not want
to add the field. However, I cannot get the remove button to work, and I
was also, trying to somehow differentiate each class by including a
variable emailCount in each class but that is not working either for some
reason...
Here is the jquery script: (it is in a document ready function)
$(function(){
var i = 0;
var i =+ 1;
var emailCount = "Email" + i.toString();
console.log(i);
console.log(emailCount);
$('.addEmail').click(function() {
$('#addInfo').append('<div class="' + emailCount
'"></div><form class="newEmail", method="post",
action="newEmailPost"> <label>' + emailCount + '</label>' +
'<input name="' + emailCount + '", type="email",
value=""/><br><input type="submit", class="addNewEmail",
value="Save Email"></input><button
class="removeEmailField">Remove</button></form><br>');
});
$('.removeEmailField').click(function() {
$(emailCount).remove();
});
});
Here is the jade file: (it works correctly, but maybe it will help for
visual purposes)
extends layout
block content
div.centerContent
div
form.validateForm(method="POST", action="/editUserProfile")
legend Edit Profile
input(type="text", name="firstName", maxlength="20",
placeholder=ufirstName, value=ufirstName)
br
input(type="text", name="lastName", maxlength="20",
placeholder=ulastName, value=ulastName)
br
input(type="email", name="email", maxlength="20",
placeholder=uemail, value=uemail)
br
- if(uemailList.length > 0)
for userC in uemailListCount
for userE in uemailList
input(type="email", name=userC,
maxlength="20", placeholder=userE,
value=userE)
br
input(type="number", name="phone", maxlength="20",
placeholder=uphone, value=uphone)
br
input(type="date", name="birthday", value=ubirthday)
br
input.btn.btn-primary(type="submit", name="Update",
value="Save")
a(href="/userProfile")
button.btn(type="button") Cancel
hr
div#addInfo
label Add another email address:
button.addEmail Add Email
br
label Add another phone number:
button.addPhone Add Phone Number

No comments:

Post a Comment