javascript - How to create additional fields and remove them from a form? -
i trying allow users add additional email fields if want add additional email accounts, , hit remove if hit not want add field. however, cannot remove button work, , also, trying somehow differentiate each class including variable emailcount in each class not working either reason...
here jquery script: (it in document ready function)
var = 0; $(function(){ =+ 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 jade file: (it works correctly, maybe 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) userc in uemaillistcount 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 email address: button.addemail add email br label add phone number: button.addphone add phone number
you can try this:
$("."+emailcount).remove(); i--;
if want add or remove several times make sure emailcount set right value, when adding you're not setting again , when removing you're not changing well.
Comments
Post a Comment