I am trying to get the form id when an option in a drop down is selected:
HTML
<form id="test">
<select id="option1">
<option id="opt1">Hello</option>
</select>
</form>
JS:
$("#test").change(function(){
var formid=$("test").parent("form");
alert(formid);
});
The output in the alert is "object object". I have also tried closest which gives the same output.
$("#test").change(function(){
var formid=$("test").parent("form").attr('id');
alert(formid);
});
Related
Below is a small part of my data insert form.
My problem is;
The first form object is for the name of the Class room. The field is required and I wanna validate it at server side . In normal it works for sure. But since the next form object is an dropdown menu which get filled from a table of my database, the validation doesn't work. When i post it with empty class room field I get a error.
Normaly it is expected that the server side validation work and stop the posting action right ?
But it doesn't.
What do I miss here ? Thank you.
PS: The teacher field in DB is nullable and when i type something in the class room textbox the form works w/o any problem.
...
...
<div class="col-8 form-floating p-2">
<input type="text" asp-for="AddClassRoom.Class" class="form-control" />
<label asp-for="AddClassRoom.Class"></label>
<span asp-validation-for="AddClassRoom.Class" class="text-danger"></span>
</div>
<div class="col-8 form-floating p-2">
<select class="form-select" asp-for="AddClassRoom.Teacher" asp-items="#(new SelectList(Model.ApplicationUser.OrderBy(x => x.NameSurname).ToList(),"Id","NameSurname"))">
<option value="">select...</option>
</select>
<label asp-for="AddClassRoom.Teacher"></label>
<span asp-validation-for="AddClassRoom.Teacher" class="text-danger"></span>
</div>
...
...
With reference to you comment:
Error is; null parameter(source). Well this is ok, i know it. But there must be a simple way to validate an insert form who has an Database driven content dropdown menu. Post and don't get null after server side validation.
It seems that the dropdown values are not populated after posting the form. Since you have the dropdown values are coming from DB, you need to get its items again from DB after posting the form, so the razor page can fill it again.
More support can be provided if you share your backend code.
[Sample]
Here is a basic sample depending on your code;
<select class="form-select" asp-for="AddClassRoom.Teacher" asp-items="#(new SelectList(Model.ApplicationUser.OrderBy(x => x.NameSurname).ToList(),"Id","NameSurname"))">
<option value="">select...</option>
</select>
Backend:
public ActionResult OnGet() {
// ...
ApplicationUsers = GetApplicationUsersFromDb();
Return Page();
}
public ActionResult OnPost() {
// ...
ApplicationUsers = GetApplicationUsersFromDb();
Return Page();
}
I have a form which has 2 dropdowns questions.
Depending what the user answers, depends what will happen.
So for example
Are you human? The person answers yes and then another question show asking if they are employed, if they say yes to this then a sign up form will show.
If they say no to either question then some sorry cant sign you up text would show, with a form reset option ideally.
The first question seems to work fine, The issue is, it shows all messages for the second question which should be hidden until the value is selected and only one message should show.
Are you human?<br><select data-bind='value:thisSelect'>
<option value='none'>Select answer</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<p data-bind="visible:thisSelect() === 'yes'">
Are you employed?<br>
<select data-bind='value:currentSelect'>
<option value='blank'>none</option>
<option value='form'>show form</option>
<option value='sorry'>Something else</option>
</select></p>
<br><br>
<p data-bind="visible:currentSelect() === 'blank'"> </p>
<p data-bind="visible:currentSelect() === 'form'">Hello, now display the sign up form</p>
<p data-bind="visible:currentSelect() === 'sorry'">Goodbye</p>
And my Knockout JS
var testing = {
thisSelect: ko.observable()
};
ko.applyBindings(testing);
var test = {
currentSelect: ko.observable()
};
ko.applyBindings(test);
My Js fiddle is here https://jsfiddle.net/Chazlie/sdpayfo7/12/
Another version I tried is here http://jsfiddle.net/Chazlie/2exnjm4t/24/ but this just replaces the message from the first question so is not what I was hoping it would do.
Thank you
For anyone else who is struggling with the same issue, I have solved this with the following, I believe the issue was that I was trying to call the bindings twice, instead of creating one variable and controlling it all there.
Are you human?<br><select data-bind="value: selectedChoice">
<option value="none">Select answer</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<p data-bind="visible: selectedChoice() === 'yes'">
Are you employed?<br>
<select data-bind="value: currentSelect">
<option value="blank">none</option>
<option value="form">show form</option>
<option value="sorry">Something else</option>
</select></p>
<br><br>
<p data-bind="visible:currentSelect() === 'blank'"> </p>
<p data-bind="visible:currentSelect() === 'form'">Hello, now display the sign up form</p>
<p data-bind="visible:currentSelect() === 'sorry'">Goodbye</p>
<script>
var viewModel = {
selectedChoice: ko.observable("none"),
currentSelect: ko.observable("none")
};
ko.applyBindings(viewModel);
</script>
I try to develop a custom selectbox with „chosen“ (https://harvesthq.github.io/chosen/).
How can I achieve to add a single input text field ("Eigene Auflage") at the bottom of the opened select box which adds his value to the top, if someone clicks at it types something in. See image: )
Do I have to change the select/option into a ul/li ?
Here is my markup:
<select class="replace-select">
<option value="select-filled-1">Select Filled 1</option>
<option value="select-filled-2">Select Filled 2</option>
<option value="select-filled-3">Select Filled 3</option>
<option value="select-filled-4">Select Filled 4</option>
<option value="select-filled-5">Select Filled 5</option>
<option value="select-filled-6">Select Filled 6</option>
<option value="select-filled-7">Select Filled 7</option>
<option value="select-filled-8">Select Filled 8</option>
</select>
You can do this just by appending a text box to the chosen's created dropdown div, with events to add the contents of the text box to the original select. It's pretty much just a matter of using jQuery to append the box to the right element.
How it works is when you initialize chosen, it hides the select and creates a custom set of nested li's within a few divs. The dropdown div has class .chosen-drop, so you just need to use jQuery to select that element with $(".chosen-drop"), then append the text box to that using $.append(...). Your event handlers then just need to take the contents of that text box and add it to the original select.
$(document).ready(function() {
//initialize the chosen.
$("#chosenSelect").chosen({
width: "100px"
});
//append text box
$("#selectContainer .chosen-drop").append('<input class = "chosen-input"/>');
//click event for enter key
$('.chosen-input').bind("enterKey", function(e) {
//get value of text box, and add it to the select.
var newValue = $(".chosen-input").val();
//insert newValue into an option HTML with template literals
var optionHTML =`<option value="${newValue}">${newValue}</option>`;
$("#chosenSelect").prepend(optionHTML).trigger("chosen:updated");
//clear the textbox after adding to the select
$(".chosen-input").val("");
});
//watch for enter key
$('.chosen-input').keyup(function(e) {
if (e.keyCode == 13) {
$(this).trigger("enterKey");
}
});
});
.chosen-input {
width: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<div id="selectContainer">
<label>Press enter to add new item to select</label>
<br>
<select id="chosenSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
Let me know if you need an explanation of any elements in my example.
I'm trying to get the value every time the user changes the select component. But the value always returns 'undefined'.
I've been through all Stackoverflow questions and other sites, but without success. I feel like I'm missing something here.
I'm using Ember 2.8.
My component template:
<div class="form-group">
<label for="{{selectId}}">{{selectTitle}}</label>
<select name="{{selectId}}" id="{{selectId}}" class="form-control" {{action "getSelectValue" on="change" value="target.value"}}>
<option value="0" selected>{{selectDefault}}</option>
{{#each model as |choice|}}
<option value={{choice.id}}>{{choice.name}}</option>
{{/each}}
</select>
</div>
My component logic:
import Ember from 'ember';
export default Ember.Component.extend({
tagName: '',
currentValue: null,
actions: {
getSelectValue(value) {
console.log(value); //always returns undefined
}
}
});
I'm calling it like this:
{{select-control model=model.tasks selectTitle="Task" selectDefault="Choose Task" selectId="taskSelect"}}
In the template I've also used the onchange="{{action...}}" syntax, but then the action wasn't called.
At this point I have no logic in my route or controller handling this.
Thanks for your help!
<select name="{{selectId}}" id="{{selectId}}" class="form-control" {{action "getSelectValue" on="change" value="target.value"}}>
change the above line to
<select name="{{selectId}}" id="{{selectId}}" class="form-control" onchange={{action "getSelectValue" value="target.value"}}>
I'm using AngularJs to change visibility of certain DOM elements. The visibility depends on what value was selected in a dropdownlist. More specifically, on a data-attribute of the selected option tag. I cannot populate the dropdown via AngularJs, because it's an existing ASP.NET control.
I thought about using ng-change and call a method on my controller but I'd have to pass an argument. This argument is in the DOM and not in my controller. Obviously, I'd like to keep it this way, and not access the DOM in my controller.
I've made a jsFiddle, but this is my code:
HTML
<body ng-app>
<div ng-controller="VehicleDetailsCtrl">
<select ng-model="selectedValue" ng-change="update()">
<option value="1" data-carType="Car">Car 1</option>
<option value="2" data-carType="Car">Car 2</option>
<option value="3" data-carType="Truck">Truck</option>
</select>
<div ng-hide="isTruck">
Hide if a truck was selected.
</div>
</div>
</body>
Javascript
function VehicleDetailsCtrl($scope) {
$scope.isTruck = false;
$scope.selectedValue = null;
$scope.update = function() {
$scope.isTruck = !$scope.isTruck;
// hide div here?
// but then I'd need to know the selected option,
// but I don't want to reference the DOM here.
};
}
Am I approaching this in the wrong way?
Keep in mind that I cannot let AngularJs populate the select because ASP.NET already does that for me (and I can't change that at the moment).
Also, I need both the selectedValue (for post-back and saving it to the database) and the data-carType (for changing the DOM). I don't know at runtime what the id (or value) of the Truck option is.
Use a directive to create an object of vehicle types and watch the model value of the select to update your isTruck variable:
HTML:
<select ng-model="selectedValue" check-is-truck>
JS:
var app = angular.module('myApp', []);
app.directive('checkIsTruck', function(){
return function(scope, element, attrs){
scope.vehicleTypes = {};
scope.selectedType = false;
angular.forEach(element.find('option'), function(item, idx) {
scope.vehicleTypes[item.value] = item.dataset.cartype;
});
scope.$watch('selectedValue', function() {
scope.selectedType=scope.vehicleTypes[scope.selectedValue];
scope.isTruck = scope.selectedType == 'Truck'
})
};
})
function VehicleDetailsCtrl($scope) {
$scope.isTruck = false;
$scope.selectedValue = null;
}
DEMO: http://jsfiddle.net/7ttr6/2/
You don't need ng-change to update the value because ng-model takes care of that. And in ng-hide you need to simply compare the selectedValue with the value of 'Truck' option (int 3):
<select ng-model="selectedValue">
<option value="1" data-carType="Car">Car 1</option>
<option value="2" data-carType="Car">Car 2</option>
<option value="3" data-carType="Truck">Truck</option>
</select>
<div ng-hide="selectedValue==3">
Hide if a truck was selected.
</div>
Fiddle