Hi Ladies and Gentlemen,
Where I work is currently transitioning to a site using Drupal 7. We are trying to get a temporary site up and running until our new site is finished. I am a complete newbie to Drupal, but managing ok. Anyway I have a page that has an onchange select box which is supposed to open a PDF file. I am unclear how to make the onchange function work. I have looked on several pages but everything is a little confusing. Here is the code I need to change :
<form name="cataloglinks" action="">
<p class="style2">
<span class="style3">
Other editions of the online DACC catalog are also available:
<select name="cataloglinks-list" size="1" id="cataloglinks-list onchange="goPage(this.options[this.selectedIndex].value)">"
<option value="." selected="selected">Select an edition</option>
<option value="catalog/catalog08-09.pdf">Catalog for 2008-2009</option>
<option value="catalog/catalog09-10.pdf">Catalog for 2009-2010</option>
<option value="catalog/catalog10-11.pdf">Catalog for 2010-2011</option>
<option value="catalog/catalog11-12.pdf">Catalog for 2011-2012</option>
<option value="catalog/catalog12-13.pdf">Catalog for 2012-2013</option>
<option value="catalog/catalog13-14.pdf">Catalog for 2013-2014</option>
Your issue has nothing to do with Drupal, it might be a HTML tags issue or missing goPage() javascript function.
Try to implement the following code:
<script type="text/javascript">
function goPage(path) {
if(path != '') {
window.location = [location.protocol, '//', location.host, '/'].join('') + path;
}
}
</script>
<select name="cataloglinks-list" size="1" id="cataloglinks-list" onchange="goPage(this.options[this.selectedIndex].value);">
<option value="" selected="selected">Select an edition</option>
<option value="catalog/catalog08-09.pdf">Catalog for 2008-2009</option>
<option value="catalog/catalog09-10.pdf">Catalog for 2009-2010</option>
<option value="catalog/catalog10-11.pdf">Catalog for 2010-2011</option>
<option value="catalog/catalog11-12.pdf">Catalog for 2011-2012</option>
<option value="catalog/catalog12-13.pdf">Catalog for 2012-2013</option>
<option value="catalog/catalog13-14.pdf">Catalog for 2013-2014</option>
</select>
Note: I assumed that catalog folder is in the root directory of your site.
Related
I have a drop-down list which POSTs to express and then redirects to same page.
Now, I want the one valid option to be selected before submitting, hence I added required property in <select> tag.
But, I also want a value to be Selected in the list when page renders
If first time render, then first option
If after submitting, the submitted option to be selected by default
Here is the skeleton code
<select required data-style="btn-info" name="selectpicker">
<optgroup label="Select Map">
<option name="table1" value="Station">Station</option>
<option name="table2" value="Station2">Station2</option>
</optgroup>
</select>
and the things I tried
<option value="" selected disabled>Select station</option>
<option name="table1" value="Station" selected>Station</option>
but none of them fulfills my requirements.
if you are using javascript for handling the form just add event.preventDefault() in your onsubmit function so when you submit it won't revert back to default
The problems were solved by
<form action="any" method="any" onSubmit="return fieldCheck();">
<select required id="collec" data-style="btn-info" name="selectpicker">
<option value="Select Station" selected disabled hidden>Select City</option>
<option name="table1" value="Vice City">Vice City</option>
<option name="table2" value="Delhi City">Delhi City</option>
and script
function fieldCheck() {
var collec = document.querySelector('#collec');
if(collec.value != "Select Station") {
return true;
}
else {
alert("Select a city first!!");
return false;
}
}
I have a html list which i want to dynamicly enable or disabled based on input. Usually at the end of the select you just use enabled or disabled to disable or enable the whole html list. But im not sure how to use function to do this.
<select size="5" name="name" onChange="rolevalue" enabler()>
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</p>
</select>
Here is my function
Function enabler()
if ListboxCustomer.value = 1 Then
document.write "enabled"
else
document.write "disabled"
end if
End Function
I know ListboxCustomer.value is set to 1 but the function isnt used. I know in C# i need to return my function for it to do anything, but ive read many examples of functions in vbscript and they dont use that. Any help? :)
If your doing this in a HTA use the following
<select size="5" name="name" onchange="enabler()">
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Then define your event handler
Sub enabler()
Set List = window.event.srcElement
List.Enabled = Not (List.Value = 1)
End Sub
For context this is purely a solution for the OPs specific requirement. I wouldn't recommend this approach normally. It's worth remember you can still use JavaScript in a HTA Application, but the OP specifically asked about using VBScript.
Question
i want to make my select tag like google's one
this is mine
This is my code
`<script >
function format(state) {
if (!state.id) return state.text;
return "<img class='flag' src='Photos/" + state.id.toLowerCase() + ".jpg'/>" + $(originalOption).data('foo') + "' />" + state.text;
}
</script>
<select id="mobilephone">
<option value="indo" ><img src="Photos/indo.jpg" id="captchaimg">Indonesia</option>
<option style="background-image:url(Photos/rico.png);">Rico</option>
<option style="background-image:url(Photos/SA.png);">South Africa</option>
<option style="background-image:url(Photos/UK.jpg);">United Kingdom</option>
</select>`
I want to make it like image below
If you are using jQueryUI, then this may work : http://jqueryui.com/selectmenu/#custom_render
This seems quite neat : http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx
You cannot do this directly using the <select> tag since that is a form element, but you can implement this using <div> or other methods.
A work-around to this could be :
<select>
<option style="background-image:url(something.png);">male</option>
<option style="background-image:url(something.png);">female</option>
<option style="background-image:url(something.png);">others</option>
</select>
But this would only work in Firefox :(
Personally I would recommend using some JS widget library like the one above.
Hope this helps!
You can simply use the emoji for each flag.
<select id="mobilephone">
<option selected disabled>Select country</option>
<option>🇮🇩 Indonesia</option>
<option>🇵🇷 Puerto Rico</option>
<option>🇿🇦 South Africa</option>
<option>🇬🇧 United Kingdom</option>
</select>
<select name="cat" class="input">
<option value="">----------Select Category--------</option>
<option value="Finance">Finance</option>
<option value="Travel">Travel</option></select>
<!--basing on the option selected in HTML code I would like to display Options in the below select-->
<select name="scat" class="input">
<option value="">---------Select subcategory------</option>
<option value="Financial Planning">Financial Planning</option>
<option value="Financial Control">Financial Control</option>
<option value="Corporate Finance">Corporate Finance</option>
<option value="Financial Management">Financial Management</option>
<option value="Financial Statement">Financial Statement</option>
<option value="Travel Planning">Travel Planning</option>
<option value="Travel Management">Travel Management </option>
<option value="Corporate Travel">Corporate Travel</option>
</select><br>
How to make that possible in HTML? Can I use statements like if... else in HTML???
What should i do to achieve that Dynamic Enabling and Disabling in HTML?
First you need to reference a JQuery Lib in your HTML page. You can follow this link to understand it.
And then you will need a data structure to map the relationship between categories and the subcategories. It can look like this:
suppose also you have added id attributes to each select same as their respective name.
var catAndSubCats= {
Finance: ["Financial Planning", "Financial Control","Financial Management",
"Financial Statement"],
Travel: ["Travel Planning","Travel Management", "Corporate Travel"]
}
Then you need to write an onchange handler for $('select[name=cat') inside which you need to filter the $('select[name=scat]) options based on the selected options text in cat.
With that you use an event to populate your select subcat based on what the cat is:
<script>
$(document).ready(function(){
$("#cat").change(function () {
var $selectedCat = $(this).find('option:selected').text();
$("#subCat").html($("#subcat").filter(function () {
return $.inArray($(this).text(), catAndSubCats[$selectedCat ]) >= 0;
});
});
</script>.
You can put above code in your head tag in your HTML file. Please don't forget the reference for JQuery Library
I am inspired via this solution.
I hope it will help you
As was stated above, you will need to link to the jQuery library. Here is my solution, which requires adding some classes to your HTML (note, I did this all inline for the sake of time):
EDIT**: It turns out there's a 'disabled' property for options in a select box. My last code did not work properly. This one should. Please see updated fiddle at the end.
<select name="cat" class="first">
<option value="">----------Select Category--------</option>
<option class="finance" value="Finance">Finance</option>
<option value="Travel">Travel</option></select>
<!--basing on the option selected in HTML code I would like to display Options in the below select-->
<select name="scat" class="second">
<option value="">---------Select subcategory------</option>
<option class="finance" value="Financial Planning">Financial Planning</option>
<option class="finance" value="Financial Control">Financial Control</option>
<option class="finance" value="Corporate Finance">Corporate Finance</option>
<option class="finance" value="Financial Management">Financial Management</option>
<option class="finance" value="Financial Statement">Financial Statement</option>
<option value="Travel Planning">Travel Planning</option>
<option value="Travel Management">Travel Management </option>
<option value="Corporate Travel">Corporate Travel</option>
</select><br>
<!-- Copy and past everything below right before the closing </body> tag in your HTML -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$('select.first').change(function(){
var sel = $('select.first option').map(function(){
return $(this).attr('class');
});
for (i = 0; i < sel.length; i++) {
if ($('select.first option:selected').hasClass(sel[i])) {
$('select.second option').not('select.second option:first-child, .' + sel[i]).prop('disabled', true);
$('select.second option.' + sel[i]).prop('disabled', false);
}
}
});
});
</script>
Here's a JSFiddle: http://jsfiddle.net/SQm9T/1/
At the moment I am using this:
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
it redirect me on the location inside of the option value. But it doesn't work as expected .. mean that if I click on the first option of the select, then onChange action not running. I was thinking about javascript, but I think you'll have some better suggestions guys. So how can I make it work if I click on each option it'll redirect me to the it's value?
Because the first option is already selected, the change event is never fired. Add an empty value as the first one and check for empty in the location assignment.
Here's an example:
https://jsfiddle.net/bL5sq/
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://google.com">Google</option>
<option value="https://yahoo.com">Yahoo</option>
</select>
I'd strongly suggest moving away from inline JavaScript, to something like the following:
function redirect(goto){
var conf = confirm("Are you sure you want to go elswhere?");
if (conf && goto != '') {
window.location = goto;
}
}
var selectEl = document.getElementById('redirectSelect');
selectEl.onchange = function(){
var goto = this.value;
redirect(goto);
};
JS Fiddle demo (404 linkrot victim).
JS Fiddle demo via Wayback Machine.
Forked JS Fiddle for current users.
In the mark-up in the JS Fiddle the first option has no value assigned, so clicking it shouldn't trigger the function to do anything, and since it's the default value clicking the select and then selecting that first default option won't trigger the change event anyway.
Update:
The latest example's (2017-08-09) redirect URLs required swapping out due to errors regarding mixed content between JS Fiddle and both domains, as well as both domains requiring 'sameorigin' for framed content. - Albert
to make it as globally reuse function using jquery
HTML
<select class="select_location">
<option value="http://localhost.com/app/page1.html">Page 1</option>
<option value="http://localhost.com/app/page2.html">Page 2</option>
<option value="http://localhost.com/app/page3.html">Page 3</option>
</select>
Javascript using jquery
$('.select_location').on('change', function(){
window.location = $(this).val();
});
now you will able to reuse this function by adding .select_location class to any Select element class
For someone who doesn't want to use inline JS.
<select data-select-name>
<option value="">Select...</option>
<option value="http://google.com">Google</option>
<option value="http://yahoo.com">Yahoo</option>
</select>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('select[data-select-name]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
window.location.href = this.options[this.selectedIndex].value;
}
</script>
This can be archived by adding code on the onchange event of the select control.
For Example:
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value=""></option>
<option value="http://google.com">Google</option>
<option value="http://gmail.com">Gmail</option>
<option value="http://youtube.com">Youtube</option>
</select>
{{-- dynamic select/dropdown --}}
<select class="form-control m-bot15" name="district_id"
onchange ="location = this.options[this.selectedIndex].value;"
>
<option value="">--Select--</option>
<option value="?">All</option>
#foreach($location as $district)
<option value="?district_id={{ $district->district_id }}" >
{{ $district->district }}
</option>
#endforeach
</select>
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://reactjs.org/">React Js</option>
<option value="https://angularjs.org/">Angular Js</option>
</select>