I'm trying to trigger an onchange event, even if the value they select is the same as before. I have tried onselect, but it does not trigger at all. And onchange does not trigger if value is the same. Is there any other patterns I could use to make this possible?
#Html.DropDownListFor(m => m.SelectedMarkdownDate, Model.ValidDatesSelectList, new{onchange = "LoadGridData(this);" })
Ended up using JQuery:
var go = false;
$('#SelectedMarkdownDate').on('click',function() {//on click
if (go) {//if go
var date = $('#SelectedMarkdownDate option:selected').text();
LoadGridData(date);
go = false;//switch off
} else { go = true; }//if !go, switch on
}).on('blur', function () { go = false; });
It looks like you answered your question, however I already made a fiddle so here it is.
you can use the onClick event with blur to tell whether or not the dropdown is open, when you select the same item it gives you an alert just to demonstrate that it recognizes the event.
https://jsfiddle.net/Anon_E_Mustard/yoxs0gk8/
<script>
var dropboxOpen = false,
oldItem = null;
counter = 0;
function onClick(e) {
if (dropboxOpen) {
if (oldItem && oldItem === e.target.value) {
alert("same selected")
}
oldItem = e.target.value;
dropboxOpen = false;
}else{
dropboxOpen = true;
}
}
function onBlur(e){
dropboxOpen = false;
}
</script>
<select onclick="onClick(event)" onblur="onBlur(event)">
<option value="volvo">volvo</option>
<option value="saab">saab</option>
<option value="opel">opel</option>
<option value="audi">audi</option>
</select>
Related
I want to only allow a single checkbox to be selected inside my foreach loop, right now I can select multiple.I have a click event but this will not uncheck the other checkboxes when I make a checkbox selection. What's wrong here? Thanks
<div class="consulting-editors" data-bind="foreach: ConsultingEditors">
<input type="checkbox" name="Promote" data-bind="checked: Promote, click: $parent.promoterSelectedOnclick" /> Display as main editor
</div>
ConsultingEditors: KnockoutObservableArray<NavigatorAuthorApi> = ko.observableArray();
promoterSelectedOnclick = (selectedEditor: NavigatorAuthorApi) => {
if (this.ConsultingEditors().some(e => e.Promote)) {
this.ConsultingEditors().filter(e => e.AuthorRef != selectedEditor.AuthorRef).forEach((e) => {
e.Promote = false;
});
}
return this.ConsultingEditors();
}
export type NavigatorAuthorApi =
{
SortOrder: number,
FirmRef: number,
FirmName: string,
AuthorRef: number,
AuthorName: string,
DisplayString: string,
EditorImage: ByteString[],
Promote: boolean
}
Promote should be an observable if you want property change to reflect on the DOM.
class viewModel {
ConsultingEditors = ko.observableArray([
{ Promote: ko.observable(false), AuthorRef: 1},
{ Promote: ko.observable(false), AuthorRef: 2 },
{ Promote: ko.observable(false), AuthorRef: 3 }
]);
promoterSelectedOnclick = (selectedEditor) => {
this.ConsultingEditors().filter(e => e.AuthorRef != selectedEditor.AuthorRef).forEach((e) => {
e.Promote(false);
});
return true;
}
}
ko.applyBindings(new viewModel())
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="consulting-editors" data-bind="foreach: ConsultingEditors">
<input type="checkbox" name="Promote" data-bind="checked: Promote, click: $parent.promoterSelectedOnclick" /> Display
</div>
Two things,
You need your click function to return true otherwise the click binding will conflict with the checked binding.
Promote is being used as a boolean, but it needs to be an Observable for the UI to react to any changes to its value. Everything that the UI needs to react to has to be a knockout observable.
function viewModel(){
var self=this;
self.ConsultingEditors = ko.observableArray([
new NavigatorAuthorApi(false, 1),
new NavigatorAuthorApi(false, 2),
new NavigatorAuthorApi(false, 3)
]);
self.promoterSelectedOnclick = function(selectedEditor){
if (self.ConsultingEditors().some(e => e.Promote())) {
var others = self.ConsultingEditors().filter(e => e.AuthorRef != selectedEditor.AuthorRef);
others.forEach((e) => {
e.Promote(false);
});
}
return true;
}
}
function NavigatorAuthorApi(promote, authorRef)
{
var self = this;
self.SortOrder = null;
self.FirmRef = null;
self.FirmName = null;
self.AuthorRef = authorRef;
self.AuthorName = null;
self.DisplayString = null;
self.EditorImage = null;
self.Promote = ko.observable(promote);
}
ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="consulting-editors" data-bind="foreach: ConsultingEditors">
<input type="checkbox" name="Promote" data-bind="checked: Promote, click: $parent.promoterSelectedOnclick" /> Display as main editor
</div>
In MVC form I have a drop down list which has 3 hard coded options.
<select name="ComparisonType">
<option>select ..</option>
<option>Life</option>
<option>Income</option>
</select>
On form submit values will be saved but there need to add validation for First option. If user submit form he should see message.
Please advice how to handle it. I'm not using Model here.
Modify your html as shown:
<select name="ComparisonType">
<option value="0">select ..</option>
<option value="Life">Life</option>
<option value="Income">Income</option>
</select>
Jquery :
$('form').submit(function(e){
if($('select[name=ComparisonType]').val() == "0")
{
alert("Please select any value from dropdown");
e.preventDefault(); //or return false;
}
});
Edit :-
DEMO Link
You will have to use Javascript/Jquery to achieve this functionality as you are not using a model here. So you can work around with this code which will validate your dropdown on submitting your form. Here goes :
<script type="text/javascript">
$(document).ready(function () {
$('#submitButtonId').click(function (){
var period = $("#dropdownId option:selected").text();
if (period == "select") {
//means first option is selected.
}
else {
//some other option is selected.
}
});
});
i have five dropdown and five texbox and I'm checking on click of any of the dropdown the corresponding texbox should get enabled/disabled through javascript am using master page in asp.net
e.g: if am selecting dropdownlist1 then texbox1 should get enabled,for one textbox its working how to make it work for five textbox
function HideTextBox(ddlId) {
var ControlName = document.getElementById(ddlId.id);
if (ControlName.value == 0)
{
document.getElementById('<%=txtComment1.ClientID%>').disabled = true;
}
else {
document.getElementById('<%=txtComment1.ClientID%>').disabled = false;
}
}
You can use JQuery, it is better way. Set two class to each textBox, first .textBox1 .myTexts,
the first class must include an id for text boxes. Such as .textBox1, .textBox2 ect. And your dropbox value must include just text box's id.
$(document).ready(function(){
$("#dropBoxID").change(function(){
$(".myTexts").attr('disabled','disabled');
$(".textBox"+$(this).val()).removeAttr("disabled")
});
});
try this
http://jsfiddle.net/3WJtM/
function HideTextBox(ddlId) {
var ControlName = document.getElementById(ddlId.getAttribute("id"));
var idTxt = ControlName.getAttribute("txt");
if (ControlName.value == 0)
{
document.getElementById(idTxt).disabled = true;
}
else {
document.getElementById(idTxt).disabled = false;
}
}
on every object select, add an attribute txt with the name of te input text
In the javascript you search this textbox for enabled or disabled
for example
<select id="ddl1" txt="txt1" onchange="HideTextBox(this);" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="input" id="txt1" disabled/>
I'm having a problem with my JavaScript code having moved it over to a content page in ASP.
It worked perfectly on a stand alone page.
<script type="text/javascript">
function validateQ12(oSrc, args) {
var rbtnList = document.getElementsByName('rbtn12');
var noClicked = false;
for (var i = 0; i < rbtnList.length; i++) {
if (rbtnList[i].checked) {
noClicked = rbtnList[i].value == "No";
break;
}
}
if (noClicked) {
args.IsValid = true;
}
else
args.IsValid = args.Value.trim().length > 0;
}
</script>
I have gone through the html on both pages, on the one that worked had
<input id="rbtn12_1" type="radio" name="rbtn12" value="No" checked="checked" onclick="Q12iNo();">
The new one inside a content page has
<input id="MainContent_rbtn12_1" type="radio" name="ctl00$MainContent$rbtn12" value="No" checked="checked" onclick="Q12iNo();">
Clearly the name change must be causing the problem. How do I reference this new name in my javascript code?
To get the rendered element name use the following:
<%= rbtn12.UniqueID %>
However in your case this may still not work as it looks like you need to loop through each radio button item.
See the following post:
Find out if radio button is checked with JQuery?
Which shows how to determine if a radio button collection has a selected value.
Can you possibly add a className to your control and use getElementByClassName?
<input id="MainContent_rbtn12_1" type="radio" name="ctl00$MainContent$rbtn12" value="No" checked="checked" onclick="Q12iNo();" CssClass="Radio">
<script type="text/javascript">
function validateQ12(oSrc, args) {
var rbtnList = document.getElementsByClassName('Radio');
var noClicked = false;
for (var i = 0; i < rbtnList.length; i++) {
if (rbtnList[i].checked) {
noClicked = rbtnList[i].value == "No";
break;
}
}
if (noClicked) {
args.IsValid = true;
}
else
args.IsValid = args.Value.trim().length > 0;
}
</script>
My goal I need to select the second option.
I've tried following approach and can't set selected value. No error shows up, the selection just doesn't happen. Being very familiar with HTML myself, I know that "selected" and 'selected="selected"' work but not sure why it's not working with my C# code. What could be wrong?
webBrowser1.Document.GetElementById("field_gender1").
Children[1].SetAttribute("selected", "selected");
The HTML is
<select name="gender1" id="field_gender1" class="select">
<option selected="selected" value="1">val1</option>
<option value="2">val2</option>
</select>
Do this from WebBrowser_DocumentComplete(...)
var htmlDocument = webBrowser1.Document as IHTMLDocument2;
if (htmlDocument != null)
{
var dropdown = ((IHTMLElement)htmlDocument.all.item("field_gender1"));
var dropdownItems = (IHTMLElementCollection)dropdown.children;
foreach(IHTMLElement option in dropdownItems)
{
var value = option.getAttribute("value").ToString();
if(value.Equals("2"))
option.setAttribute("selected", "selected");
}
}
Your code should be working if it's at a suitable place, eg: button1_Click event, webBrowser1_DocumentCompleted event, etc.