I have drop-down box where users can select Yes or No, if user selects Yes from the drop-down then i want to show a confirmation box that shows Yes or No option. If only user selects Yes in the confirmation box then i want to proceed calling my other function which makes an update to the backend database. If user selects No in the confirmation box then i don't want to proceed and cancel the operation. Here is my drop-down code:
OnSelectedIndexChanged="CheckDropDownSelection"
runat="server" AppendDataBoundItems="true" Height="16px">
<asp:ListItem Text="-- Please Selet --" Value="-- Please Selet --"></asp:ListItem>
<asp:ListItem Text="YES" Value="YES"></asp:ListItem>
<asp:ListItem Text="NO" Value="NO"></asp:ListItem>
</asp:DropDownList>
here is my code behind:
protected void CheckDropDownSelection(Object sender, EventArgs e)
{
if (ddl_CloseTask.SelectedValue == "YES")
{
CloseTask();
}
else
{
}
}
protected void CloseTask()
{
// here is where i close the task
}
Read my full post regarding same : Calling Server Side function from Client Side Script
This is how you can achieve with sever and client side code
attach event of client code mostly in page_load
yourDropDownList.Attributes["onChange"] = "jsFunction(this);";
Client script
function jsFunction(mlist){
var myselect = mlist;
if(myselect.options[myselect.selectedIndex].value == "YES")
{
if(confirm("Delete item!"))
{
$.ajax({
type:"POST",
url: window.location.pathname + "/CloseTask";,
data: dataString,
contentType:"application/json; charset=utf-8",
dataType:"json",
error:
function(XMLHttpRequest, textStatus, errorThrown) {
$(errorlableid).show();
$(errorlableid).html("Error");
},
success:
function(result) {
}
}
}
});
}
}
}
serverside code
[WebMethod]
protected void CloseTask()
{
//code to close task
}
The code has too many Yes/No. I hope it won't confuse to user -
If a user selects YES in DropDownList, a Confirmation Message will be prompted.
If the user selects YES in Confirmation Message, DropDownList will post back to server.
<asp:DropDownList ID="ddl_CloseTask" Width="157px"
AutoPostBack="true"
OnSelectedIndexChanged="CheckDropDownSelection"
runat="server"
AppendDataBoundItems="true" Height="16px">
<asp:ListItem Text="-- Please Selet --" Value="-- Please Selet --"></asp:ListItem>
<asp:ListItem Text="YES" Value="YES"></asp:ListItem>
<asp:ListItem Text="NO" Value="NO"></asp:ListItem>
</asp:DropDownList>
<script type="text/javascript">
var selectlistId = '<%= ddl_CloseTask.ClientID %>',
selectlist = document.getElementById(selectlistId);
selectlist.onchange = function() {
if (selectlist.options[selectlist.selectedIndex].value == "YES") {
if (confirm("Are you sure you want to do this?")) {
__doPostBack(selectlistId, '');
}
}
};
</script>
Credit to this answer.
Updated:
If the user selects NO from the Confirmation Box, set DropDownList value to the first value.
<script type="text/javascript">
var selectlistId = '<%= ddl_CloseTask.ClientID %>',
selectlist = document.getElementById(selectlistId);
selectlist.onchange = function() {
if (selectlist.options[selectlist.selectedIndex].value == "YES") {
if (confirm("Are you sure you want to do this?")) {
__doPostBack(selectlistId, '');
} else {
// User selected NO, so change DropDownList back to 0.
selectlist.selectedIndex = 0;
}
}
};
</script>
You would want to prompt the user on the "onchange" event of your DropDownList control. You can add the call to your javascript function in the aspx markup or in the code behind. (I used the code behind in this case).
So, your code behind would look something like this:
protected void Page_Load( object sender, EventArgs e )
{
ddl_CloseTask.Attributes.Add("onchange", "return validate(this);");
}
protected void CheckDropDownSelection(object sender, EventArgs e)
{
if (ddl_CloseTask.SelectedValue == "YES")
{
CloseTask();
}
else
{
// do stuff
}
}
private void CloseTask()
{
// do stuff
}
And your aspx markup would look something like this:
<asp:DropDownList ID="ddl_CloseTask" runat="server" AutoPostBack="True" OnSelectedIndexChanged="CheckDropDownSelection">
<asp:ListItem Text="-- Please Select --" Value="-- Please Select --" />
<asp:ListItem Text="YES" Value="YES" />
<asp:ListItem Text="NO" Value="NO" />
</asp:DropDownList>
<script type="text/javascript">
function validate(ddl) {
var selected = ddl.options[ddl.selectedIndex].value;
if (selected == 'YES' && !confirm('Close the task?')) {
return false;
}
__doPostBack(ddl.id, '');
}
</script>
Related
My web form has 2 controls, drpBloodType and rbUnknownBloodType.
I need to disable the list whenever the button is checked.
I tried:
protected void rbUnknownBloodType_CheckedChanged(object sender, EventArgs e)
{
drpBloodType.Enabled = false;
}
and
<script>
$(function () {
$('#rbUnknownBloodType').change(function () {
if ($(this).is(':checked')) {
$('#drpBloodType').attr('disabled', 'disabled');
} else {
$('#drpBloodType').removeAttr('disabled');
}
});
});
</script>
but neither worked.
You need to assign change event handler to all radio-buttons in the same group as '#rbUnknownBloodType'. The change event on a radio-button does not fire when the radio-button becomes unchecked - the line
$('#drpBloodType').removeAttr('disabled');
in your code will never execute.
$(".test").change(function(){
console.log(this.value, this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="test" type="radio" name="test" value="1"/>
<input class="test" type="radio" name="test" value="2"/>
Hm, I looked at the picture in your question. Will a checkbox be better there?
If you have the following aspx markup you can do the following in code-behind. Note the usage of AutoPostBack="true" on the CheckBox.
<asp:DropDownList ID="BloodType" runat="server">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="A+" Value="A+"></asp:ListItem>
<asp:ListItem Text="A-" Value="A-"></asp:ListItem>
<asp:ListItem Text="B+" Value="B+"></asp:ListItem>
<asp:ListItem Text="B-" Value="B-"></asp:ListItem>
<asp:ListItem Text="O+" Value="O+"></asp:ListItem>
<asp:ListItem Text="O-" Value="O-"></asp:ListItem>
<asp:ListItem Text="AB+" Value="AB+"></asp:ListItem>
<asp:ListItem Text="AB-" Value="AB-"></asp:ListItem>
</asp:DropDownList>
<asp:CheckBox ID="UnknownBloodType" OnCheckedChanged="UnknownBloodType_CheckedChanged"
runat="server" AutoPostBack="true" />
Code behind.
protected void UnknownBloodType_CheckedChanged(object sender, EventArgs e)
{
//set the dll to default
BloodType.SelectedValue = "";
//cast the sender back to a checkbox and disable the dll based on it's checked status
BloodType.Enabled = !((CheckBox)sender).Checked;
}
Or the jquery solution. This saves a PostBack, but it loses the disabled state after a PostBack. %= UnknownBloodType.ClientID %> only works on the aspx page itself. If you do not want to use it then look into ClientIdMode=Static
<script>
$(function () {
$('#<%= UnknownBloodType.ClientID %>').change(function () {
var dll = $('#<%= BloodType.ClientID %>');
if ($(this).is(':checked')) {
dll.val('');
dll.attr('disabled', 'disabled');
} else {
dll.removeAttr('disabled');
}
});
});
</script>
I have login form
Login form
I want to show password when check box is checked. I write below code
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:TextBox runat="server" ID="txtPassword" Width="100%" TextMode="Password"></asp:TextBox>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:CheckBoxList runat="server" ID="showHidePassword">
<asp:ListItem Value="1" Text="Show Password"></asp:ListItem>
</asp:CheckBoxList>
</asp:TableCell>
</asp:TableRow>
And try some JQuery code
$(function(){
$("#showHidePassword").bind("click",function(){
if($(this).is(":checked")){
// then I try to remove the "TextMode=Password"
// and think may be it works but there is no method that change textmode
}
});
});
Please help.
You can try changing the type attribute on change event, you can do something like this as an example:
$(function() {
$("#showHidePassword").on("change", function() {
var checked = this.checked;
$(this).siblings('input').attr('type', function() {
return checked ? "text" : "password";
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="showHidePassword">show password
<br>
<input type="password">
Actually I use CheckBoxList and use the ID of this control. But need control of checked item. So first of all use CheckBox instead of CheckBoxList.
And write below code in head section.
$(function () {
$("#showHidePassword").bind("click", function () {
var txtPassword = $("#txtPassword");
if ($(this).is(":checked")) {
txtPassword.after('<input onchange = "PasswordChanged(this);" id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');
txtPassword.hide();
} else {
txtPassword.val(txtPassword.next().val());
txtPassword.next().remove();
txtPassword.show();
}
});
});
function PasswordChanged(txt) {
$(txt).prev().val($(txt).val());
}
That's it.
You can try this
HTML
<input class="pwd" type="password">
<input class="chk" type="checkbox">Show Password
JQUERY
$(document).ready(function() {
$('.chk').on('click', function() {
if ($('.chk').prop("checked")) {
$('.pwd').prop('type', 'text');
} else {
$('.pwd').prop('type', 'password');
}
});
});
kindly check
https://jsfiddle.net/vzuLn88j/
I was able to implement the selectbox but onchange and OnSelectedIndexChanged are not firing. Any insights?
<div class="hasJS">
<asp:DropDownList class="custom" ID="myid" runat="server" OnSelectedIndexChanged="change" OnTextChanged="change" onChange="myChange();">
<asp:ListItem>Hello</asp:ListItem>
<asp:ListItem>Hello1</asp:ListItem>
<asp:ListItem>Hello3</asp:ListItem>
<asp:ListItem>Hello4</asp:ListItem>
<asp:ListItem>Hello5</asp:ListItem>
<asp:ListItem>Hello6</asp:ListItem>
<asp:ListItem>Hello7</asp:ListItem>
<asp:ListItem>Hello8</asp:ListItem>
</asp:DropDownList>
</div>
<script type="text/javascript">
$(function () {
$("select.custom").each(function () {
var sb = new SelectBox({
selectbox: $(this),
height: 150,
width: 200
});
});
});
function myChange() {
alert("Hai");
}
</script>
set autopostback=true for DropDownList ;
<asp:DropDownList class="custom" autopostback="true" ID="myid" runat="server" OnSelectedIndexChanged="change" OnTextChanged="change" onChange="myChange();">
i just copied your code and guess what it was working fine with AutoPostBack="True",first it shows alert message then twice event was getting fired for both event.i guess you must have implemented below snippet in your code behind file.
protected void change(object sender, EventArgs e)
{
}
for the case of onChange add return to the javascript call
<asp:DropDownList ID="cbProduct" runat="server"
CssClass="common_transaction_textbox_style" onchange="return LoadProductBatchByName();" Height="23px" Width="200px">
</asp:DropDownList>
function LoadProductBatchByName() {
{
alert('test');
}
I have the following code which suppoesedly disables or enables a textbox depending on the value in a drop down list.
Now this is how I am making a reference to this code from the drop down lists:
Unfortunately, the code is generating an exception. I believe that I am using the wrong event handler, that is, OnSelectedIndexChanged. How can I remedy the situation please?
1) replace OnSelectedIndexChanged with onchange
and
2) replace
var DropDown_Total = document.getElementById("DropDown_Total")
with
var DropDown_Total = document.getElementById("<%= DropDown_Total.ClientID %>")
for all getElementById
3) replace (DropDown_Date.options[DropDown_Date.selectedIndex].value
with
(DropDown_Date.options[DropDown_Date.selectedIndex].text for both dropdown
try this it's working
<script type="text/javascript">
function DisableEnable() {
var DropDown_Total = document.getElementById("<%= DropDown_Total.ClientID %>")
var Textbox_Total = document.getElementById("<%= Textbox_Total.ClientID %>")
var DropDown_Date = document.getElementById("<%= DropDown_Date.ClientID %>")
var Textbox_Date = document.getElementById("<%= Textbox_Date.ClientID %>")
if (DropDown_Total.options[DropDown_Total.selectedIndex].text == "Any Amount") {
Textbox_Total.disabled = true;
}
else {
Textbox_Total.disabled = false;
}
if (DropDown_Date.options[DropDown_Date.selectedIndex].text == "Any Date") {
Textbox_Date.disabled = true;
}
else {
Textbox_Date.disabled = false;
}
}
</script>
html
<asp:TextBox runat="server" ID="Textbox_Total" />
<asp:TextBox runat="server" ID="Textbox_Date" />
<asp:DropDownList ID="DropDown_Total" runat="server" onchange="DisableEnable();">
<asp:ListItem>Any Amount</asp:ListItem>
<asp:ListItem>Exact Amount</asp:ListItem>
<asp:ListItem>Below Amount</asp:ListItem>
<asp:ListItem>Above Amount</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDown_Date" runat="server" onchange="DisableEnable();">
<asp:ListItem>Any Date</asp:ListItem>
<asp:ListItem>Exact Date</asp:ListItem>
<asp:ListItem>Before</asp:ListItem>
<asp:ListItem>After</asp:ListItem>
</asp:DropDownList>
Use onchange event which will work for javascript function calling. OnSelectedIndexChanged is server side event.
just replace OnSelectedIndexChanged with onchange because onchange is handled by js. OnSelectedIndexChanged is handled by code behind.
Tutorial: how to disable/enable textbox using DropDownList in Javascript
In this function we pass dropdownlist id and textbox id as parameter in js function
<script type="text/javascript">
function DisableEnableTxtbox(DropDown, txtbox) {
if (DropDown.options[DropDown.selectedIndex].text == "free") {
txtbox.disabled = true;
}
else {
txtbox.disabled = false;
}
}
</script>
Now add the following code:
<td align="center" class="line">
<asp:DropDownList ID="ddl_MonP1" runat="server" CssClass="ppup2" onchange="DisableEnableTxtbox(this,txt_MonP1);"></asp:DropDownList>
<asp:TextBox ID="txt_MonP1" runat="server" CssClass="ppup" placeholder="Subject"></asp:TextBox>
</td>
I have an asp:ListBox that contains multiple values. A user is required to always select one specific item in this box as well as optionally selecting others.
What is the best way to do this?
Thanks in advance!
I think non of the ASP.Net validators fits your requirement out-of-the-box, what you need is to use the CustomValdiator and write server and client code to perform your validation
Example:
ASPX
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function clientValidate(sender, args) {
args.IsValid = false;
$("#" + sender.controltovalidate + " option:selected").each(function (index, item) {
if ($(this).text() == "QuestionText1") {
args.IsValid = true;
return;
}
});
}
</script>
<asp:ListBox runat="server"
SelectionMode="Multiple" ID="lb" AppendDataBoundItems="false"
DataTextField="QuestionText" DataValueField="ID"
>
<asp:ListItem Text="text1" />
<asp:ListItem Text="text2" />
</asp:ListBox>
<br />
<br />
<asp:CustomValidator ErrorMessage="errormessage" ControlToValidate="lb"
ClientValidationFunction="clientValidate"
OnServerValidate="cv_ServerValidate"
runat="server" ID="cv" />
<asp:Button Text="text" runat="server" />
Code Behind
protected void cv_ServerValidate(object sender, ServerValidateEventArgs e)
{
e.IsValid = false;
foreach (ListItem item in this.lb.Items)
{
if (item.Selected)
{
if (item.Text.ToLower().Trim() == "questiontext1")
{
e.IsValid = true;
break;
}
}
}
}
What I would do is do some javascript validation on submit of the form and then do server side validation to make sure that what they submitted is valid.
You can also accomplish this with a custom validation control and then just check to make sure that the page is valid on post back.