In the application, a user can register as an initial user of a subsequent user. When the user clicks yes or no to Firm already registered?
, if yes, the script changes the form name and id to subUserForm
and if they select no, initialUserForm
, like so:
<span>Firm already registered?</span>
<label>Yes<input type="radio" name="typeRegister" id="subRegister"></label>
<label>No<inputtype="radio" name="typeRegister" id="initalRegister"></label>
And my submit button
<button class="btn btn--reg bg-phase-green pill-radius txt-white font-body font-weight-medium" type="submit" id="register" disabled>Register</button>
('#subRegister').change(function(){
if(this.checked) {
$('#registerForm').attr('name', 'subUserForm').attr('id', 'subUserForm');
} else {
$('#registerForm').attr('name', 'initialUserForm').attr('id', 'initialUserForm');
}
})
$('#initalRegister').change(function(){
if(this.checked) {
$('#registerForm').attr('name', 'initialUserForm').attr('id', 'initialUserForm');
} else {
$('#registerForm').attr('name', 'subUserForm').attr('id', 'subUserForm');
}
})
The reason is, depending on the option they select, it changes the request made. I've checked that the name and id are being updated, and they are, but when I click submit, nothing happens. Nothing I logged, no request is made etc.
$('#initialUserForm').submit(function(e){
console.log('initial');
e.preventDefault();
var dataString = JSON.parse(JSON.stringify($('#initialUserForm').serializeArray()));
$.ajax({
type: 'POST',
url: 'http://localhost:8080/p3sweb/register/rest-user/',
data: dataString,
contentType: "application/json",
success: function(response) {
console.log(response);
},
error:function(errResponse) {
console.log('fail')
}
})
})
$('#subUserForm').submit(function(e){
console.log('sub');
e.preventDefault();
var dataString = JSON.parse(JSON.stringify($('#subUserForm').serializeArray()));
$.ajax({
type: 'POST',
url: 'http://localhost:8080/p3sweb/register/rest-subsequent-user-step2/',
data: dataString,
contentType: "application/json",
success: function(response) {
console.log(response);
},
error:function(errResponse) {
console.log('fail')
}
})
})
Question
Is there an issue with dynamically changing the name of a form, or am I missing something really simple to why the form data isn't being submitted?