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.
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()
I have four fields, out of them 3 is textboxes and 1 is dropdown. I am cloning them dynamically whenever user clicks on add more.
For textboxes i have given its name as array and its working fine (name="xyz[]").
Now the problem I am facing is with dropdown. I have tried same way to deal with it but its not working it seems. I can't access the values through PHP, it keeps giving me the values of the first select box only.
<div class="cust-input">
<select id="head_of_institute" name="head_of_institute[]">
<option>Select Management</option>
<option value="Principal">Principal</option>
<option value="Director">Director</option>
<option value="Other">Other</option>
</select>
<select id="head_of_institute" name="head_of_institute[]">
<option>Select Management</option>
<option value="Principal">Principal</option>
<option value="Director">Director</option>
<option value="Other">Other</option>
</select>
</div>
<div class="cust-input">
<input type="text" name="head_name[]">
<input type="text" name="head_name[]">
</div>
Can you please suggest how to solve this problem?
Thanks in advance
Your dropdown is not working only because, I'm sure that you are adding new dropdown with the same ID.
Yes, ID must be unique on a page. If you add same ID more than one then javascript will ignore another.
So, my suggestion is to add new dropdown with name="head_of_institute[]" and id="head_of_institute_1" here 1 can be a counter for next downdown it'll be head_of_institute_2.
:) enjoy!
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've 2 select boxes with same id's as well as names but at a time only one is shown.
But when form is posted i do not get the exact value.It only displays the first value from the dropdown.
Following is a sample code of the same.
<?php
var_dump($_POST)
?>
<form method="POST" action="">
<select name="test" id="test">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="test" id="test" style="display:none" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add"/>
</form>
I even tried surrounding the select box with a div and then hidding it.
Not sure why you have two select's with the same name, but when you hide one you also need to disable it too (disabled="disabled").
As per HTML specification, disabled fields are not submitted so you should have your true value posted from the select that isn't disabled.
Presumably you're using some javascript to switch which select is displayed?
If that's the case, then start off with
<select name="test" id="test"></select>
<select name="test_dummy" id="test_dummy" style="display:none" ></select>
And whichever code changes the style attribute will also have to change the name and id attributes
Even when one of these is hidden at every point, they should have different names in the markup so you can identify which one is which.
Otherwise it'll pass only the last element's (in the markup) value through the form (no matter if it's hidden via CSS or not).
I'm not quite sure why your hiding/showing only one of these at a time anyway. It'd likely be better if you replaced the <option>'s inside the select to the new ones, instead of using show/hide.
You would have to have different id's and in your code conditionally check which select box value is visible fetch it's value.
When you submit a form, the POST data contains data basing on the attribute name. If they have the same name, the value of the second select overwrites the value chosen from the first one. Even if you hide it in the page.
If you want to have just the value of the first select, you should disable the second one, by adding disabled="disabled" or by changing its name.
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.