Connecting radio buttons to custom signup

Hi Everyone,

I have code that I am using to make my site the sign up to my web app. The only thing that isn’t working so far is connecting the radio buttons to differentiate what dashboard the user lands on. This is the code I am working with, I have attached the values and classes necessary but it sill does’t want to forward right.

Here is the original page where the values work on signup.
Here is the page where it is not working.

Thanks in advance!

<label class="control-label" for="cf_lead_type">cf_lead_type</label> 
<input id="cf_lead_type" name="cf_lead_type" type="text" value=" Landlord " />
<input class="d-none" id="keyword" name="keyword" type="text" value="website, landlord signup, Landlord " />
<input id="signup-path" name="host" type="hidden" value="https://my.tenantcube.com/signup" /> 
<input id="pwd-hide" name="pwdhide" type="hidden" value="" />

<div class="form-group col-12 is-required pb-1">
  <label class="control-label w-100 pb-1"> Select your account type </label>
  <div class="custom-control custom-radio custom-control-inline pr-5">
    <input checked="checked" class="custom-control-input" id="landlordRadio" name="signup[role]" type="radio" value="account_admin" />
    <label class="custom-control-label" for="landlordRadio"> Landlord </label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input class="custom-control-input" id="tenantRadio" name="signup[role]" type="radio" value="applicant" /> <label class="custom-control-label" for="tenantRadio"> Tenant </label>
  </div>
</div>

Here is my site Read-Only: LINK

Hey @terrance, the example you shared is using some external JavaScript to handle that logic. The form action is calling a signupAccount() function that lives in a signup.js file that’s getting loaded in inside of the <head> tag.

You’ll likely need to write some custom JavaScript to achieve the same result on your Webflow page.

Hi Blake, thanks for checking it out. As you can tell I’m not great with javascript. I also have the full code in my webflow project before /body. All my other signup pages work with the below code except for the radio buttons.

<script>
function changeEntry(){
  document.getElementById('signup-error').innerHTML = ''
  validForm();
}

function clearForm(){
  var myForm = document.getElementById('signup-form');
  myForm.reset();
  // document.getElementById('server-msg').className = 'hide-msg';
  hideSuccessMsg();
  myForm.hidden = false;

}

function showSuccessMsg() {
  document.querySelector("#show-on-success").style.display = "block";
  document.querySelector("#hide-on-success").style.display = "none";
}

function hideSuccessMsg() {
  document.querySelector("#show-on-success").style.display = "none";
  document.querySelector("#hide-on-success").style.display = "block";
}

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + 0);
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function validForm(){
  setCookie('tencube-cs');
  document.getElementById("signup-error").innerHTML = "";
  var msg = "";
  var inpObj = document.getElementById("email");
  if (!inpObj.checkValidity()) {
    msg = inpObj.id +':' +inpObj.validationMessage + '<br/>';
  }
  inpObj = document.getElementById("pwd");
  if (!inpObj.checkValidity()) {
    msg +=  inpObj.id +':' +inpObj.validationMessage + '<br/>';
  }
  inpObj = document.getElementById("pwd_confirm");
  if (!inpObj.checkValidity()) {
    msg += inpObj.id +':' +inpObj.validationMessage+ '<br/>';
  }
  if (msg != ""){
    document.getElementById("signup-error").innerHTML = msg;
    return false;
  }
  return true;
}

function encrypt(){
  var pass = document.getElementById('pwd').value;
  var hide = document.getElementById('pwd-hide').value;
  document.getElementById("pwd-hide").value = pass.value;
  var hash = btoa(pass);
  var pass_confirm = document.getElementById('pwd_confirm').value;

  document.getElementById('pwd').value = hash;
  document.getElementById('pwd_confirm').value = btoa(pass_confirm);
  return true;
}

function signupAccount(){
  if (!validForm()) {
    document.getElementById('signup-error').className += " " + 'show-msg';
    return false
  };
  document.getElementById('signup-error').className += " " + 'hide-msg';
  encrypt();
  var url = document.getElementById('signup-path').value;
  var myForm = document.getElementById('signup-form');
  var loadingDiv = document.getElementById('loadingDiv');
  var formData = new FormData(myForm);
  var xmlHttp = new XMLHttpRequest();

  xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4){
      if( xmlHttp.status == 201)
      {
        myForm.reset();
        // myForm.hidden = true;
        loadingDiv.style.display = "block";
        var data = JSON.parse(this.responseText);
        window.location.href = '/thankyou?token='+data['refresh_token'];
      }
      if(xmlHttp.status == 422){
        console.log(JSON.parse(xmlHttp.responseText));

        document.getElementById('pwd').value = '';
        document.getElementById('pwd_confirm').value = '';
        loadingDiv.style.display = "none";
        var errors = JSON.parse(xmlHttp.responseText);
        var keys = Object.keys(errors);
        for(i=0; i<keys.length; i++){
          var errorElem = document.getElementById(keys[i]+'-error');
          errorElem.querySelector('input').className += " "+"is-invalid"
          errorElem.querySelector('.invalid-feedback').innerHTML = keys[i] +' '+ errors[keys[i]][0];
          errorElem.querySelector('.invalid-feedback').style.display = "block";
        }
      }
    }
  }
  xmlHttp.open("post", url);
  xmlHttp.send(formData);
}
//----------------------
//Liam Code
//----------------------

//remove default webflow form action and replace with our custom one
var Webflow = Webflow || [];
Webflow.push(function() {
  // unbind webflow form handling
  $(document).off('submit');

  // new form handling
  $('form').submit(function(evt) {
    evt.preventDefault();
    evt.stopPropagation(); //webflow doesnt allow passwords to be submit 
    signupAccount();
  });
});

</script>

I think you could get by with some much simpler code. I’m linking a couple threads below that might be helpful. If I understand correctly, you’ll just need to update the redirect attributes for the form based on which radio button is selected. Something along the lines of this custom code, except you’d set the redirect values based on the radio input.

I hope that helps!

Figured it out, was just a class issue :sweat_smile: