0

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?

Patrick McDermott
  • 1,220
  • 1
  • 15
  • 30

0 Answers0