Checkbox value not being fetched in Firefox but works in chrome
-1
Am working on a drop-down menu whereby I want to fetch the value of the option the user selected on the drop-down list. It works well on Chrome using onmousedown event but does not work on Firefox,, The value gets alerted in Chrome but not on Firefox.
Please assist?
Layout
<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child" onmousedown="this.value='';" onchange="checkChild(this.value)">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>
Function being called which works well in Chrome but not Firefox
function checkChild(val) {
alert(val);
//Child One
if (val == 1){
//Add code
}
//Child Two
else if (val == 2){
//Add code 2
}
//Child Three
else if(val == 3){
//Add code 3
}
//Child Four
else if(val == 4){
//Add code 4
}
//Child Five
else if(val == 5){
//Add code 5
}
else{
//Else code
}
}
javascript firefox events onchange onmousedown
asked Nov 22 '18 at 9:30
PatwebPatweb
716
add a comment |
-1
Am working on a drop-down menu whereby I want to fetch the value of the option the user selected on the drop-down list. It works well on Chrome using onmousedown event but does not work on Firefox,, The value gets alerted in Chrome but not on Firefox.
Please assist?
Layout
<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child" onmousedown="this.value='';" onchange="checkChild(this.value)">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>
Function being called which works well in Chrome but not Firefox
function checkChild(val) {
alert(val);
//Child One
if (val == 1){
//Add code
}
//Child Two
else if (val == 2){
//Add code 2
}
//Child Three
else if(val == 3){
//Add code 3
}
//Child Four
else if(val == 4){
//Add code 4
}
//Child Five
else if(val == 5){
//Add code 5
}
else{
//Else code
}
}
javascript firefox events onchange onmousedown
asked Nov 22 '18 at 9:30
PatwebPatweb
716
What isonmousedown="this.value='';"supposed to accomplish? (it's what makes Firefox display an empty alert box)
– Chris G
Nov 22 '18 at 9:39
@ChrisG Am fetching the value of the selected option from the dropdown..
– Patweb
Nov 22 '18 at 9:44
This works in Firefox if I removeonmousedown="this.value='';". See this pen. A more maintainable solution might be to use addEventListener, like in this pen.
– Ro Achterberg
Nov 22 '18 at 9:46
For what happens insidecheckChild()Javascript has a construct calledswitch...case. Also I highly recommend droppingalertin favour ofconsole.logfor manual debugging.
– connexo
Nov 22 '18 at 9:48
@Patweb No, you're resetting the value to''. This apparently happens before the onchange handler on Firefox, and after it on Chrome, hence the difference in behavior. My point is, why have theonmousedownhandler in the first place? It does not "fetch the value" in any way, shape or form.
– Chris G
Nov 22 '18 at 10:16
add a comment |
-1
-1
-1
Am working on a drop-down menu whereby I want to fetch the value of the option the user selected on the drop-down list. It works well on Chrome using onmousedown event but does not work on Firefox,, The value gets alerted in Chrome but not on Firefox.
Please assist?
Layout
<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child" onmousedown="this.value='';" onchange="checkChild(this.value)">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>
Function being called which works well in Chrome but not Firefox
function checkChild(val) {
alert(val);
//Child One
if (val == 1){
//Add code
}
//Child Two
else if (val == 2){
//Add code 2
}
//Child Three
else if(val == 3){
//Add code 3
}
//Child Four
else if(val == 4){
//Add code 4
}
//Child Five
else if(val == 5){
//Add code 5
}
else{
//Else code
}
}
javascript firefox events onchange onmousedown
asked Nov 22 '18 at 9:30
PatwebPatweb
716
Am working on a drop-down menu whereby I want to fetch the value of the option the user selected on the drop-down list. It works well on Chrome using onmousedown event but does not work on Firefox,, The value gets alerted in Chrome but not on Firefox.
Please assist?
Layout
<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child" onmousedown="this.value='';" onchange="checkChild(this.value)">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>
Function being called which works well in Chrome but not Firefox
function checkChild(val) {
alert(val);
//Child One
if (val == 1){
//Add code
}
//Child Two
else if (val == 2){
//Add code 2
}
//Child Three
else if(val == 3){
//Add code 3
}
//Child Four
else if(val == 4){
//Add code 4
}
//Child Five
else if(val == 5){
//Add code 5
}
else{
//Else code
}
}
javascript firefox events onchange onmousedown
javascript firefox events onchange onmousedown
asked Nov 22 '18 at 9:30
PatwebPatweb
716
asked Nov 22 '18 at 9:30
PatwebPatweb
716
edited Nov 22 '18 at 9:36
Patweb
asked Nov 22 '18 at 9:30
PatwebPatweb
716
asked Nov 22 '18 at 9:30
PatwebPatweb
716
asked Nov 22 '18 at 9:30
PatwebPatweb
716
716
What isonmousedown="this.value='';"supposed to accomplish? (it's what makes Firefox display an empty alert box)
– Chris G
Nov 22 '18 at 9:39
@ChrisG Am fetching the value of the selected option from the dropdown..
– Patweb
Nov 22 '18 at 9:44
This works in Firefox if I removeonmousedown="this.value='';". See this pen. A more maintainable solution might be to use addEventListener, like in this pen.
– Ro Achterberg
Nov 22 '18 at 9:46
For what happens insidecheckChild()Javascript has a construct calledswitch...case. Also I highly recommend droppingalertin favour ofconsole.logfor manual debugging.
– connexo
Nov 22 '18 at 9:48
@Patweb No, you're resetting the value to''. This apparently happens before the onchange handler on Firefox, and after it on Chrome, hence the difference in behavior. My point is, why have theonmousedownhandler in the first place? It does not "fetch the value" in any way, shape or form.
– Chris G
Nov 22 '18 at 10:16
add a comment |
What isonmousedown="this.value='';"supposed to accomplish? (it's what makes Firefox display an empty alert box)
– Chris G
Nov 22 '18 at 9:39
@ChrisG Am fetching the value of the selected option from the dropdown..
– Patweb
Nov 22 '18 at 9:44
This works in Firefox if I removeonmousedown="this.value='';". See this pen. A more maintainable solution might be to use addEventListener, like in this pen.
– Ro Achterberg
Nov 22 '18 at 9:46
For what happens insidecheckChild()Javascript has a construct calledswitch...case. Also I highly recommend droppingalertin favour ofconsole.logfor manual debugging.
– connexo
Nov 22 '18 at 9:48
@Patweb No, you're resetting the value to''. This apparently happens before the onchange handler on Firefox, and after it on Chrome, hence the difference in behavior. My point is, why have theonmousedownhandler in the first place? It does not "fetch the value" in any way, shape or form.
– Chris G
Nov 22 '18 at 10:16
What is
onmousedown="this.value='';" supposed to accomplish? (it's what makes Firefox display an empty alert box)– Chris G
Nov 22 '18 at 9:39
What is
onmousedown="this.value='';" supposed to accomplish? (it's what makes Firefox display an empty alert box)– Chris G
Nov 22 '18 at 9:39
@ChrisG Am fetching the value of the selected option from the dropdown..
– Patweb
Nov 22 '18 at 9:44
@ChrisG Am fetching the value of the selected option from the dropdown..
– Patweb
Nov 22 '18 at 9:44
This works in Firefox if I remove
onmousedown="this.value='';". See this pen. A more maintainable solution might be to use addEventListener, like in this pen.– Ro Achterberg
Nov 22 '18 at 9:46
This works in Firefox if I remove
onmousedown="this.value='';". See this pen. A more maintainable solution might be to use addEventListener, like in this pen.– Ro Achterberg
Nov 22 '18 at 9:46
For what happens inside
checkChild() Javascript has a construct called switch...case. Also I highly recommend dropping alert in favour of console.log for manual debugging.– connexo
Nov 22 '18 at 9:48
For what happens inside
checkChild() Javascript has a construct called switch...case. Also I highly recommend dropping alert in favour of console.log for manual debugging.– connexo
Nov 22 '18 at 9:48
@Patweb No, you're resetting the value to
''. This apparently happens before the onchange handler on Firefox, and after it on Chrome, hence the difference in behavior. My point is, why have the onmousedown handler in the first place? It does not "fetch the value" in any way, shape or form.– Chris G
Nov 22 '18 at 10:16
@Patweb No, you're resetting the value to
''. This apparently happens before the onchange handler on Firefox, and after it on Chrome, hence the difference in behavior. My point is, why have the onmousedown handler in the first place? It does not "fetch the value" in any way, shape or form.– Chris G
Nov 22 '18 at 10:16
add a comment |
1 Answer
1
active
oldest
votes
0
I would recommend not writing inline javascript. Instead add eventListener to your select:
var mySelect = document.getElementById('child');
mySelect.addEventListener('change', function(e) {
if (this.value == 1) {
console.log('val is 1');
} else if (this.value == 2) {
console.log('val is 2');
} else if (this.value == 3) {
console.log('val is 3');
} else if (this.value == 4) {
console.log('val is 4');
} else if (this.value == 5) {
console.log('val is 5');
} else {
console.log('val not specified');
}
});<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>answered Nov 22 '18 at 9:47
Roland RuulRoland Ruul
827514
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
});
}
});
draft saved
draft discarded
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%2f53427716%2fcheckbox-value-not-being-fetched-in-firefox-but-works-in-chrome%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
0
I would recommend not writing inline javascript. Instead add eventListener to your select:
var mySelect = document.getElementById('child');
mySelect.addEventListener('change', function(e) {
if (this.value == 1) {
console.log('val is 1');
} else if (this.value == 2) {
console.log('val is 2');
} else if (this.value == 3) {
console.log('val is 3');
} else if (this.value == 4) {
console.log('val is 4');
} else if (this.value == 5) {
console.log('val is 5');
} else {
console.log('val not specified');
}
});<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>answered Nov 22 '18 at 9:47
Roland RuulRoland Ruul
827514
add a comment |
0
I would recommend not writing inline javascript. Instead add eventListener to your select:
var mySelect = document.getElementById('child');
mySelect.addEventListener('change', function(e) {
if (this.value == 1) {
console.log('val is 1');
} else if (this.value == 2) {
console.log('val is 2');
} else if (this.value == 3) {
console.log('val is 3');
} else if (this.value == 4) {
console.log('val is 4');
} else if (this.value == 5) {
console.log('val is 5');
} else {
console.log('val not specified');
}
});<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>answered Nov 22 '18 at 9:47
Roland RuulRoland Ruul
827514
add a comment |
0
0
0
I would recommend not writing inline javascript. Instead add eventListener to your select:
var mySelect = document.getElementById('child');
mySelect.addEventListener('change', function(e) {
if (this.value == 1) {
console.log('val is 1');
} else if (this.value == 2) {
console.log('val is 2');
} else if (this.value == 3) {
console.log('val is 3');
} else if (this.value == 4) {
console.log('val is 4');
} else if (this.value == 5) {
console.log('val is 5');
} else {
console.log('val not specified');
}
});<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>answered Nov 22 '18 at 9:47
Roland RuulRoland Ruul
827514
I would recommend not writing inline javascript. Instead add eventListener to your select:
var mySelect = document.getElementById('child');
mySelect.addEventListener('change', function(e) {
if (this.value == 1) {
console.log('val is 1');
} else if (this.value == 2) {
console.log('val is 2');
} else if (this.value == 3) {
console.log('val is 3');
} else if (this.value == 4) {
console.log('val is 4');
} else if (this.value == 5) {
console.log('val is 5');
} else {
console.log('val not specified');
}
});<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>var mySelect = document.getElementById('child');
mySelect.addEventListener('change', function(e) {
if (this.value == 1) {
console.log('val is 1');
} else if (this.value == 2) {
console.log('val is 2');
} else if (this.value == 3) {
console.log('val is 3');
} else if (this.value == 4) {
console.log('val is 4');
} else if (this.value == 5) {
console.log('val is 5');
} else {
console.log('val not specified');
}
});<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>var mySelect = document.getElementById('child');
mySelect.addEventListener('change', function(e) {
if (this.value == 1) {
console.log('val is 1');
} else if (this.value == 2) {
console.log('val is 2');
} else if (this.value == 3) {
console.log('val is 3');
} else if (this.value == 4) {
console.log('val is 4');
} else if (this.value == 5) {
console.log('val is 5');
} else {
console.log('val not specified');
}
});<div class="check-now" style="width: 100%;">
<h1 class="cover-travel">Child(ren)</h1>
<select name="child" id="child">
<option value="0">None</option>
<option value="1">1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</div>answered Nov 22 '18 at 9:47
Roland RuulRoland Ruul
827514
edited Nov 22 '18 at 10:34
answered Nov 22 '18 at 9:47
Roland RuulRoland Ruul
827514
answered Nov 22 '18 at 9:47
Roland RuulRoland Ruul
827514
answered Nov 22 '18 at 9:47
Roland RuulRoland Ruul
827514
827514
add a comment |
add a comment |
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
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%2f53427716%2fcheckbox-value-not-being-fetched-in-firefox-but-works-in-chrome%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
What is
onmousedown="this.value='';"supposed to accomplish? (it's what makes Firefox display an empty alert box)– Chris G
Nov 22 '18 at 9:39
@ChrisG Am fetching the value of the selected option from the dropdown..
– Patweb
Nov 22 '18 at 9:44
This works in Firefox if I remove
onmousedown="this.value='';". See this pen. A more maintainable solution might be to use addEventListener, like in this pen.– Ro Achterberg
Nov 22 '18 at 9:46
For what happens inside
checkChild()Javascript has a construct calledswitch...case. Also I highly recommend droppingalertin favour ofconsole.logfor manual debugging.– connexo
Nov 22 '18 at 9:48
@Patweb No, you're resetting the value to
''. This apparently happens before the onchange handler on Firefox, and after it on Chrome, hence the difference in behavior. My point is, why have theonmousedownhandler in the first place? It does not "fetch the value" in any way, shape or form.– Chris G
Nov 22 '18 at 10:16