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;
}
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>
javascript jquery html css if-statement
add a comment |
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>
javascript jquery html css if-statement
see error in F12(dev tool) -->console
– לבני מלכה
Nov 25 '18 at 7:11
add a comment |
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>
javascript jquery html css if-statement
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
javascript jquery html css if-statement
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
$(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.
thanks it worked!!
– nyc.dev
Nov 25 '18 at 16:10
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
$(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.
thanks it worked!!
– nyc.dev
Nov 25 '18 at 16:10
add a comment |
$(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.
thanks it worked!!
– nyc.dev
Nov 25 '18 at 16:10
add a comment |
$(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>
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>
answered Nov 25 '18 at 8:18
AbhishekAbhishek
25414
25414
thanks it worked!!
– nyc.dev
Nov 25 '18 at 16:10
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
see error in F12(dev tool) -->console
– לבני מלכה
Nov 25 '18 at 7:11