How to add onload to an onchange function - javascript

Thank you in advance or any help you can offer. I am building a menu with selection and options. After a chapter is selected, it will display the page options available. However, I would like it to default to showing the chapter one pages when the website first loads, instead of showing nothing. I can't seem to figure this one out. The code I have is as follows:
<script>
window.onload = function() {
document.getElementById("Chapter").onload = function () {
if (this[this.selectedIndex].value === "1") {
document.getElementById("c1").className = "show";
}
};
</script>
<script>
document.getElementById("Chapter").onchange = function () {
if (this[this.selectedIndex].value === "1") {
document.getElementById("c1").className = "show";
} else {
document.getElementById("c1").className = "";
}
if (this[this.selectedIndex].value === "2") {
document.getElementById("c2").className = "show";
} else {
document.getElementById("c2").className = "";
}
};
</script>
The onload code currently does nothing, but the onchange works as anticipated.
Thank you so much for your time.
Edit:
The HTML example is as follows:
<div class="jump-options text-center">
QUICK JUMP: CHAPTER
<select id="Chapter">
<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>
<option value="6">6</option>
<option value="7">7</option>
</select> PAGE
<select id="c1" name="Page">
<option value="1p0">0</option>
<option value="1p1">1</option>
<option value="1p2">2</option>
<option value="1p3">3</option>
<option value="1p4">4</option>
<option value="1p5">5</option>
</select>
<select id="c2" name="Page">
<option value="2p0">0</option>
<option value="2p1">1</option>
<option value="2p2">2</option>
<option value="2p3">3</option>
<option value="2p4">4</option>
<option value="2p5">5</option>
</select>
</div>

Most DOM elements don't have onload events. This event only fires on elements that need to get their contents from external sources, like images and iframes.
You don't want to assign an onload handler, what you want to do is trigger the change event on #Chapter.
window.onload = function() {
document.getElementById("Chapter").dispatchEvent(new Event("change"));
}

Related

Select option change URL

I have a select form element with values from 1-7+. If the user selects "7+" I want the URL to go to emailForm.php. How can I get this to work? The other options will be captured when the user click a submit button.
<select id="replyNumber">
<option selected="true" disabled="disabled" value="">No of people</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7+" onchange="document.location.href=emailForm.php">7+</option>
</select>
You cannot add onchange to option but need to add it to select tag.
You can add on a function changePage and you can check value and then implement the page change like below
<script>
function changePage() {
var val = document.getElementById("replyNumber").value;
if (val == "7+") {
document.location.href='emailForm.php'
}
}
</script>
<select id="replyNumber" onchange="changePage()">
<option selected="true" disabled="disabled" value="">No of people</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7+">7+</option>
</select>
You can solve this in JavaScript.
First add an onchange=testFunction(this) attribute to your select tag.
Then create and define a function in your JavaScript like follows:
function testFunction(el) {
if (el.value === '7+') {
// change the webpage you're currently on
document.location.href = 'emailForm.php';
// change the url your form posts to
document.form-name.action = 'emailForm.php';
}
}
Whenever a user changes your select box it'll call this function, you can then choose what values to check for, what to do when certain values are selected without submitting the form itself.

check required field in Javascript on different button

i am not too good with java Script but trying to learn few things in different ways and this community always help me to learn such stuff.
i need some help from you guys again. below is my code and what i want is.
i have different dropdowns on a single page, with different buttons to run different queries in php. but i want to make sure that drop should have some selected value before proceeding to php query on button click. i am not able to perform this task, below is the sample which is definitely wrong. i want on button click "fun" Myfunction should run which should check that proper value is selected from drop down s1 and here s2 value is not required. and same is with 2nd button vice verse. kindly help and any idea would be appreciated.
function myFunction() {
document.getElementById("s1").value = "required"
}
function myFunction1() {
document.getElementById("s2").value = "required"
}
dd1:
<select id="s1">
<option>Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<br>dd2:
<select id="s2">
<option>Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br>
<br>
<button onclick="myFunction()">fun</button>
<button onclick="myFunction1()">fun1</button>
You have to check value of document.getElementById("s1").selectedIndex and ...(s2) as following:
function myFunction() {
var s1 = document.getElementById("s1").selectedIndex;
var s2 = document.getElementById("s2").selectedIndex;
if (s1<1 && s2<1) {
alert("Please select atleast one item from dropdowns!");
return false;
};
}
<html>
<body>
dd1:<select id="s1">
<option >Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br> <br>
dd2:<select id="s2">
<option >Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br><br>
<button onclick="myFunction()">fun</button>
<button onclick="myFunction()">fun1</button>
</body>
</html>
Using jQuery will do the trick. You just need to check the value of your select component. To achieve this, you should first add a value for when nothing is selected:
dd1:<select id="s1">
<option value="0">Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br> <br>
dd2:<select id="s2">
<option value="0">Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br><br>
Now, when nothing is selected, the value of your component will be 0. To check this values, you have to do something like this:
function myFunction() {
var selectedValue1 = $('#s1').val();
var selectedValue2 = $('#s2').val();
// check both values and do whatever
}
function myFunction1() {
var selectedValue1 = $('#s1').val();
var selectedValue2 = $('#s2').val();
// check both values and do whatever
}
Using vanilla
If you don't want to use jQuery for whatever the reason, you just have to change var selectedValue1 = $('#s1').val(); for var selectedValue1 = document.getElementById('s1').value;.
I hope this helps :)

