I am building a web app that is used to select drugs and details associated with drugs. There are some sections that allow for options, but the 'other' option requires the input of text as opposed to selecting one of the other options. I am trying to add a text box after a 'other' option is selected.
Here is the entire code that I have been working on. I have tried using javascript and some jquery, but I am unable to get it to work. Any help would be great please.
<div class="form-group">
<label class="control-label col-sm-2">Route:</label>
<div class="col-xs-3">
<select id="Quantity" name="quantity" class="form-control" required="">
<option value="" selected="" disabled="">Please select A dosage...</option>
<option value="PO">PO</option>
<option value="IV">IV</option>
<option value="PR">PR</option>
<option value="Topically">Topically</option>
<option value="other">Other (please specify)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Frequency:</label>
<div class="col-xs-3">
<select id="Regime" name="regime" class="form-control" required="">
<option value="" selected="" disabled="">Please select A regime...</option>
<option value="Once A Day">Once A Day</option>
<option value="BD">BD</option>
<option value="TDS">TDS</option>
<option value="QDS">QDS</option>
<option value="Other">Other (please specify)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date of Prescription:</label>
<div class="col-xs-3">
<input class="form-control" type="date" name="prescription" placeholder="(yyyy-mm-dd)" required>
</div>
</div>
Look please this jsfiddle example
$('textarea').hide();
$('#Quantity').change(function()
{
var o = $(this).find('option:selected').val();
console.log(o);
if(o=='other') $('textarea').show();
});
So here are some explanations :
$('textarea').hide(); // hide the textarea by default
$('#Quantity').change(function(){ }); // when the user select an option in the #quantity select tag
var o = $(this).find('option:selected').val(); // get the current value of the option selected
if(o=='other') $('textarea').show(); // if the variable o is equal to "other" then show the textarea
Related
the foundation of my code is that I am taking data from ag-grid and showing that data into select drop-down (inside a popup) when "Edit" button is clicked.
But the data is not showing in the select drop-down.
When I click Edit, "YES" or "NO" should show as already selected in the drop-down based on the data I get from the grid. The code I used is mentioned below:-
<!-- Alter Part -->
<div class="form-group row">
<label for="alter_part" class="col-sm-3 col-form-label">Alter Part</label>
<div class="col-sm-9">
<select id="alter_part" class="form-control" onchange="alternatefunc();" required>
<option value="1">YES</option>
<option value="0">NO</option>
</select>
</div>
</div>
<!-- Test Type -->
<div class="form-group row">
<label for="test_type" class="col-sm-3 col-form-label">Select Test Type</label>
<div class="col-sm-9">
<select id="test_type" class="form-control" required>
<option value="1">YES</option>
<option value="0">NO</option>
</select>
</div>
</div>
function getInitialData(params)
{
//Setting value using grid data
document.getElementById('alter_part').value = params.node.data[params.columnApi.getAllGridColumns()[3].colId];
document.getElementById('test_type').value = params.node.data[params.columnApi.getAllGridColumns()[7].colId];
}
I have verified that the select drop-down stores the value from grid,
var a = document.getElementById('test_type').value;
variable "a" here returns the correct value of the grid row.
This question already has answers here:
jQuery select change show/hide div event
(10 answers)
Closed 2 years ago.
I have an HTML form with multiple select fields... I want to display/hide a div based on a user's selection of a previous field.
Specifically, if a user selects "Before" or "After" on the select field, I want to hide the #Length-div... the odd thing is that I have already gotten this to work for the #Yes div, and I don't know what the difference is between these two.
<div class="required">
<label class="control-label" for="before_after">When?</label>
<select class="form-control" id="before_after" name="before_after" required="">
<option selected="" value="Until the prayer after">Until the prayer after</option>
<option value="Before">Before</option>
<option value="After">After</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="recurring">Recurring</label>
<select class="form-control" id="recurring" name="recurring" required="">
<option selected="" value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div name="Length-div" id="Length-div" style="display:none;">
{{ wtf.form_field(form.length)}}
</div>
<div name="Yes" id="Yes" style="display: none;">
{{ wtf.form_field(form.frequency)}}
{{ wtf.form_field(form.end)}}
</div>
My Jquery scripts:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
$(document).ready(function(){
$("#recurring").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue=="No"){
$("#Yes").hide()
} else{
$("#Yes").show();
}
}).change();
$("#before_after").change(function(){
$(this).find("option:selected").each(function(){
var optionValue2 = $(this).attr("value");
if(optionValue2=="Until the prayer after"){
$("#Length-div").show();
} else{
$("#Length-div").hide();
}
}).change();
});
});
});
</script>
Could you please let me know why my code works for the #Yes div but not for the #Length-div ? Thank you in advance!
Your code structure is not proper otherwise it is working fine see below example
$(document).ready(function(){
$("#recurring").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue=="No"){
$("#Yes").hide()
} else{
$("#Yes").show();
}
})
});
$("#before_after").change(function(){
debugger
$(this).find("option:selected").each(function(){
var optionValue2 = $(this).attr("value");
if(optionValue2=="Until the prayer after"){
$("#Length-div").show();
} else{
$("#Length-div").hide();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="required">
<label class="control-label" for="before_after">When?</label>
<select class="form-control" id="before_after" name="before_after" required="">
<option selected="" value="Until the prayer after">Until the prayer after</option>
<option value="Before">Before</option>
<option value="After">After</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="recurring">Recurring</label>
<select class="form-control" id="recurring" name="recurring" required="">
<option selected="" value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div name="Length-div" id="Length-div" style="display:none;">
{{ wtf.form_field(form.length)}}
</div>
<div name="Yes" id="Yes" style="display: none;">
{{ wtf.form_field(form.frequency)}}
{{ wtf.form_field(form.end)}}
</div>
I am new in jquery and I got a very few knowledge I created an input field in which jquery grab a dropdown selected values if I put only one value in setting value field its working fine as I want to grab all var value in a single //Setting Value and also want only first two letters of the selected value: like if I choose dropdown value as Morning Class I want only "MO" and same for the rest variables as Section XI Class I am looking for only XI my code is given below:
Html Code
<form id="form1" method="post" enctype="multipart/form-data">
<div class="col-md-3">
<div class="form-group">
<select id="section_id" name="section_id" class="form-control" >
<option value="XI Class">XI Class</option>
<option value="XII Class">XII Class</option>
</select>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<input id="input" name="input" placeholder=""
type="text" class="form-control " value="" /></div></div>
</div>
</form>
jquery Code
$("#class_id,section_id").on("change",function(){
//Getting Value
var selValue = $("#class_id :selected").text();
var selValue1 = $("#section_id :selected").text();
//Setting Value
$("#input").val(selValue,selValue1);
});
I'm trying to filter dropdown based on selection of first dropdown, in my console log, everything is fine, but second dropdown allways showing all results, not filtered one, here is how I did it:
<!--Group-->
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">GROUP:</label>
<div class="col-xs-9">
<select class="form-control" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="articleGroups" required (change)="filterSubById(article.mainGroup.id)" [(ngModel)]="article.mainGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="group" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
</div>
</div>
<!--Subgroup-->
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">SUBGROUP:</label>
<div class="col-xs-9">
<select class="form-control" style="width: 100%;" name="subGroup" required [(ngModel)]="article.subGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="subgroup" *ngFor="let subgroup of subGroups">{{subgroup.title}}</option>
</select>
</div>
</div>
You need to pass the outcome of the filterBySubId method back to the view. You're not doing anything with the returned value.
I'd do something like this:
filterSubById(Id) {
this.filteredSubGroups = this.subGroups.filter(item => item.parentId == Id);
}
and in view
<option [ngValue]="subgroup"
*ngFor="let subgroup of filteredSubGroups">{{subgroup.title}}</option>
I'm trying to include in the option, that if the user chooses/clicks the Other please specify option, he gets an option to give input. The characters thus input will instantly show relevant nationalities in a dropdown bar.
For a javascript function based solution for this, how can I make a call to that function in my html code or in dropdown. Thanks! :D
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
</div>
Check the below code
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code" />
</div>
Below is the full implementation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nationality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required="required">
<option></option>
<option value="" disabled="disabled" selected="selected">Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code">
</div>
<script>
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
</script>
</body>
</html>
Try this:
You need to have a listener for your select and take the action as per the selected value..
var inputLabel = $('#inputLabel');
var onOptionChange = function() {
if (this.value == 'other') {
inputLabel.fadeIn(100);
} else {
inputLabel.fadeOut(100);
}
};
$('#status').on('change', onOptionChange);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">Nationality</label>
<select name="status" id="status" required>
<option value="" disabled selected>Select your Nationality</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<label for="input" id="inputLabel" style="display: none">Other:
<input type="text" id="input">
</label>
</div>