Hi,
does anyone have any experience with adding some asynchronous functionality to forms, ie. user creation?
In the example below I attempt to make a form that allows visitors to sign up for a newsletter. They're simply added to a specific user group.
However, I want to prevent the rather clunky behaviour from a form submit and instead just notify the user that they've signed up using javascript.
I get the "success" callback, but no users are added.
Here's my code:
<!--@UserManagement:User.FormStart-->
<div class="col-md-8 col-sm-12 col-lg-6 nyhedsbrevform" style="padding-bottom:15px; padding-left:0px; padding-right:5px">
<input type="text" id="UserManagement_Form_Name" class="form-control" name="UserManagement_Form_Name" placeholder="Navn" value = "">
<input type="text" class="form-control" id="UserManagement_Form_Email" name="UserManagement_Form_Email" placeholder="Email" value = "">
<input style="display:none;" name="<!--@UserManagement:User.EmailAllowed.InputName-->" type="checkbox" id="<!--@UserManagement:User.EmailAllowed.InputName-->" value="True" checked="checked" />
<!--@UserManagement:User.EmailAllowed.Hidden.Input-->
<button type="submit" id="submitter" class="btn btn-default footer-button" value="<!--@Translate(subscribe, "Tilmeld")-->"><!--@Translate(subscribe, "Tilmeld")--></button>
</div>
<!--@UserManagement:User.FormEnd-->
<script type="text/javascript">
$( document ).ready(function() {
$('form[name="UserManagementEditForm"]').submit(function(e){
e.preventDefault();
var name = $(this).find('#UserManagement_Form_Name').val();
var mail = $(this).find('#UserManagement_Form_Email').val();
var emva = $(this).find('#UserManagement_Form_EmailAllowed').val();
$.ajax({
url:'default.aspx',
type:'POST',
data:{
UserManagement_Form_Name: name,
UserManagement_Form_Email: mail,
UserManagement_Form_EmailAllowed: emva
},
error:function(msg){
alert("boo");
},
success:function(msg){
alert("yay");
console.log(msg);
},
});
});
});
</script>