Url not opening when Submit button is clicked based on box selected





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















I'm trying to get the submit button to open a specific url based on the box that is selected. I'm currently not getting either an alert or a new window with the url. I used some jQuery to toggle a class to show that the box is selected and put that in a function, then I created an if else statement inside of another function that I called inside of the tag for the submit button.
Here is the code






             $(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>












share|improve this question

























  • see error in F12(dev tool) -->console

    – לבני מלכה
    Nov 25 '18 at 7:11


















0















I'm trying to get the submit button to open a specific url based on the box that is selected. I'm currently not getting either an alert or a new window with the url. I used some jQuery to toggle a class to show that the box is selected and put that in a function, then I created an if else statement inside of another function that I called inside of the tag for the submit button.
Here is the code






             $(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>












share|improve this question

























  • see error in F12(dev tool) -->console

    – לבני מלכה
    Nov 25 '18 at 7:11














0












0








0








I'm trying to get the submit button to open a specific url based on the box that is selected. I'm currently not getting either an alert or a new window with the url. I used some jQuery to toggle a class to show that the box is selected and put that in a function, then I created an if else statement inside of another function that I called inside of the tag for the submit button.
Here is the code






             $(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>












share|improve this question
















I'm trying to get the submit button to open a specific url based on the box that is selected. I'm currently not getting either an alert or a new window with the url. I used some jQuery to toggle a class to show that the box is selected and put that in a function, then I created an if else statement inside of another function that I called inside of the tag for the submit button.
Here is the code






             $(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>








             $(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>





             $(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>






javascript jquery html css if-statement






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 25 '18 at 7:09









לבני מלכה

11.2k1928




11.2k1928










asked Nov 25 '18 at 6:54









nyc.devnyc.dev

53




53













  • see error in F12(dev tool) -->console

    – לבני מלכה
    Nov 25 '18 at 7:11



















  • see error in F12(dev tool) -->console

    – לבני מלכה
    Nov 25 '18 at 7:11

















see error in F12(dev tool) -->console

– לבני מלכה
Nov 25 '18 at 7:11





see error in F12(dev tool) -->console

– לבני מלכה
Nov 25 '18 at 7:11












1 Answer
1






active

oldest

votes


















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>





See if this helps.






share|improve this answer
























  • thanks it worked!!

    – nyc.dev
    Nov 25 '18 at 16:10












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53465334%2furl-not-opening-when-submit-button-is-clicked-based-on-box-selected%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









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>





See if this helps.






share|improve this answer
























  • thanks it worked!!

    – nyc.dev
    Nov 25 '18 at 16:10
















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>





See if this helps.






share|improve this answer
























  • thanks it worked!!

    – nyc.dev
    Nov 25 '18 at 16:10














1












1








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>





See if this helps.






share|improve this answer
















$(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>





See if this helps.






$(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>





$(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>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 25 '18 at 8:18









AbhishekAbhishek

25414




25414













  • thanks it worked!!

    – nyc.dev
    Nov 25 '18 at 16:10



















  • thanks it worked!!

    – nyc.dev
    Nov 25 '18 at 16:10

















thanks it worked!!

– nyc.dev
Nov 25 '18 at 16:10





thanks it worked!!

– nyc.dev
Nov 25 '18 at 16:10




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53465334%2furl-not-opening-when-submit-button-is-clicked-based-on-box-selected%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

Xamarin.form Move up view when keyboard appear

Post-Redirect-Get with Spring WebFlux and Thymeleaf

Anylogic : not able to use stopDelay()