How to make 2 JavaScript function's execution mutually exclusive?

I have two select elements with several options, I chain them together so that each updates automatically when the other one changes.
// ########### Linked Labour Select Boxes
$('body').on('change', '#labourList > li .labourerID', function() {
var id = $(this).val();
$(this).parent().find('.labourerName').val(id).change();
});
$('body').on('change', '#labourList > li .labourerName', function() {
var id = $(this).val();
$(this).parent().find('.labourerID').val(id).change();
});
At the moment one method will trigger the other one making my page a bit slow, how can i avoid that?
I have used a flag to communicate that the change that occurred on the select is because of user of the script.
Check this.
When the user changes one select nothing is executed in second select so the change chain is broken.
var script_triggred_change = false;
$("#one").change(function() {
console.log("Called One");
if (script_triggred_change) return;
script_triggred_change = true;
$("#two").val($("#one").val()).change();
script_triggred_change = false;
});
$("#two").change(function() {
console.log("Called Two");
if (script_triggred_change) return;
script_triggred_change = true;
$("#one").val($("#two").val()).change();
script_triggred_change = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Try this
var once = false;
$('select').on('change', function(e) {
if(once) {
once = false;
return;
}
once = true;
$('select').not(this).val($(this).val()).change();
});
select, option {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select class="lab-ids">
<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>
<select class="lab-name">
<option value="1">Peter</option>
<option value="2">Hans</option>
<option value="3">Fritz</option>
<option value="4">Sandra</option>
<option value="5">Jessy</option>
</select>
</div>

jQuery select option last doesn't work

I've got a button and list of options. The idea is that when user clicks the button the default option changes from disabled to max value. And oposite - if the input is not checked, the default is again disabled.
But the value returns undefined. If I change the first and thelast to numeric values, everything works fine. What's wrong?
<input class="input" type="checkbox" value="1" name="select-pot[]">
<select id="select" name="q-count[]">
<option disabled selected> -- choose -- </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>
<option value="6">6</option>
</select>
jQuery(function(){
jQuery(".input").click(function(){
var thefirst = jQuery(this).next('#select option:first').val();
var thelast = jQuery(this).next('#select option:last').val();
if( jQuery(this).is(':checked') )
jQuery(this).next('#select').val(thelast);
else
jQuery(this).next('#select').val(thefirst);
});
});
.next() gets the next sibling, so you need to get the select and use .find() or .children() afterwards:
var thefirst = jQuery(this).next('#select').find('option:first').val();
var thelast = jQuery(this).next('#select').find('option:last').val();
Since IDs must be unique, there's no point in doing something like:
jQuery(this).next('#select option:first')
when
jQuery('#select option:first')
would suffice, plus .next() would fail here since it evaluates the siblings of an element and filters on anything you pass, but your filter is what would cause it to not match anything.
Instead, use:
jQuery(".input").click(function () {
var thefirst = jQuery('#select option:first').val();
var thelast = jQuery('#select option:last').val();
if (jQuery(this).is(':checked')) jQuery('#select').val(thelast);
else jQuery('#select').val(thefirst);
});
jsFiddle example
The vanilla javascript alternative for future viewers
(function () {
"use strict";
var inputs = document.getElementsByClassName('input'), input;
for (var i = 0; input = inputs[i]; i++) {
input.addEventListener('click', function (e) {
e.target.nextElementSibling.lastElementChild.selected = e.target.checked;
e.target.nextElementSibling.firstElementChild.selected = !e.target.checked;
}, false);
}
})();
<input class="input" type="checkbox" value="1" name="select-pot[]">
<select id="select" name="q-count[]">
<option disabled selected>-- choose --</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>
<option value="6">6</option>
</select>

Shopify Drop down Validation

I'm building a web store on shopify. I want to add a validation to dropdown that if no size/value is selected from drop down, it automatically select 1st size/value. when we click on add to cart button.
Thanks for the help.
Given this HTML:
<select id="drop">
<option value="0">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button id="add">Add to cart</button>
Use this javascript/jQuery:
$(document).ready(function() {
var $drop = $("#drop");
$("#add").on("click", function() {
if($drop.val() == 0) {
$drop.val(1);
}
});
});
http://jsfiddle.net/82vrccem/1/
Here I have mention a drop-down list and after that the JavaScript validation also given.
<select id="dropdown">
<option value="0">Select</option>
<option value="1">Option One</option>
<option value="2">Option Two</option>
<option value="3">Option Three</option>
</select>
Use the flowing JavaScript validation for upper drop-down list.
function Validate()
{
var e = document.getElementById("dropdown");
var strUser = e.options[e.selectedIndex].value;
//if you need text to be compared then use
var strUser1 = e.options[e.selectedIndex].text;
if(strUser==0) //for text use if(strUser1=="Select")
{
alert("Please select a user");
}
}

Categories