Develop Reference

How to update database when switch toggle is changed in asp.net c#

I have page where switch toggle is used and when toggle is switched to on and off update value in database.
<div class="card rounded" style="margin-bottom: 20px">
<asp:Image ID="coverpic" runat="server" CssClass="card-img" Height="500" AlternateText="Cover Picture" />
<div class="card-img-overlay card-inverse social-profile d-flex " style="top: auto">
<div class="align-self-center rounded" style="margin: auto">
<asp:Image ID="profilepic" runat="server" CssClass="img-circle" Height="100" Width="100" AlternateText="Profile Picture" />
<h4 class="card-title">
<asp:Label ID="fullname" runat="server"></asp:Label></h4>
<h6 class="card-subtitle">
<asp:Label ID="unametop" Font-Size="Large" runat="server"></asp:Label></h6>
<div class="switch">
<label>
User
<input id="userrole" type="checkbox" runat="server"><span class="lever switch-col-red"></span>Admin</label>
</div>
</div>
</div>
</div>
As you can see input checkbox with switch class is used, when i turn switch on i want to update user role in database to admin and when switch is turned off i want to update user role to normal user. Please help if you can.

By design the input control doesn't have a click event, so in my opinion the most elegant way to do it is with jQuery, if you're using it. See this answer.
Alternatively you could do something like this:
<script>
function triggerpostback(obj) {
//check if textbox is readyonly
if (obj.readOnly) {
__doPostBack('Button', "");
}
}
</script>
<asp:Button ID="Button" runat="server" Text="Button" OnClick="Button_Click" style="display:none" />
<input id="userrole" type="checkbox" runat="Server" onclick="triggerpostback(this)" />
Code-behind:
protected void Button_Click(object sender, EventArgs e)
{
// Add the code to update user role in database
}

jQuery/asp.net - Enable/Disable button only after user enters text in the textboxes and selects a value from the dropdown list

This is the aspx code for the controls The feature that I want over here is that when I enter the value for the textboxes and select a dropdown value.. only after that should the button be enabled else the button should be disabled.
<div id="div1" class="panel-collapse collapse in">
<div class="form-inline">
<div class="form-group">
<label class="control-label">Part Number:</label>
<asp:TextBox type="text" class="form-control" ID="itemOne" runat="server" />
</div>
<div class="form-group">
<label>Name:</label>
<asp:TextBox type="text" class="form-control" ID="itemTwo" runat="server" />
</div>
<div class="form-group">
<label>Price:</label>
<asp:TextBox type="text" class="form-control" ID="itemThree" runat="server" />
</div>
<div class="form-group">
<label>Weight:</label>
<asp:TextBox type="text" class="form-control" ID="itemFour" runat="server" Style="width: 100px" />
</div>
<div class="form-group">
<label>Quantity:</label>
<asp:TextBox type="text" class="form-control" ID="miscItemQuantity" runat="server" Style="width: 80px" />
</div>
<div class="form-group">
<asp:DropDownList ID="dropdownList" CssClass="form-control" runat="server" Width="150" />
<%-- Items are added dynamically from the codebehind --%>
</div>
<asp:Button runat="server" ID="addItem" type="submit" Text="Add Item" CssClass="btn btn-primary pull-right"></asp:Button>
</div>
</div>
This is the jQuery code that I have tried to enable and disable the button with just one textbox
$(document).ready(function () {
$("#<%=itemOne.ClientID%>").keyup(function () {
if ($(this).val().length > 2) {
$("#<%=addItem.ClientID%>").removeAttr('disabled');
}
else {
$("#<%=addItem.ClientID%>").attr('disabled', 'disabled');
}
}).trigger('keyup');
});
I will be very glad to receive any solutions.

I think you are looking for something like this. First add a listener to each TextBox and DropDownList in div1 to check for changes. Then validate all controls withing the div for the correct values and set the button visibility accordingly.
<script type="text/javascript">
$(document).ready(function () {
$("#div1 input[type='text']").keyup(function () {
checkValues();
});
$("#div1 select").change(function () {
checkValues();
});
checkValues()
});
function checkValues() {
var isValid = true;
$("#div1 input[type='text']").each(function () {
if ($(this).val().length < 2) {
isValid = false;
}
});
$("#div1 select").each(function () {
if ($(this).prop('selectedIndex') === 0) {
isValid = false;
}
});
if (isValid) {
$("#<%=addItem.ClientID%>").removeAttr('disabled');
}
else {
$("#<%=addItem.ClientID%>").attr('disabled', 'disabled');
}
}
</script>

Cant get text from textbox

