Javascript Redirect Based On Radio Selection – CPanel

Okay, so this works and while it’s a bit of overkill, it’s very thorough overkill that you can use for any future radio button forms, even ones with dozens of options:

      <div class="col-12" style="margin-top">
        <label><strong>What Is Your Business Currently Generating?</strong></label>
        <div class="d-flex m-t--20">
            <div class="p--relative check">
                <input type="radio" id="o5kradio" name="income" value="o5k" checked required/>
                <label for="diy">Over $5k Per Month</label>
            </div>
            <div class="p--relative check">
                <input type="radio" id="u5kradio" name="income" value="u5k" required/>
                <label for="hands-on">Under $5k Per Month</label>
            </div>
        </div>
    </div>

  <script>
    // No need for declaring global variables here
    function submit(source,options){
    // First, this segment finds the checked element in the array:
      for (var i = 0; i < options.length; i++){
        if (options[i].checked){
          break;
        }
      }
    // Next, the source switch determines which button element called the function:
    switch(source.id){  
   case 'submitButton':
    // The options switch then determines what happens when the checked option is submitted:
      switch(options[i].id){
        case 'o5kradio':
          alert('over5k');
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now/";
          break;
        case 'u5kradio':
          alert('under5k');
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now-2/";
          break;
          //  The default option for the options switch
        default:
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now/";
          }
        break;
        // The default option for the source switch
        default:
       }
    }
</script>

    <!--ERROR/SUCCESS MESSAGE-->
    <div class="message js-message"></div>
    <button type="submit" value="submit" id="submitButton" onclick="submit(this,options=[o5kradio,u5kradio])" class="btn txt--shadow-smaller">Click TO SUBMIT APPLICATION</button>
</form>

So to clarify, here’s what I’m doing…

For starters, I prefer “onclick” functions in buttons because it gives more freedom. I created a function called “submit” and it passes two values from the HTML: 1. “this”, which will be its own Id so the function can identify the source and 2. an array called “options” which contains the Ids of all of the radio buttons it will need to evaluate to find the checked one:

<button type="submit" value="submit" id="submitButton" onclick="submit(this,options=[o5kradio,u5kradio])" class="btn txt--shadow-smaller">Click TO SUBMIT APPLICATION</button>

Next, the first part of the function finds the checked radio button by cycling through the array. Since there can only ever be one checked button, this is easy to do:

function submit(source,options){
  for (var i = 0; i < options.length; i++){
    if (options[i].checked){
      break;
    }
  } ...etc.

Next, I used a nested switch to decide how to handle the results. Note that adding “.id” after “source” and “options” bypasses the need to use “getElementById”:

 // The source switch  
    switch(source.id){  
   case 'submitButton':
      // The options switch, currently the first "case" of the source switch, but you can add as many cases as needed
      switch(options[i].id){
        case 'o5kradio':
          alert('over5k');
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now/";
          break;
        case 'u5kradio':
          alert('under5k');
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now-2/";
          break;
          //  The default option for the options switch
        default:
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now/";
          }
        break;
        // The default option for the source switch
        default:
       }

Once again, this is overkill, and I wouldn’t be surprised if I’ve made at least one faux pas here, but the beauty of this setup is that every radio button form you have can utilize the same function, and you can have as many options as you want.

All you need to do is add another “case” to the “source.id” switch for each time a user will click the “submit” button (on additional pages, I assume) and you can control however many pages, redirections, and options you may have with one function. This means each click will only ever make three calculations (for statement, source switch, and option switch) so as to avoid multiple “else if” statements in a row for more than two radio buttons.

PS. The Id for “submitButton” starts with a capital “S”, though fixing that didn’t get it to work for me.