call javascript function on asp dropdown list change - javascript

<script type="text/javascript">
function ddl(id) {
// var id = document.getElementById('<%=DDLquestionType.ClientID%>').value;
if (id == "Open") {
AmericanAnswer.style.display = 'none';
document.getElementById('Answer1_Btn').style.visibility = false;
}
alert(id);
}
</script>
<asp:DropDownList ID="DDLquestionType" CssClass="ddlQuestionType box" runat="server" AutoPostBack="True" onchange="ddl(this)" >
<asp:ListItem Text="American" Value="American"></asp:ListItem>
<asp:ListItem Text="Open" Value="Open"></asp:ListItem>
<asp:ListItem Text="Yes/No" Value="YesNo"></asp:ListItem>
<asp:ListItem Text="Numerical" Value="Numerical"></asp:ListItem>
</asp:DropDownList>
I have this java script function:
Which I try to call on drop down list selection change
It doesn't work.
I also tried
onchange="javascript:ddl()" and function without parameters,
ononchange="javascript:ddl(this);",
ononchange="javascript:ddl(this.value);",
and many others.
I'm new to java script, any links with explanations also will be highly appreciated

you dosent need to pass this parameter or id, you just call the function and onchange() event call the function.
in javascript use id of your dropdown list to get the value of dropdown list.
<script type="text/javascript">
function processchange(value)
{
if(ddl.value=="American")
// your code
}
</script>
<dropdownlist id="ddl" onchange="processchange()" >
//enter your dropdown items
</dropdownlist>

When you pass this as a parameter, you pass the DropDownList itself to the Javascript function. Therefore, you don't need to use the id to retrieve the control. You can get the value of the selected item with the value property, and you can access the items with the options array.
<asp:DropDownList runat="server" onchange="processChange(this);" ... >
function processChange(ddl) {
if (ddl.value == 'Open') {
var americanItem = ddl.options[0];
...
}
}
Since you have set AutoPostBack="true" for the DropDownList, some of the changes that you make in your Javascript function may be lost after the postback. You can try with AutoPostBack="false" to see the difference.

Related

Need to identify which textbox is used using javascript

I have four text boxes in 4 different tabs of an ASP.NET Page. I need to provide same validation message to all the text boxes. Presently I am using four different functions with same functionality. Kindly suggest a way to identify which textbox is being used make that a single funtion
Code from Commend:
<asp:TextBox ID="textBox1" runat="server" ValidationonGroup="abcd"></asp:TextBox>
<asp:CustomValidator ID="ID1" runat="server" ValidationGroup="abcd"
ControlToValidate="textBox1" ErrorMessage="message"
ClientValidationFunction="fname"></asp:CustomValidator>
--Javascript Fn--
function fname(sender, args) {
var x = document.getElementById('<%=txtBox1.ClientID%>').value;
if (some condition) {
args.IsValid = false;
} else {
args.IsValid = true;
}
}
Edit
if you are using Asp.Net then you should use like this
Aspx page code
<div>
<asp:TextBox runat="server" ID="txt1" ClientIDMode="Static" onKeyPress="javascript:text_changed(this.id);"></asp:TextBox>
</div>
JS Code
<script type="text/javascript">
function text_changed(event)
{
var id = event;
alert(id);
}
</script>
You got the textbox id in id variable and now u can get value etc using this id you are applying your conditions.... i hope this will help u

Updating of the asp.net dropdown control using javascript

In my ASP.Net default.aspx, I have dropdown list control and following javascript code
<asp:DropDownList ID="ddlGenres" runat="server" AppendDataBoundItems="True" AutoPostBack="True" DataSourceID="EntityDataSource2" DataTextField="cityID" DataValueField="cityID" OnSelectedIndexChanged="ddlGenres_SelectedIndexChanged" ClientIDMode="Static" >
<script type="text/javascript">
var ddlClientID = '<%=ddlGenres.ClientID%>';
//document.getElementById(ddlGenres)
function SetddlVal(nIndx)
{
//$("#ddlGenres")
var ddlListSelect = document.getElementById(ddlClientID);
ddlList.SelectedIndex = nIndx;
}
</script>
====================================================================
In a external javascript file, I am calling the function SetddlVal.
I debugged the code and the ddlList selectedIndex is successfully changed within the script.
=====================================================================
The issue I am facing is, when the SelectedIndex value is changed in the javascript, The ddlGenres_SelectedIndexChanged code is not being triggered.
Please let me know if I am missing anything.
Thanks
Nate
In javascript the property of an <select> input is selectedIndex not SelectedIndex.
Change your function to this:
function SetddlVal(nIndx)
{
var ddlListSelect = document.getElementById('<%=ddlGenres.ClientID%>');
ddlListSelect.selectedIndex = nIndx;
}

JQuery not returning Values from checkboxlist, returns state

