I am using Boostrap 3 and want to AJAX post a form created with Boostrap 3, but am having issues in obtaining the value of my drop down menu within a modal.
Generated HTML
<div class="modal in" id="UploadCsv" tabindex="-1">
...
<div class="form-group">
<label class="col-sm-4 control-label" for supplier Sku">SKU</label>
<div class="col-sm-6">
<select class="form-control" name="supplierSku" id="supplierSku>
<option value="1">Name</option>
<option value="2">Form</option>
...
<select class="form-control" name="form" id="form>
<option value="1">Name</option>
<option value="2">Form</option>
...
JS
$('input, select'). $('#UploadCsv')).each(function() {
data[$(this).attr('name')] = $(this).attr('value');
});
If I look at data in the console I have
supplierSku: undefined
form: undefined
despite selecting the option from the drop down. Jquery is picking up the name of the form group, but not teh value.
Based on my selection I would have expected to see supplierSku: 1 etc. Any suggestions on how to pick up the value for the selected drop down in jquery?
Looks like you forgot the closing quotes for both select id's:
<div class="modal in" id="UploadCsv" tabindex="-1">
...
<div class="form-group">
<label class="col-sm-4 control-label" for supplier Sku">SKU</label>
<div class="col-sm-6">
// Closing quotes on id attribute
<select class="form-control" name="supplierSku" id="supplierSku">
<option value="1">Name</option>
<option value="2">Form</option>
...
// Closing quotes on id attribute
<select class="form-control" name="form" id="form">
<option value="1">Name</option>
<option value="2">Form</option>
...
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.
currently i'm working on a angular project and i'm facing some issue in creating multiple select dropdown with dynamic data.
I want the to acheive something like this. There will be one button which when clicked will add multiple select dropdown in the form and that select dropdown will have dynamic data fetched from api.
The above thing is already acheived but the problem that i'm facing is that all the dynamic select dropdown had same ng-model and same name, so when i'm selecting value for one select dropdown, the same value is getting selected for all the dynamic select dropdown.
Attaching the screenshot for referrence
Now when i select any single dropdown, all the value for other dropdown are getting selected as well.
I hope i'm able to explain as much as possbile.
The code i used to add multiple dropdown
<div class="pull-right"><button (click)="addNewRow()" class='btn btn-success'>Add New Subjects</button></div>
This html is added dynamically in the form
<div class="row" *ngFor="let ts of total_subjects; let i=index">
<div class="col-4">
<div class="mb-3">
<label class="form-label" for="Status">Select Subject</label>
<select class="form-select digits" id="subject_id" name="subject_id" [(ngModel)]="form.subject_id"
required
#subject_id="ngModel" (change)="getChapter(subject_id.value)">
<option value="">Select Subject</option>
<option *ngFor="let sub of subjectList" value="{{sub.subject_id}}">{{sub.name}}</option>
</select>
</div>
</div>
<div class="col-4">
<div class="mb-3">
<label class="form-label" for="Status">Select Chapters</label>
<select class="form-select digits" id="chapter_id" name="chapter_id" [(ngModel)]="form.chapter_id"
required
#chapter_id="ngModel" >
<option value="">Select Chapter</option>
<option *ngFor="let chap of chapterList" value="{{chap.subject_id}}">{{chap.name}}</option>
</select>
</div>
</div>
<div class="col-3">
<div class="mb-3">
<label class="form-label" for="questions">No of Questions</label>
<input class="form-control" id="questions" type="number" name="questions" [(ngModel)]="form.questions"
required
#questions="ngModel" />
</div>
</div>
<div class="col-1"><button (click)="removeRow(i)" class='btn btn-danger'>Remove</button></div>
</div>
Here is the component code i used
total_subjects:any = [{
subject:'',
chapter:'',
questions:''
}];
addNewRow(): void{
this.total_subjects.push({
subject:'',
chapter:'',
questions:''
});
}
I don't really like to work with ngmodel when it is something complex, but in any case, I would try to give them in runtime a different name to each row, based on the index.
If you had left a StackBlitz with your current code worling, I would have tried to change it in your code to prove that it works, but more or less it consists of something like this:
<div class="row" *ngFor="let ts of total_subjects; let i=index">
<div class="col-4 mb-3">
<label class="form-label" for="Status">Select Subject</label>
<select
class="form-select digits"
id="subject_id_{{i}}"
name="subject_id_{{i}}"
[(ngModel)]=`form.subject_id_${i}`
required
#subject_id_{{i}}="ngModel"
(change)=`getChapter(subject_id_${i}.value)`>
<option value="">Select Subject</option>
<option *ngFor="let sub of subjectList,let i2 as index" value="{{`sub.subject_id_${i2}}">{{sub.name}}</option>
</select>
</div>
Note that you will have to play with the sintaxis {{ index}} and ${index} (backtips), depending on the case...
I hope this idea helps you.
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 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