URL не открывается при нажатии кнопки «Отправить» в зависимости от выбранного поля

Question

Я пытаюсь получить кнопку отправки, чтобы открыть конкретный URL-адрес в зависимости от выбранного поля.В настоящее время я не получаю ни предупреждение, ни новое окно с URL.Я использовал jQuery для переключения класса, чтобы показать, что поле выбрано, и поместил его в функцию, затем я создал оператор if else внутри другой функции, которую я вызвал внутри тега для кнопки отправки.Вот код

             $(document).ready(function() {
                 function buttonClicked() {
                  $(".blue").click(function(){
                $(this).toggleClass("red");
                 });
              }
                 return buttonClicked();
             });



            $(document).ready(function() {
                 function greenButtonClicked() {
                  $(".green").click(function(){
                $(this).toggleClass("red2");
                 });
              }
                 return greenButtonClicked();
             });


             function returnUrl() {
                 var greenButton = greenButtonClicked();
                var blueButton = buttonClicked();

              if( greenButton == true) {
                    window.open("https://www.google.com");
                    alert("button clicked!!")
              } else {
                    window.open("https://www.gmail.com");
                    alert("other clicked!!")
              }
             }

            .blue {
                width: 200px;
                height: 100px;
                background-color: blue;
                color: white;
                padding: 25px;
                box-sizing: border-box;
                cursor: pointer;
                transition: all .25s ease-in-out;
            }

            .green {
                width: 200px;
                height: 100px;
                background-color: green;
                color: white;
                padding: 25px;
                box-sizing: border-box;
                cursor: pointer;
                transition: all .25s ease-in-out;
            }

            .red {
                background-color: blue;
                border: 2px solid red;
            }

            .red2 {
                background-color: green;
                border: 2px solid red;
            }

<div class="blue">
 This is a clickable box
</div>
<div class="green">
  This is a clickable box
</div>
<input type="submit" value="Submit" onclick="returnUrl()">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

$(document).ready(function() {
                  $(".blue").click(function(){
                  greenButtonClicked = false;
                $(this).toggleClass("red");
                 });
                  $(".green").click(function(){
                  greenButtonClicked = true;
                $(this).toggleClass("red2");
                 });
});
var greenButtonClicked = false;
function returnUrl() {
              if( greenButtonClicked == true) {
                    window.open("https://www.google.com");
                    alert("button clicked!!")
              } else {
                    window.open("https://www.gmail.com");
                    alert("other clicked!!")
              }
             }

.blue {
                width: 200px;
                height: 100px;
                background-color: blue;
                color: white;
                padding: 25px;
                box-sizing: border-box;
                cursor: pointer;
                transition: all .25s ease-in-out;
            }

            .green {
                width: 200px;
                height: 100px;
                background-color: green;
                color: white;
                padding: 25px;
                box-sizing: border-box;
                cursor: pointer;
                transition: all .25s ease-in-out;
            }

            .red {
                background-color: blue;
                border: 2px solid red;
            }

            .red2 {
                background-color: green;
                border: 2px solid red;
            }

<div class="blue">
 This is a clickable box
</div>
<div class="green">
  This is a clickable box
</div>
<input type="submit" value="Submit" onclick="returnUrl()">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Проверьте, поможет ли это.