please let me know what I can correct here, I'm locked in on something seemingly simple.
Using JQuery 1.6.2:
I am trying to return an array of VALUES of checked items in CheckBoxList.
Using modified examples from web I have the following, which returns an array of "on, on, on, on" (if all 4 checkboxes checked).
Shots.push($(this).prop('checked')) returns "true, true..."
Shots.push($(this).attr('Value')) returns "on, on..."
var Shots = [];
$('#cblShots').find('input[type=checkbox]:checked').each(function () {
Shots.push($(this).val());
});
if (Shots != "") {
$(Pnote).val(Shots.join(', '));
} else {
updateTips("Please select at least one item");
return false;
}
<asp:Panel ID="pnlAppointmentShotSelection" runat="server" style="display:none;">
<label>Please select which shots you would like administered</label>
<br /><br />
<asp:CheckBoxList ID="cblShots" runat="server" CssClass="ShotList">
<asp:ListItem Value="Flu">Flu</asp:ListItem>
<asp:ListItem Value="B-12">B-12</asp:ListItem>
<asp:ListItem Value="Pneumonia">Pneumonia</asp:ListItem>
<asp:ListItem Value="TDAP">Tetanus-Diptheria-Pertusis (TDAP)</asp:ListItem>
</asp:CheckBoxList>
</asp:Panel>
Acording this post is available add data-attributes to ListItem, so try add data-name attributes to each element and then, try this in javascript :
var Shots = [];
$('#cblShots').find('input[type=checkbox]:checked').each(function () {
Shots.push($(this).attr("data-name"));
});

JavaScript to Find Index of Selected Dropdown Item, Pass to Hyperlink

I am having some trouble and after quite a bit of research have been unable to find a solution. I am working in SharePoint Designer 2010 and have an ASP.net dropdown populated by a list. I want to get the index value (e.g. 1) of the selected item from the dropdown list and pass it to the URL used to bring up the EditForm.aspx page. See below, and thank you for any help you can provide!
<script type="text/javascript">
function redirect(url) {
var ddl = document.getElementById(&apos;DropDownList1&apos;);
alert("HI!");
var index = ddl.selectedIndex;
var value = ddl.options[index].value;
location.href = url + value;
return false;
}
</script>
<asp:LinkButton runat="server" id="LinkButton1"
href="https://chartiscorp.sp.ex3.secureserver.net/Lists/System_Information/EditForm.aspx?id="
onclientclick="javascript:redirect(this.href)">Edit System Info</asp:LinkButton>
<asp:DropDownList runat="server" id="DropDownList1" DataValueField="Title"
DataTextField="Title" DataSourceID="spdatasource1" />
You should use the rendered ID:
var ddl = document.getElementById('<%=DropDownList1.ClientID%>');
and the OnClientClick event of the LinkButton:
<asp:LinkButton onclientclick="...">
To get the index just use
var index = ddl.selectedIndex;
or if you want to get the value use
var value = ddl.options[ddl.selectedIndex].value;
I would suggest doing the redirect in a function, not the HTML attribute. Bringing all together:
<script type="text/javascript">
function redirect(url) {
var ddl = document.getElementById('<%=DropDownList1.ClientID%>'),
index = ddl.selectedIndex,
value = ddl.options[index].value;
location.href = url + value;
return false;
}
</script>
<asp:LinkButton runat="server" id="LinkButton1"
href="../Lists/System_Information/EditForm.aspx?id="
onclientclick="redirect(this.href)">LinkText</asp:LinkButton>
<asp:DropDownList runat="server" id="DropDownList1" DataValueField="Title"
DataTextField="Title" DataSourceID="spdatasource1" />
This jsfiddle shows a demo of the rendered output.

How to pass ID to a java script function in ASP.NET

Hi, I have following java script function:
function EnableDisableTextBox(chkBoxId, txtBoxId) {
var isChk = document.getElementById(chkBoxId);
document.getElementById(txtBoxId).disabled = !(isChk.checked);
}
When I am trying to call above function, by clicking check box its not working as expected
<asp:CheckBox ID="chkBachelors"
onclick="javascript:EnableDisableTextBox('chkBachelors','txtFirstDegree');"
runat="server" Text='<%$Resources:Resource, FirstDegree %>' TextAlign="Left"/>
<asp:TextBox ID="txtFirstDegree" CssClass="form-text" runat="server"
MaxLength="250"></asp:TextBox>
Expected Result (When user click chkBachelors check box):
if "chkBachelors" check box is checked
then enable "txtFirstDegree" text box
else
disable "txtFirstDegree" text box
What is the problem and how to solve it?
<asp:CheckBox ID="chkBachelors"
onclick="EnableDisableTextBox(this);"
runat="server" Text='' TextAlign="Left"/>
<asp:TextBox ID="txtFirstDegree" CssClass="form-text" runat="server"
MaxLength="250"></asp:TextBox>
<script language ="javascript" type="text/javascript">
function EnableDisableTextBox(checkbox)
{
var txtBoxId= "<%=txtFirstDegree.ClientID%>";
document.getElementById(txtBoxId).disabled = !(checkbox.checked);
}
</script>
<%=chkBachelors.ClientID%> and <%=txtFirstDegree.ClientID%> will give the client side ID of the Asp.Net controls .You don't need to pass them explicitly
function EnableDisableTextBox() {
var isChk = document.getElementById(<%=chkBachelors.ClientID%> );
document.getElementById(<%=txtFirstDegree.ClientID%>).disabled = !(isChk.checked);
}

Categories

Resources