<select id="region_id" onChange="get_region_id()" class="form-control">
<option disabled selected>--Choose Region--</option>
<?php foreach($region as $row){?>
<option value="<?php $row['region_c'];?>">
<?php echo $row['region_m'];?>
</option>
<?php }?>
</select>
<?php ?> -----------------------
<script type="text/javascript">
function get_region_id() {
var select = document.getElementById('region_id');
var options = select.options[select.selectedIndex].value;
alert(options);
}
get_region_id();
</script>
Add the function to an onChange event, so it triggers every time a new value is selected:
var select = document.getElementById('region_id');
function get_region_id() {
var options = select.options[select.selectedIndex].value;
alert(options);
}
select.addEventListener('onChange',get_region_id)
<select id="region_id" onChange="get_region_id()" class="form-control">
<option disabled selected>--Choose Region--</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
Related
Note: Multiple select tags were added using for loop in PHP.The problem I am facing is when I have multiple select tags with same options I could not know which select is calling selectfun()
<?php
$dynamicTable= "";
for ($x = 1; $x <= $a; $x++) {
$dynamicTable .= "<tr><td>";
$dynamicTable .= $x;
$dynamicTable .= "</td><td><input type='text'></td>
<td><input type='text'></td>
<td>
<select name='choose' class='choose' onclick='selectfun()'>
<select name='choose' class='choose' onclick='selectfun()'>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
?>
}
echo $dynamicTable;
<script>
function selectfun() {
var selectBox = document.querySelectorAll(".choose")[?];
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
if (selectedValue == 'radio') {
alert("Hi");
}
}
</script>
function selectfun(elem){
if(elem.value == 'radio'){
alert(elem.value);
}
else{
alert('it is not radio')
}
}
<select name='choose' class='choose' onclick='selectfun(this)'>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
<select name='choose' class='choose' onclick='selectfun(this)'>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
you can use pass parameter from the click event, here you can read more about how to pass the parameter from the functions in JS.
Add an event value to the onchange event
(I assume you want the selected value not that the select has been clicked)
<select id='select1' name='choose' class='choose' onchange=selectfun(event);>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
<select id='select2' name='choose' class='choose' onchange=selectfun(event);>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
<select id='select3' name='choose' class='choose' onchange=selectfun(event);>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
Get selection info using the event
function selectfun(event){
alert(event.target.id + " Selected " + event.target.value);
}
I added an ID to each select in this example so you can see from the output that it is the value from that specific select.
Issue
Only issue with this is if VAR CHAR is selected no change will occur so the function won't be fired.
Solution
I suggest adding an option that is an unset position that asked for a selection.
<select id='select1' name='choose' class='choose' onchange=selectfun(event);>
<option value=''>SELECT VALUE</option>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
Below are the dropdown data..
<select size="1" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
I want to get alert/pop up when I select the data which is start from IN in drop down list.
Try this:
https://jsfiddle.net/mminetto/bggwnkwj/
var select = $('select[name="Test_Data"]');
select.on('change', function(){
var options = select.children('option:selected');
if(options.length > 0 && options[0].innerText.startsWith("IN")){
alert(this.value);
alert(options[0].innerText);
}
});
<select size="1" name="Test_Data" id="dropdown">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
in javascript
<script>
$("#dropdown").change(function(){
if($(this).find("option:selected").text().startsWith("IN")){
alert("option with IN selected =>"+$(this).find("option:selected").text());
}
});
</script>
Try this code
HTML
<select size="1" onChange="showAlert()" id="dataCountry" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
</select>
JavaScript
<script>
function showAlert() {
var el = document.getElementById('dataCountry'); // get the index
var text = el.options[el.selectedIndex].innerHTML; // get the label
var n = text.search("IN"); //search number of IN
if(n>=0) {
alert(text);
}
}
</script>
Need experts opinion on below mentioned code, i am not good with javascript. please help
what i need is,i have 2 drop downs. one is catid1 and 2nd is catid ...
catid loads some values from databases, and catid1 have some manual entries, few of them are same and few are different. but i want is when i will select catid1 value from list like "abc" then catid value should be changed to same as catid1 "abc"
i have tried some different ways but can't resolve this, any one please suggest either this could be possible or not.
<div class="col-md-4">
<div class="form-group">
<label for="catId"><?php echo $categoryField; ?></label>
<select class="form-control" name="catId1" id="catId1" onChange="qt();">
<option> Select Base Query Type </option>
</select>
<span class="help-block"><?php echo $categoryHelp; ?></span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="catId"><?php echo $categoryField; ?></label>
<select class="form-control" name="catId" id="catId">
<?php
$tcat = "SELECT catId, catName FROM categories WHERE userId = ".$userId." AND isActive = 1 ";
$rest = mysqli_query($mysqli, $tcat) or die('-2'.mysqli_error());
?>
<option value="..."><?php echo $selectOption; ?></option>
<?php while ($tcatrow = mysqli_fetch_assoc($rest)) { ?>
<option value="<?php echo $tcatrow['catId']; ?>"><?php echo clean($tcatrow['catName']); ?></option>
<?php } ?>
</select>
<span class="help-block"><?php echo $categoryHelp; ?></span>
</div>
</div>
</div>
sample code which i have tried is as below as well but it's not working in my case.
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
var selects = document.querySelectorAll('select[name="dropdown[]"]');
selects[0].addEventListener('change', function () {
for (var i = 0; i < selects.length; i++) {
selects[i].value = selects[0].value;
}
});
You forgot your script tags in the second example:
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<script language="javascript">
var selects = document.querySelectorAll('select[name="dropdown[]"]');
selects[0].addEventListener('change', function () {
for (var i = 0; i < selects.length; i++) {
selects[i].value = selects[0].value;
}
});
</script>
jsfiddle: https://jsfiddle.net/ge127u8d/
Yes you can do it by javascript or Jquery. Its easier in Jquery like
function qt() {
var catId1Val = $('#catId1 :selected').val();
$("#catId> option").each(function() {
if (this.value == catId1Val)
$("#catId select").val(this.value);
});
}
Check out the following jQuery method:
http://api.jquery.com/val/
http://api.jquery.com/each/
http://jsfiddle.net/Rx3AP/
I have the following <select> inside a <form> that is submitted with ajax. The select is submitting with a value of: Undefined. What is wrong?
<select class="form-control" name="site_theme" id="site_theme" value="<?php $result = mysqli_query($con,"SELECT * FROM settings"); while($row = mysqli_fetch_array($result)) { echo $row['site_theme']; }?>">
<?php
$result = mysqli_query($con,"SELECT * FROM themes");
while($row = mysqli_fetch_array($result))
{
echo "<option VALUE='".$row['theme_name']."'>".$row['theme_name']."</option>";
}
?>
</select>
The javascript copied here to ugly to post so I made a jsFiddle here: http://jsfiddle.net/yz5r4/
Also the above code results as:
<select class="form-control" name="site_theme" id="site_theme" value="Amelia">
<option value="Amelia">Amelia</option>
<option value="Cerulean">Cerulean</option>
<option value="Cosmo">Cosmo</option>
<option value="Cyborg">Cyborg</option>
<option value="Flatly">Flatly</option>
<option value="Journal">Journal</option>
<option value="Readable">Readable</option>
<option value="Simplex">Simplex</option>
<option value="Slate">Slate</option>
<option value="Spacelab">Spacelab</option>
<option value="United">United</option>
</select>
you problems was first a return before ajax call.
second wrong selector for select!
Here is a sample that shows you. http://jsfiddle.net/yz5r4/3/
your selector : $('input$("#site_theme")')
but it should be $("#site_theme") or $("select#site_theme")
HTML:
<select class="form-control" name="site_theme" id="site_theme" value="Amelia">
<option value="Amelia">Amelia</option>
<option value="Cerulean">Cerulean</option>
<option value="Cosmo">Cosmo</option>
<option value="Cyborg">Cyborg</option>
<option value="Flatly">Flatly</option>
<option value="Journal">Journal</option>
<option value="Readable">Readable</option>
<option value="Simplex">Simplex</option>
<option value="Slate">Slate</option>
<option value="Spacelab">Spacelab</option>
<option value="United">United</option>
</select>
<input type="button" id="mclick" value="click" />
JS:
// General Form Submit
$(function () {
$('.error').hide();
$("#mclick").click(function () {
// validate and process form here
var theme = $("#site_theme").val();
alert(theme);
});
});
I have a drop down with different strings, I want a text box to be filled in with the string of the drop down selected.
I am writing this in html
<td align="right">
<select name="xyz" size="1">
<option value=""></option>
<?php foreach($comments as $comment): ?>
<?if($comment->x!= 0):?>
<option value="<?=$comment->x;?>"<?=($comment->x == $postData["xyz"] ? 'selected="selected"':"")?>>
<?=$comment->y;?>
</option>
<?endif;?>
<?php endforeach; ?>
</select>
<textarea name="xz" cols="36" rows="3"><?=$postData["xz"];?></textarea>
</td>
Something like this jsfiddle demo?
HTML:
<textarea id="mytext"></textarea>
<select id="dropdown">
<option value="">None</option>
<option value="text1">text1</option>
<option value="text2">text2</option>
<option value="text3">text3</option>
<option value="text4">text4</option>
</select>
JavaScript:
<script type="text/javascript">
var mytextbox = document.getElementById('mytext');
var mydropdown = document.getElementById('dropdown');
mydropdown.onchange = function(){
mytextbox.value = mytextbox.value + this.value; //to appened
//mytextbox.innerHTML = this.value;
}
</script>