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/>
Related
I'm trying to do this all in C# but I may have to resort to JavaScript.
I have a dropdown that I want to do an onchange event. I can't bind the dropdown to the model as binding prevents the use of onchange. I need to use the onchange event to modify some things on the screen depending on what is selected. Maybe some code will help.
<select id="BrandSelected" #onchange="BrandIsChanged">
<option value="NewBrand">--Create New Brand--</option>
#foreach (var brand in Brands)
{
if(Model.BrandID == brand.BrandID)
{
<option value="#brand.BrandID" selected>#brand.Brand</option>
}
else
{
<option value="#brand.BrandID">#brand.Brand</option>
}
}
</select>
<label id="BrandLabel" hidden>New Brand</label>
<InputText id="NewBrandInput" #bind="NewBrandProp" hidden></InputText>
So I'm adding the option at the top to create a new brand. This is an upsert so it's possible one of the brands may already be selected. It will still be changeable on update. It works if the user selects any of the existing brands but I want to be able to add a new brand if it does not exist in the dropdown. If in the BrandIsChanged method, the NewBrand has been selected, then I want to create a new brand with the value in the InputText. This means I will have to modify both the label and the InputText to be visible onchange if the selected value is NewBrand. So, how can I determine in the BrandIsChanged method what the selected item (BrandSelected) value is?
Other things that might be helpful:
#code{
//Populated on load in a method
private IEnumerable<T_IFS_BrandDTO> Brands { get; set; } = new List<T_IFS_BrandDTO>();
//The new brand, if user decides to enter one.
private string NewBrandProp { get; set; }
}
The onchange event passes ChangeEventArgs parameter to your event handler which you can use to get the selected value.
<select id="BrandSelected" #onchange="BrandIsChanged">
...
</select>
#code {
private BrandIsChanged(ChangeEventArgs args)
{
if (args?.Value?.ToString() == "NewBrand")
{
// do stuff
}
}
}
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>
On my c# mvc page, I have several dropdown boxs displayed on the page, I'm using media query to render the view differently for print and screen.
My question is that is there a way (using CSS) to hide ALL the dropdown boxs if the selected option value is "". (the text for that value is '< Select >').
So that when printing, the following will be printed:
Title
Instead of:
Title < Select >
Just want to make it more clear,
if the selected option is not "" then I do need to display it when printing,
so the following:
Title Mr
will display as the same when printing as:
Title Mr
Here is one of my dropdown:
<select id="Alias_Title" name="Alias.Title">
<option value="">< Select ></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
</select>
Don't know whether this is achievable or not with CSS, if not, can it be done by Jquery?
Thanks
You can use $.fn.filter() to find all the select whose value is "" then add a hidden class
$(function () {
$('select').filter(function () {
return $(this).val() == "";
}).addClass('hidden');
});
Add a CSS class
.hidden{
display: none !important;
}
CSS for print (from BootStrap)
#media print {
.visible-print-block {
display: block !important;
}
}
#media print {
.hidden-print {
display: none !important;
}
}
Elements with hidden-print CSS class are not visible for printing.
Code:
<select id="Alias_Title" name="Alias.Title" class="hidden-print">
<option value="">< Select ></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
</select>
<script type="text/javascript">
$(function () {
$('select').change(function () {
if (!$(this).val()) {
$(this).addClass('hidden-print');
} else {
$(this).removeClass('hidden-print');
}
});
});
</script>
Using jquery, you can write like this.
if($('#Alias_Title').val().length == 0) { // int value
$('#Alias_Title').hide();
}
The following solution is a combination of #Satpal and #General-Doomer 's answer to the question.
Script
<script type="text/javascript">
$(function () {
$('select').filter(function () {
return $(this).val() == "";
}).addClass('hidden-print');
$('select').change(function () {
if ($(this).val() == "") {
$(this).addClass('hidden-print');
} else {
$(this).removeClass('hidden-print');
}
});
});
</script>
CSS class:
.hidden-print{
display: none !important;
}
The filter() function works for when user try to print the page without touch any of the dropdown boxs.
The change() function works for when user try to print the page after changing the value of dropdown box.
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.
}
});
});
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.