I'm trying to make a select box with links that a visitor can click, select an item from the list, and be directed to that page in a new tab. The select box should display "Select" by default which is just a placeholder and doesn't link to anything.
I have two codes that almost fit the need, but they're a little different and both come up short. The first one puts script in the head, and doesn't open in a new tab. The second uses script at the location and tries to find the "Select" page, which ends with 404.
Is there any advantage to using script in the header, versus
being part of the code snippet?
Can we somehow combine these,
using whichever version of code is better, to implement a "Select"
placeholder properly but open in a new window too.
What happens if a user has disabled scripts in his browser? Is there a way to account for that?
First:
<form action="dummy" method="post">
<select name="choice" size="1" onChange="jump(this.form)">
<option value="">Select...</option>
<option value="http://yoursite.com/test1/">Test 1</option>
<option value="http://yoursite.com/test2/">Test 2</option>
<option value="http://yoursite.com/test3/">Test 3</option>
</select></form>
Second:
<form name="form1">
<select name="menu1" id="menu1">
<option selected>Select...</option>
<option value="http://yoursite.com/test1/">Test 1</option>
<option value="http://yoursite.com/test2/">Test 2</option>
<option value="http://yoursite.com/test3/">Test 3</option>
</select>
<script type="text/javascript">
var urlmenu = document.getElementById('menu1');
urlmenu.onchange = function() {
window.open(this.options[this.selectedIndex].value);
};
</script>
I wouldn't recommend this, it's likely to be blocked by the browser. However:
$('#menu').on('change', function() {
window.open($(this).val(), '_blank');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="menu">
<option selected disabled>Select an option</option>
<option value="http://stackoverflow.com">StackOverflow</option>
<option value="http://google.com">Google</option>
</select>
If you open your console when you run the snippet you may see it's been blocked.
Related
I am using OSTicket, a ticket support system. Using a dropdown menu in PHP, I would like to make a form which displays either one or two options, depending on the user. A regular user only shows scenario 1. Special users will see scenario 2.
Scenario 1 for regular users
<select name="filter" class="form-control">
<option value="">Please select</option>
<option value="1">Option 1</option>
Scenario 2 for special users
<select name="filter" class="form-control">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
Every user is linked to a organisation in my database. Each organisation has it's own value (org_id). There is a connection to the database and the query is succesful.
In OSTicket, this function exists: $thisclient->getOrgId, which I can use to list the org_id for a user. When I echo it (echo $thisclient->getOrgId;) I see the org_id from that user, so it does work. But no matter what I try, whenever I enter it into the form, it does not work.
<select name="filter" class="form-control">
<option value="">Please select</option>
<option value="1">Option 1</option>
<?php if($thisclient->getOrgId == 3); {echo "<option value=\"2\">Option 2</option>";} ?>
If I change the if-statement above to 4, 5, 999, 203232, or whatever: it always seems 'true' so the second option is displayed. I only want to display the second option whenever the value equals a specific value in the database(e.g. 3). I hope someone can help me out.
Solution
getOrgId()
The code of
if($thisclient->getOrgId == 3);
contains two problems:
The ; specifies that nothing should be done if the condition is true. You need to remove this.
getOrgId is a method, you need to call it, like $thisclient->getOrgId()
The similar questions out there didnt really help me because they were too specific.
I have a form with a select input. I need the val that accompies the option tags.
When I var_dump the post data, I can see that the data being transferred is not the val of the option, but the name of the option.
i.e:
<select name="selector">
<option val="1">Option 1</option>
<option val="2">Option </option>
</select>
And my post data will say something like ["selector"]=> string(8) "Option 1"
I'm using CodeIgniter and I'm not sure how to get it to play along.
I want to avoid doing something convoluted with JavaScript and getting the .val() and assigning it to something else. That would be lame.
The attribute you use to set an option value is value not val
<option value="1">Option 1</option>
While using codeigniter, better practice would be settings selects using form helper, so if we have array of options we can pass it into view and generate out like:
<?php echo form_dropdown('selector', $optionsArray, 0); ?>
this one will generate select dropdown like this:
<select name="selector">
<option value="0" selected="selected">Option 1</option>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
</select>
Please notice that I set default selected value to 0
Cheers, hope this helps
I am new to jQuery and having trouble to trigger change event in drop down box.
This is my HTML markup
<select id="mini_bookinglocation" name="mini_bookinglocation">
<option selected="selected" value="">Please Select</option>
</select>
This is my jQuery
$("#mini_bookinglocation").change(function()
{
alert(" test ");
});
I have tried put this inside the document ready block as well as outside but seems I can't get it working. I don't see the alert coming out.
Also do I need to keep these function withing the document ready section ?
Can anyone help ?
Thanks
Just to add that the values for the above will pass dynamically using jQuery.
You have only one value in dropdown. So value is never changed. Thats why .change is not called.
Try adding more options in select box.
Also you should write the jQuery code inside document.ready.
Try adding more options, because change event is fired when there is a change in values. In your case there is no change in values.
<select id="mini_bookinglocation" name="mini_bookinglocation">
<option selected="selected" value="">Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
From The docs
The change event is sent to an element when its value changes. For
select boxes, checkboxes, and radio buttons, the event is fired
immediately when the user makes a selection with the mouse, but for
the other element types the event is deferred until the element loses
focus.
Also do I need to keep these function withing the document ready section ?
No, there is no need to put the code under ready function because the event is fired when change happens
DEMO
Assign change event listener in the document ready function
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mini_bookinglocation").change(function() {
alert(" test ");
});
});
</script>
</head>
<body>
<select id="mini_bookinglocation" name="mini_bookinglocation">
<option selected="selected" value="">Please Select</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="D">Option D</option>
<option value="E">Option E</option>
</select>
</body>
</html>
Here is an example
I found the problem. it is because in my code I use jQuery in one place and $ in another place. I was able to google this and just changed all to jQuery and removed all $ and it works. Sorry for not showing the full code but I was able to learn lot by reading all answers.
Thank you all for the help.
I have an external Javascript file and i am trying to alert the value of select tags which are being generated dynamically through php.
the problem is, that it selectes the value of only the first select tag. What should i do, so that the javascript is able to independently identify each select tags value.
My <select> code looks like this:
<select id="vote">
<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><input type="button" value="vote" onclick="castvote();">
and the Javascript (which is external):
function castvote()
{
var sel=document.getElementById("vote");
alert(sel.options[sel.selectedIndex].value);}
The javascript just alerts the value of first select tag. even if i change value of some other select tag and click on the corresponding button.
I hope i am able to explain my issue.
Can someone help me with this.
Best Zeeshan
I don't see any problems with what you have - could be an issue with the select - you can do something like this to test:
<select id="vote"
onChange="
alert(this.options[this.selectedIndex].value);
"
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Works for me. Tested on Safari 3 and FF 3.5. Which browser are you testing at?
Also, I would recommend using unobstrusive javascript (adding behavior to the button trhough Javascript) instead of using the "onclick" attribute.
I have a normal HTML select dropdown box
<select id="day" name="day">
<option value="0">All</option>
<option value="1">Mon</option>
<option value="2">Tue</option>
<option value="3">Wed</option>
<option value="4">Thu</option>
<option value="5">Fri</option>
</select>
But on occassion I want to make some options not clickable, e.g. the Text faded out slightly if possible, and then nothing to happen if the text/value is selected.
Anyone know how?
I'm writing my page in PHP.
Simply give the option tag an attribute 'disabled'.
<select>
<option value="1" disabled>1</option>
<option value="2">2</option>
</select>
So in this example, 1 will be faded out and un-selectable but 2 will be selectable.
IE 6 requires javascript to disable an item. There is a bug that prevents it from disabling individual items.
See here for details on how to implement this so that it functions in IE6:
http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/
There is a javascript solution here
http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/
There is no way to do this in IE without a JS hack sadly.