Need some help with this. I have a drop down list which is part of form but i need only one select to be a link using something that will active once clicked. Not sure is window.open is the correct thing to use.
Here is the code i'm using but at present all select are links and i only need 'other' to be it.
<select name="model" onchange="window.open(this.value, '_blank')">
<option value="" selected>Please select</option>
<option value="A">Apple</option>
<option value="B">Boom</option>
<option value="C">chin</option>
<option value="http://to be a link ">Other..</option>
</select>
Is this possible to do?
You can try something like this. If the value is an URL you can open a new window.
<select name="model" onchange="this.value.includes('http') && window.open(this.value, '_blank')">
<option value="" selected>Please select</option>
<option value="A">Apple</option>
<option value="B">Boom</option>
<option value="C">chin</option>
<option value="http://to be a link ">Other..</option>
</select>
You can try this
I do not recommend using inline event handlers
NOTE: The script will not actually run here from a stacksnippet due to sandboxing
document.querySelector("[name=model]").addEventListener("change", function() {
const val = this.value;
if (val.startsWith("http")) {
console.log("This will open",val)
window.open(val, "_blank")
}
})
<select name="model">
<option value="" selected>Please select</option>
<option value="A">Apple</option>
<option value="B">Boom</option>
<option value="C">chin</option>
<option value="https://to be a link ">Other..</option>
</select>
Related
I have two selection boxes, the default value is - and i want to pick something else for both, my first problem is both fields have dynamic id like prod-685209-Size so i'm having trouble accessing with id.
I have the following HTML:
<select class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
So i executed the following:
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
It worked on the front side, showing my new options but it didn't prompt the backend as it is not actually selecting the options. Backend works fine when i click to these options by hand, basically i need another solution to choose these options.
If I don't misunderstood your requirement then you need something like this. Just add two different ids to your select element and attach a change event listener. For example size and color
var s = document.getElementById("size");
var c = document.getElementById("color");
function getSize() {
sizeSelected = s.value;
console.log('size=' + sizeSelected);
}
function getColor() {
colorSelected = c.value;
console.log('color=' + colorSelected);
}
s.addEventListener('change', getSize);
c.addEventListener('change', getColor);
<select id="size" class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select id="color" class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
You need to add .validate() after your dom commands to actually prompt the page.
when I choose from a select menu in mobile it doesn't do any thing (run validation or send data to server) till I choose the same option again it happen only in mobile ?
$("#major").click(function(){
check_major();
});
<select name="section[]" class="custom-select" id="major" >
<option selected>Choose...</option>
<option value="1">Electrical</option>
<option value="2">Mechanical</option>
<option value="3">Civil</option>
<option value="4">Archticture</option>
</select>
is the problem in event (click)
I tried blur - onchange - on(touch,function()
First, you need to call your script after the DOM content is loaded, by calling the script at the end of th DOM, or, wrap it in a $(document).ready function.
then, for catching the select change you need to use the change event
var check_major = function( e ) {
console.log( $(this).val() )
}
$("#major").on("change", check_major);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section[]" class="custom-select" id="major" >
<option selected>Choose...</option>
<option value="1">Electrical</option>
<option value="2">Mechanical</option>
<option value="3">Civil</option>
<option value="4">Archticture</option>
</select>
$('#major').on('change',function(){
console.log($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section[]" class="custom-select" id="major" >
<option selected>Choose...</option>
<option value="1">Electrical</option>
<option value="2">Mechanical</option>
<option value="3">Civil</option>
<option value="4">Archticture</option>
</select>
I have 2 drop down list
<select id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
I want that the second drop down list should get enabled only if we choose a value in the first drop down list. It should again get disabled if we deselect the value from the first drop down list.
May I know how can this be achieved using jQuery?
You can use the disabled attribute and using JavaScript, you can set it as false or true
function check(){
if(document.getElementById('servergroup').value!='')
document.getElementById('servername').disabled=false;
else
document.getElementById('servername').disabled=true;
}
<select onchange="check()" id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select disabled id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
$('#bonusVoucher').prop('disabled',false);
jQuery('#bonusVoucher').selectpicker('refresh');
Use selectpicker like this and the most IMPORTANT part is this:
Note: Place your bootsrap selectpicker script after jquery script.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
jQuery solution.
function change() {
if ($('#servergroup option:selected').length) {
$('#servername').attr('disabled', false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="servergroup" multiple="multiple" onchange='change()'>
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple" disabled>
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
First add
<option value="-1"> -Select Server Group- </option>
and
<option value="-1"> -Select Server Name- </option>
to Your Dropdown boxes respectively.
We can achieve requested actions using JQuery as Follows:
$(document).ready(function ()
{
//making serverName Dropdown box disabled by default.
$('#servername').prop('disabled', true);
$('#servergroup').change(function ()
{
if($(this).val == "-1")
{
$('#servername').val = "-1";
$('#servername').prop('disabled', true);
}
else
{
$('#servername').prop('disabled', false);
}
});
});
I have the following select drop down box:
<select name="selectcourier" required>
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
What I want to do is if Interlink is selected a secondary select box appears below it and disappears if it unselected and another option is chosen instead. This is the second select drop down box.
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
How can I go about getting this working?
bind an event with javascript on change and insert a new element in the DOM (the second select statement) like:
(provided you have jquery)
var secondSelect="your_html_here";
$("name='selectcourier'").change(function() {
if (this.val()=='Interlink') {
$('body').append(secondSelect); }
else {
$('#secondselectid').remove();
});
customise the html and where you want to append the second select
<script>
$(function(){
$('#s1').hide();
});
function call()
{
var check=$('#s2').val();
if(check=="Interlink")
{
$('#s1').show();
}
else
{
$('#s1').hide();
}
}
</script>
<select name="selectcourier" required onchange="call();" id="s2" >
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<label>Select Shipping Courier:</label>
<select name="selectcourier" required id="s1">
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
You can use the above code to achieve your task
Just react on the event of changing the value of the first select.
If the value equals 'Interlink' display the second select - if the value is something else hide the second select.
<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')">
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<div id="interlink_addition" style="display:none">
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
</div>
you can use ajax for this. write a ajax function to show second select box and call it on onChange event of the first select Box
i have a form like so:
<form>
<select onchange="this.form.submit()">
<option>Today</option>
<option>Last Week</option>
<option>Last Month</option>
<option>Lifetime</option>
</select>
</form>
I need to do some basic filtering of results and the aim is that when a user changes the drop down the user is sent to page/?date=THEIROPTION
I a using the javascript on change so i dont have to have a button.
Any help?
P.S i have tried having the option value as the URL but no luck.
This works.
ONCHANGE="location = this.options[this.selectedIndex].value;"
This too.
<form name="filter_form">
<select name="filter" onchange="document.forms.filter_form.submit();">
<option value=""></option>
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
</select>
</form>
You may try something like this
HTML:
<select onchange="loadPage(this.value)">
<option value="page?date=today">Today</option>
<option value="page?date=last_week">Last Week</option>
</select>
JS:
function loadPage(url)
{
location.href = url;
}