So, I need to get a string from a textbox to use in a backend program, but I'm unable to get it when im one the site, however it works if i set Text="Test1" prior, even though i change the text in the textbox, "Test1" always gets sent to to my function and works! (Talking about Box3)
Code to the text boxes below
<div class="row">
<form action="#" method="post" class="contact-form">
<div class="col-md-4 col-sm-6">
<asp:TextBox ID="Box3" Text="Test1" runat="server" placeholder="Gamepin..."></asp:TextBox>
</div>
<div class="col-md-4 col-sm-6">
<asp:TextBox ID="Box2" runat="server" placeholder="Name ..."></asp:TextBox>
</div>
<div class="col-md-4 col-sm-12">
<asp:TextBox ID="Box1" runat="server" placeholder="Amount ..."></asp:TextBox>
</div>
<div >
<asp:CheckBox ID="CheckBoxREPLY" runat="server" style="vertical-align: central" Text="YesNo" TextAlign="Left" />
</div>
<div class="col-md-12 col-sm-12">
<input type="button" runat="server" onserverclick="Funcactivate" class="button big green" value="Launch!"/>
</div>
</form>
</div>
And my code to get textbox.text
protected void Funcactivate(object sender, EventArgs e)
{
//Get textbox(s)
string Game = Box1.Text;
string Namepref = Box2.Text;
string Amount = Box3.Text;
}

Changing your button could work.
<asp:Button ID="btnLaunch" runat="server" Text="Launch!" class="button big green" OnClick="Funcactivate" CausesValidation="False"/>

If you are using web forms, you should be able to capture the text box entry in the "if(!IsPostBack){...}" event and set it to a variable and use it in your "Funcactivate" method.
Hello Sleepwalker, here is a code sample that works for me, I am not using the isPostBack. I am also using an asp:button Instead of using an HTML input control.
<div>
<asp:TextBox ID="txtBox1" runat="server"></asp:TextBox>
</div>
<div>
<asp:TextBox ID="txtBox2" runat="server"></asp:TextBox>
</div>
<div>
<asp:TextBox ID="txtBox3" runat="server"></asp:TextBox>
</div>
<div>
<asp:Button ID="btnSubmit" runat="server" Text="Button" OnClick="btnSubmit_Click" />
</div>
protected void btnSubmit_Click(object sender, EventArgs e)
{
string game = this.txtBox1.Text.ToString();
string Namepref = this.txtBox2.Text.ToString();
string Amount = this.txtBox3.Text.ToString(); //box3;
}

I fixed it by moving my form to only get the < asp:X, because i discovered that if the < asp:x was nested too deep within a ton of divs, it didnt work properly.
It may have been due to something else, but it worked for me.

Trying to enable show/hide feature in asp.net

I am trying to enable show/hide password feature. I am creating an asp.net web form using C#.
My code is as below,
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class show : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
if (CheckBox1.Checked == false)
{
TextBox1.TextMode = TextBoxMode.Password;
}
if (CheckBox1.Checked == true)
{
TextBox1.TextMode = TextBoxMode.SingleLine;
}
}
}
On mypage.aspx,
there is a checkbox whose autopostback property is true and a textbox whose textmode is password.
The expected result is:-
show password into text when checkbox is checked.
hide password when checkbox is unchecked.
The problem is :-
This code is working only once i.e. it is not being executed when checkbox is checked or unchecked again.
The textbox becomes blank.
Please help me soon.

You are losing value within TextBox because on selection change, the page loads again, you need to check whether its a postBack or first time load and set the textBox value.
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
string Password = TextBox1.Text;
TextBox1.Attributes.Add("value", Password);
}
}
Your problem will be solved. I've tested it.
Hope it helps!

There's exactly zero need to use a postback for this. An example using jQuery:
Markup:
<label>Password fields are just a UI convenience:</label>
<input type="password" id="password" value="super secret password" />
<label>
<input type="checkbox" id="toggle-password" /> Toggle
</label>
jQuery code:
$(function() {
$('#toggle-password').on('change', function(e) {
var _this = $(this);
if (_this.is(':checked')) {
$('#password').attr({
'type': 'text'
});
} else {
$('#password').attr({
'type': 'password'
});
}
})
});
A vanilla JS version:
var toggle = document.getElementById('toggle-password');
var textbox = document.getElementById('password');
toggle.addEventListener("click", function() {
var isChecked = toggle.checked;
if (isChecked) {
textbox.type = "text";
} else {
textbox.type = "password";
}
})

You can't set the text property of a Password Type field for security reasons.So another way to set the value after changing mode is
if (CheckBox1.Checked == false)
{
string pass = TextBox1.Text;
TextBox1.TextMode = TextBoxMode.Password;
TextBox1.Attributes.Add("value", pass);
}
if (CheckBox1.Checked)
{
TextBox1.TextMode = TextBoxMode.SingleLine;
}

