I Have a select list, each option contains a category ($k[3]) in its id.
<select name="page_from_link" class="my_select_list" >
<OPTION VALUE="" >With:</OPTION>
<?php foreach($pages_created as $k) {
$i=0; ?>
<OPTION id="<?php $i."-".$k[3]; ?>" class="pages_created" VALUE="<?php echo $k[0]; ?>" ><?php echo $k[1]; ?></OPTION>
<?php } ?>
</select>
I have another select list with all options hidden depending on the precedent select category :
AS:
$v) { ?>
" >
my jquery script doesn't work, how would you have done that ?
$(document).ready(function(){
$(".my_select_list").change(function(){
var array = $(this).find('option:selected').attr('id').split('-');
var cat = array[1];
alert("cat");
$("#cat_"+cat).show();
$(".pages_created_option:not(#cat_"+cat).hide();
return false;
});
});
$(this > option).attr(... => $(this).find('option:selected').attr (...
alert("cat"); => alert(cat);
$("#cat_"+cat+")").show(); => $("#cat_"+cat).show();
you should consider using firebug or chrome internal development tools (on F12).
on a side note, you might like to use optgroup instead of a dummy option:
<select name="page_from_link" class="my_select_list" >
<OPTGROUP label="With:">
<?php foreach($pages_created as $k) {
$i=0; ?>
<OPTION id="<?php $i."-".$k[3]; ?>" class="pages_created" VALUE="<?php echo $k[0]; ?>" ><?php echo $k[1]; ?></OPTION>
<?php } ?>
</OPTGROUP>
</select>
you could use either a php script, or a js script with the data encoded, holding the innerHTML and that changes the innerHTML of the parent object (such as a div) depending on what you selected in the previous select box.
add this in the head for javascript
function showsel()
{if(document.getElementById('parentid').value=="id of the option that will triger the shild ")
{document.getElementById('shild id').style.display="inline";}
else {document.getElementById('shild id').style.display="none";}
}
Then add for the shild
div id="shild id" style="display:none"
and to the parent
div id="parent id" onchange"showsel()"
Related
i want to get the id of selected option in dropdown.
I have a dropdow that displays company names from database. Now I want get the id of that company. How do i do that?
<select required name="org-list" id="org-list" class="form-control">
<option value="">Select</option>
<?php foreach($org as $value) { ?>
<option id="org" value="<?php echo $value['org_name'];?>"><?php echo $value['org_name']; ?></option>
<?php } ?>
</select>
The Model
public function get_organisation()
{
$q = $this->db->select('*')
->from('company')
->get();
return $q->result_array();
}
And in my controller i want the id of selected option from database.
$data = $this->key_m->array_from_post(array('id','org-list','keys'));
$data['keys'] = $license;
var_dump($data);
You should put the organization id in option tag's value. like this
<option value="<?php echo $value['org_id'];?>"><?php echo $value['org_name']; ?></option>
No need to provide id attribute to each option tag. When you will submit the form value of "org-list" will be selected organization id.
This is the ajax way
$.post(url,{ id : "id value from drop down here" },function(data){
//This is the call back for success
})
For that one, you need jquery. The is the easiest way to use. Url is where you are posting back to server.
In your server side catch like this
$this->input->post('id')
Because you used "id" in the ajax request. So you have to retrieve it using the field name 'id' . Hope you get it.
There are a couple things which you "should" / "could" change. At first I noticed that your ID attribute is "org", Id's are supposed to be unique and yours is not. Though, back to the actual question. You should change your code as follow:
<select required name="org-list" id="org-list" class="form-control">
<option value="">Select</option>
<?php foreach($org as $value): ?>
<option id="<?php echo $value['org_id'];?>" value="<?php echo $value['org_id'];?>"><?php echo $value['org_name']; ?></option>
<?php endforeach; ?>
</select>
Now in your controller you grab the selected ID like: $this->input->post('org-list').
You have to provide value for each id attr. for corresponding <option>
<select required name="org-list" id="org-list" class="form-control">
<option value="">Select</option>
<?php foreach($org as $value): ?>
<option id="<?php echo $value['org_id'];?>" value="<?php echo $value['org_name'];?>"><?php echo $value['org_name']; ?></option>
<?php endforech; ?>
</select>
I have a page with two drop-down menus. The option selected in the first drop-down menu controls what is displayed in the second.
The code was nice and easy when the drop-down menus were only used once - but I'm looking to repeat each set of drop-down menus four times.
Drop-down menu one is assigned the ID experience[<?php echo $i; ?>][manufacturer]. Drop-down menu two is assigned the ID experience[<?php echo $i; ?>][type].
Essentially, what I've got is:
<select id="experience[1][manufacturer]">...</select>
<select id="experience[2][manufacturer]">...</select>
<select id="experience[3][manufacturer]">...</select>
<select id="experience[4][manufacturer]">...</select>
... followed by:
<select id="experience[1][type]">...</select>
<select id="experience[2][type]">...</select>
<select id="experience[3][type]">...</select>
<select id="experience[4][type]">...</select>
I'm wondering: what's the best way to get the equivalent of <?php echo $i; ?> into the chunk of JavaScript that's used to output the contents of the second drop-down menu? (I know I can't use PHP directly within JavaScript like this - I just left the <?php echo $i; ?> snippets to indicate where I need to output numbers 1, 2, 3, 4 etc.
Thanks for your help!
Code:
<form>
<?php
$i=1;
while($i<=4) {
?>
<select id="experience[<?php echo $i; ?>][manufacturer]">
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Mercedes">Mercedes</option>
</select>
<select id="experience[<?php echo $i; ?>][type]">
<script type='text/javascript'>
$(document).ready(function() {
$("#experience[<?php echo $i; ?>][manufacturer]").change(function() {
$("#experience[<?php echo $i; ?>][type]").load("get_type.php?choice=" + $("#experience[<?php echo $i; ?>][manufacturer]").val());
});
});
</script>
</select>
<?php
$i++;
}
?>
</form>
Revised code:
<form>
<script type='text/javascript'>
$(document).ready(function() {
$(".experienceManufacturer").change(function() {
$("#experience["+$(this).attr('data-id')+"][type]").load("get_type.php?choice=" + $(this).val());
});
});
</script>
<?php $i=1;
while($i<=4) { ?>
<select id="experience[<?php echo $i; ?>][manufacturer]" class="experienceManufacturer" data-id="<?php echo $i; ?>">
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Mercedes">Mercedes</option>
</select>
<select id="experience[<?php echo $i; ?>][type]">
</select>
<?php
$i++;
}
?>
</form>
You should not need to include the script element in your PHP loop.
Instead, you should add a similar class to all common select elements. Something like class="experience"
Then, with a single script element you can attach events to all the selects:
<script type='text/javascript'>
$(document).ready(function() {
$("select.experience").each(function(i,element){
// here element is the actual item from the selected set, i is its index
$(element).on("change", function() {
$("#experience[" + i + "][type]").load("get_type.php?choice=" + $(element).val());
});
});
});
</script>
Instead of repeating the same javascript code 4 times, put it outside your loop and give classes to your select elements and use them as selectors for your jquery code. You could then add an attribute (named data-id for example) to your select elements containg their ids. It would look something like this
<select id="experience[<?php echo $i; ?>][manufacturer]" class="experienceManufacturer" data-id="<?php echo $i; ?>">
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Mercedes">Mercedes</option>
</select>
<select id="experience[<?php echo $i; ?>][type]"></select>
And your javascript code (outside the loop) would look something like this
$(document).ready(function() {
$(".experienceManufacturer").change(function() {
$("#experience\\["+$(this).attr('data-id')+"\\]\\[type\\]").load("get_type.php?choice=" + $(this).val());
});
});
Note that I used the keyword "this" inside the change event which references to the select element.
Edit: Added backslashes to escape the brackets in the jQuery selector (or else jQuery interprets it as an attribute).
What I am interested in getting is $option_value['price'] in a string from the dropdown, not . Using .value returns the later.
I have select menus that are created in a foreach() loop. The drop downs will hold price options. I am trying to give each product it's own id so I can use the javascript onChange() function to update prices on the screen.
The select tag looks like this:
<select name="option[<?php echo $option['product_option_id']; ?>]" class="select_options" id="select_<?php echo $product['product_id']; ?>" onchange="getIt(this);">
and the javascript:
function getIt(el) {
var id = el.id;
a = document.getElementById(id).text;
alert(a);
}
Alerting out id gives me select_some number. So I can see that it is getting the id. but alerting out a gives me [object HTMLSelectElement].
so I tried
alert(a.options.selectedIndex.value);
and get unidentified.
<?php if ($product['options']) { ?>
<div class="options" id="option_<?php echo $product['product_id']; ?>">
<?php foreach ($product['options'] as $option) { ?>
<?php if ($option['type'] == 'select') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option select_option">
<select name="option[<?php echo $option['product_option_id']; ?>]" class="select_options" id="select_<?php echo $product['product_id']; ?>" onchange="getIt(this);">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($option['option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><span id="newPrice"><?php echo str_replace('.00','.',$option_value['price']); ?></span>)
<?php } ?>
</option>
<?php } ?>
</select>
</div>
<?php } ?>
Change :
a = document.getElementById(id).text;
To:
a = document.getElementById(id).value;
That will alert the value of selected option.
"is there a way I can get the text shown on the drop down ($xx.xx), instead of the value?"
I think this is what you are looking for:
function getIt(el) {
var a = el.options[el.selectedIndex].text;
alert(a);
}
el.selectedIndex gives you, obviously, the index of the currently selected option, which you can use as an index into the collection of options, el.options, and then get that option's text. The text property belongs to each option, not to the select.
Demo: http://jsfiddle.net/FCnUQ/
(Note that if no option is selected selectedIndex will be -1.)
You don't need to use getElementById() at all because you already have a reference to the element, el.
Try this code, put document.getElementById(id).value instead of document.getElementById(id).text
function getIt(id) {
a = document.getElementById(id).value;
alert(a);
}
as you passing this like getit(this) you should code like this
function getIt(el) {
var id = el.id;
a = document.getElementById(id).value;
alert(el.value); //you can directly alert like this
}
I'm trying to change the value in an input when a different option gets selected from a select:
View image here.
The idea is that for each ad package you can have a different number of images (free gets 0 images, $20 for 4 images etc.). With this number I then want to display the correct amount of upload fields for images.
I'm already retrieving the values from the database for the number of images for each package as you can see in the code below:
<select name="ad_pack_id" class="dropdownlist required">
<?php foreach ( $results as $result ) { ?>
<option value="<?php esc_attr_e($result->pack_id); ?>" class="<?php esc_attr_e($result->pack_images); ?>"><?php esc_attr_e($result->pack_name); ?></option>
<?php } ?>
</select>
<input type="hidden" value="" name="packimages" id="packimages" />
I've tried getting the value from the select directly by doing:
mainform.ad_pack_id.options[selectedIndex].class.innerHTML
but this isn't getting the number of images.
How can I get the number of images for the selected ad package without submitting the form first?
you could also try jquery:
$("#ad_pack_id option:selected").val()
this should get you the value. to show/hide upload fields you can use for example the CSS display attribute:
$("#uploadfield_1").css("display", "none")
$("#uploadfield_1").css("display", "block")
try this:
document.mainform.ad_pack_id.options[Selected].className;
This code will set the input's value to the selected option's value.
I just added "id" attribute to select menu
<select id="ad_pack_id" name="ad_pack_id" class="dropdownlist required">
<?php foreach ( $results as $result ) { ?>
<option value="<?php esc_attr_e($result->pack_id); ?>" class="<?php esc_attr_e($result->pack_images); ?>"><?php esc_attr_e($result->pack_name); ?></option>
<?php } ?>
</select>
<input type="hidden" value="" name="packimages" id="packimages" />
<script type="text/javascript">
var selectmenu = document.getElementById("ad_pack_id");
selectmenu.onchange = function()
{ //run some code when "onchange" event fires
var chosenoption = this.options[this.selectedIndex] //this refers to "selectmenu"
if (chosenoption.value!="nothing")
{
document.getElementById("packimages").value = chosenoption.value ;
}
}
</script>
Im trying to implement the search feature in my website.
when the search keyword is entered in the textbox, and the category combo is selected, the form will be Posted and the result will be shown on the same page.
what i want is to keep the selected category of the combo by default in the form after posted
For eg., If i select the category 'Automobiles' in the combo and click search, after form submit, the combo should show the automobiles as default selected option. Please help me. Any help will be appreciated
I assume you get categories from database.
you should try:
<?php
$categories = $rows; //array from database
foreach($rows as $row){
if($row['name'] == $_POST['category']){
$isSelected = ' selected="selected"'; // if the option submited in form is as same as this row we add the selected tag
} else {
$isSelected = ''; // else we remove any tag
}
echo "<option value='".$row['id']."'".$isSelected.">".$row['name']."</option>";
}
?>
Assuming that by "combo" you mean "A regular select element rendering as a drop down menu or list box" and not "A combobox that is a combination of a drop down menu and free text input":
When outputting the <option> elements, check the value against the submitted data in $_POST / $_GET and output selected (in HTML) or selected="selected" (in XHTML) as an attribute of the option element.
Here is the JQuery way I am using.
<select name="name" id="name">
<option value="a">a</option>
<option value="b">b</option>
</select>
<script type="text/javascript">
$("#name").val("<?php echo $_POST['name'];?>");
</script>
But this is only if you have jquery included in your webpage.
Regards
<?php
$example = $_POST["friend"];
?>
<form method="POST">
<select name="friend">
<option value="tom" <?php if (isset($example) && $example=="tom") echo ' selected';?>>Thomas Finnegan</option>
<option value="anna" <?php if (isset($example) && $example=="anna") echo ' selected';?>>Anna Karenina</option>
</select>
<br><br>
<input type="submit">
</form>
This solved my problem.
This Solved my Problem. Thanks for all those answered
<select name="name" id="name">
<option value="a">a</option>
<option value="b">b</option>
</select>
<script type="text/javascript">
document.getElementById('name').value = "<?php echo $_GET['name'];?>";
</script>
$countries_uid = $_POST['countries_uid'];
while($row = mysql_fetch_array($result)){
$uid = $row['uid'];
$country = $row['country_name'];
$isSelected = null;
if(!empty($countries_uid)){
foreach($countries_uid as $country_uid){//cycle through country_uid
if($row['uid'] == $country_uid){
$isSelected = 'selected="selected"'; // if the option submited in form is as same as this row we add the selected
}
}
}else {
$isSelected = ''; // else we remove any tag
}
echo "<option value='".$uid."'".$isSelected.">".$country."</option>";
}
this is my solutions of multiple select dropdown box after modifying Mihai Iorga codes
After trying al this "solves" nothing work. Did some research on w3school before and remember there was explanation of keeping values about radio. But it also works for Select option. See here an example. Just try it out and play with it.
<?php
$example = $_POST["example"];
?>
<form method="post">
<select name="example">
<option <?php if (isset($example) && $example=="a") echo "selected";?>>a</option>
<option <?php if (isset($example) && $example=="b") echo "selected";?>>b</option>
<option <?php if (isset($example) && $example=="c") echo "selected";?>>c</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>
Easy solution:
If select box values fetched from DB then to keep selected value after form submit OR form POST
<select name="country" id="country">
<?php $countries = $wpdb->get_results( 'SELECT * FROM countries' ); ?>
<option value="">
<?php if(isset($_POST['country'])){echo htmlentities($_POST['country']); } else { echo "Select Country *"; }?>
</option>
<?php foreach($countries as $country){ ?>
<option <?php echo ($_POST['country'] == $country->country_name ? 'selected="selected"':''); ?> value="<?php echo $country->country_name; ?>"><?php echo $country->country_name; ?>
</option>
<?php } ?>
</select>