How to fill in a text field with drop down selection - javascript

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>

Related

I cant get the value from selected option, what is wrong with these?

<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>

How do I hide options within a range of selects based upon changes in different select?

Related JSFiddle
<form id="calendar_form">
<div class="day1">
Day 1
<table class="selector_table">
<select name="select1">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select2">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
<br>
<div class="day2">
Day 2
<table class="selector_table">
<select name="select3">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select4">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
</form>
<script>
$("select").change(function(){
var selectThatWasChanged = $(this).attr('id');
var valueToRemove = $(this).val();
var dayWorkingWith = $(this).closest('.selector_table');
$('option', dayWorkingWith).not('#' + selectThatWasChanged + ' option');
$('option[value="' + valueToRemove + '"]').not('#' + selectThatWasChanged + ' option').hide();
});
</script>
I've been playing with this for an hour, and I'm frustrated. sigh. What I'm trying to accomplish is this: If PersonA is selected in Day1, he should not be available to pick again anywhere in Day1. However, PersonA should still be available on Day2.
Currently if PersonA is selected, PersonA is removed from all other selects. I tried to hone in on just the relevant selects by using the closest('.selector_table').
What am I doing wrong?
Thank you so much, in advance!
Bonus basic question: would it be tremendously more work to "undo" the change. For instance, if someone selects PersonA it hides PersonA as described, but then if PersonB is selected thereafter on the same select, it undoes that change and PersonA becomes available again?
Apply change event to the select Element, get the sibling select and disable it's matching option element.
$("select").change(function() {
const selectedOptionVal = $(this).find(":selected")[0].value;
const sibSelectEle = $(this).siblings('select');
sibSelectEle.children('option').each(function(_, option) {
if (selectedOptionVal == option.value) {
$(option).attr("disabled", true);
} else {
$(option).attr("disabled", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="calendar_form">
<div class="day1">
Day 1
<table class="selector_table">
<select name="select1">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select2">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
<br>
<div class="day2">
Day 2
<table class="selector_table">
<select name="select3">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select4">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
</form>

Second dropdown value is not changing if I doesn't change my first dropdown

I am trying to show a table of reviews by taking the value of two dropdowns. When I was having one dropdown(positive, negative etc) that works fine but when I introduce another dropdown(food, drinks etc) it is not working.
It only works when I change the first dropdown and second dropdown but if I kept the first dropdown unchanged then it's not working
I tried by adding onchange method to the second dropdown. I just started with Javascript so not much idea about what to try.
function printResult(form) {
var output = {
{
output | safe
}
};
var sel = form.list;
var sel2 = form.list2;
var selectedVal = sel.options[sel.selectedIndex].value;
var selectedVal2 = sel2.options[sel.selectedIndex].value;
//document.getElementById("showResult").innerText = "Your number is: " + selectedVal;
//console.log(output);
document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
}
<form action="dropdown" onSubmit="return printResult(this);">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="all">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2" onChange="printResult()">
<option value="menu">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
You need to pass the form on the change too and return false to not submit the form:
function printResult(form) {
var sel = form.list;
var sel2 = form.list2;
var selectedVal = sel.value;
var selectedVal2 = sel2.value;
document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
return false;
}
<form action="dropdown" onSubmit="return printResult(this);">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="all">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2" onChange="printResult(this.form)">
<option value="menu">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
Perhaps you wanted this instead
window.addEventListener("load", function() {
document.getElementById("form1").addEventListener("submit", function(e) {
e.preventDefault(); // stop submission
var sel = this.list;
var sel2 = this.list2;
var selectedVal = sel.value;
var selectedVal2 = sel2.value;
document.getElementById("showResult").innerText = (selectedVal && selectedVal2) ? selectedVal + ":" + selectedVal2 : "Please select both";
});
});
<form action="dropdown" id="form1">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2">
<option value="">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>

change drop down value on slection of other drop down

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/

Javascript disable select box on another select box option

I have two select dropdown lists:
<select name="internal_message">
<option value="yes">Yes</option>
<option value="" selected="selected">No</option>
</select>
and
<select name="internal_message_agent">
<option value="">Choose</option>.... etc
</select>
I have tried:
<select name="internal_message">
<option value="yes" onClick="document.getElementById('internal_message_agent').disabled=!this.selected;">Yes</option>
<option value="" selected="selected">No</option>
</select>
but it doesnt work - how can i get it working to disable the internal_message_agent select element to be disabled when the internal_message selected value is "No" and enable it when the selected option is "Yes"
Add an ID to each select and use jquery to disable it like so:
$('#box1').on('change', function(){
if($(this).val()==='no'){
$('#box2').attr('disabled', 'disabled');
}else{
$('#box2').attr('disabled', false);
}
});
http://jsfiddle.net/3MCaG/1/
Here's what it would look like with Javascript and HTML.
<!DOCTYPE html>
<html>
<head>
</head>
<script>
function validate(){
var b1 = document.getElementById("box1");
var f = b1.options[b1.selectedIndex].value;
var b2 = document.getElementById("box2");
if(f == "no"){
b2.disabled="disabled";
}
else{
b2.disabled="";
}
}
</script>
<select id="box1" onchange="validate()">
<option id="yes" value="yes">Yes</option>
<option id="no" value="no" selected="selected">No</option>
</select>
<select id="box2" disabled>
<option></option>
<option value="">Choose</option>
</select>
</html>

Categories