<head runat="server">
<title>Show Hide Password</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#show_password').hover(function show() {
//Change the attribute to text
$('#txtCurrentpassword').attr('type', 'text');
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
},
function () {
//Change the attribute back to password
$('#txtCurrentpassword').attr('type', 'password');
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
});
//CheckBox Show Password
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#show_password1').hover(function show() {
//Change the attribute to text
$('#txtNewPassword').attr('type', 'text');
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
},
function () {
//Change the attribute back to password
$('#txtNewPassword').attr('type', 'password');
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
});
//CheckBox Show Password
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#show_password2').hover(function show() {
//Change the attribute to text
$('#txtConfirmPassword').attr('type', 'text');
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
},
function () {
//Change the attribute back to password
$('#txtConfirmPassword').attr('type', 'password');
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
});
//CheckBox Show Password
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<br />
<br />
<br />
<div class="col-md-10">
<div class="" style="display: none" runat="server" id="divStatusMsg">
<asp:HiddenField ID="lblLoginUserId" runat="server" />
<asp:HiddenField ID="HidEncrptedPWD" runat="server" />
<asp:HiddenField ID="HidCurrEncrptedPWD" runat="server" />
<asp:HiddenField ID="hidError" runat="server" />
</div>
</div>
<h2>Update Password</h2>
<label class="col-form-label" style="color: red">(Min 10 Character including 1 Upper, 1 Lower Charcter, 1 Numeric & 1 Special Character)</label>
<div class="row">
<div class="col-md-6">
<label>User Name</label>
<div class="input-group">
<asp:TextBox ID="txtUserName" TextMode="SingleLine" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Current Password</label>
<div class="input-group">
<asp:TextBox ID="txtCurrentpassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<button id="show_password" class="btn btn-primary" type="button">
<span class="fa fa-eye-slash icon"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>New Password</label>
<div class="input-group">
<asp:TextBox ID="txtNewPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<button id="show_password1" class="btn btn-primary" type="button">
<span class="fa fa-eye-slash icon"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Re-Enter Password :</label>
<div class="input-group">
<asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<button id="show_password2" class="btn btn-primary" type="button">
<span class="fa fa-eye-slash icon"></span>
</button>
</div>
</div>
</div>
</div>
<br />
<!--Button Region-->
<div class="row">
<div class="col-lg-6 text-right" id="divDateSearch">
<div class="form-group">
<button type="button" id="btnSave" runat="server" class="btn btn-success btn-border btn-sm" onserverclick="btnSave_click">Change</button>
<button type="button" id="btnReset" runat="server" class="btn btn-default btn-border btn-sm" onserverclick="btnReset_click">Reset</button>
</div>
</div>
</div>
<!--Button Region-->
</div>
</form>
</body>

Microsoft JScript runtime error: Object expected thrown when called from codebehind

I am using jquery ui tabs and tooltip and it works perfectly.Heres the code for jquery-ui tabs
$(function() {
$( "#tabs" ).tabs();
$(document).tooltip();
});
I wrote another function which i want to call from code behind on button click event
function setDiv(type){
alert(type);
}
Heres my codebehind function.
protected void btnNext_Click(object sender, EventArgs e)
{
pnlResult.Visible=True;
ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "script type='text/javascript' language='javascript'",
"setDiv('highlight')();", true);
}
The problem is when i click the btnNext button ,alert saying highlight is showing.After that i am getting the object expected error on the aspx page and the error points on
<div id="tabs-1">(div used for creating tabs)
Here's my aspx page
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">//Here's where i am getting the error
<p>
<asp:Panel ID="pnlResult" runat="server" Visible="false">
<div id="divResult" runat="server">
<span id="spIcon" style="float:left;margin-left:3px;"></span>
Successfully inserted
</div>
</asp:Panel>
<table style="width:50%" id="tbl" runat="server" >
<tr>
<td>
Your Name:
</td>
<td>
<input id="name" title="Enter your name here" />
</td>
</tr>
<tr>
<td >
<span class="ui-icon ui-icon-alert" style="float:left;margin-left:3px;"></span>
<input type="button" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
</p>
</div>
<div id="tabs-2">
<p>Tab2.</p>
</div>
<div id="tabs-3">
<p>Tab3.</p>
<p>Tab is placed.</p>
</div>
</div>

Your script that you are building in your code behind is malformed, try this:
ScriptManager.RegisterClientScriptBlock(
Page,
typeof(Page),
"setDiv",
"<script type='text/javascript'>setDiv('highlight');</script>",
false);