Develop Reference

Show/Hide Password ASP.NET

I am trying to implement a show/hide button in ASP.NET, and through some research I have discovered that using AJAX could be my best bet. I have been trying to understand AJAX, but I am clearly doing something wrong as the code does nothing.
I am trying to put this code in the body of my code, it is essentially the same code as that found on https://www.c-sharpcorner.com/blogs/show-and-hide-password-using-jquery-in-asp-net
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("<%=showP.ClientID %>").hover(function show() {
//Change the attribute to text
$("<%=txtPassword.ClientID %>").attr('type', 'text');
$("<%=showP.ClientID %>").removeClass('eyeOpen').addClass('eyeClosed');
},
function () {
//Change the attribute back to password
$("<%=txtPassword.ClientID %>").attr('type', 'password');
$("<%=showP.ClientID %>").removeClass('eyeClosed').addClass('eyeOpen');
});
//CheckBox Show Password
$("<%=showP.ClientID %>").click(function () {
$("<%=txtPassword.ClientID %>").attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
Do I need to implement the AJAX CSS files for the script to function? The link above makes use of them, but I did not implement any of the styles myself, so I figured I could leave out a link to the stylesheets like this below:
<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">
I really do not have any of knowledge of AJAX, so any help would be greatly appreciated :)

for the working demo, I used the HTML element you can do the same with the Asp.Net element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Enter password</h3>
<input id="txtPass" class="test" type="password"></input>
<br />
<br />
show <input type="checkbox" name="mycheckbox" id="ckShowPass" onclick="myshowp(this)"/>
<script>
function myshowp(e) {
txtBox = $('#txtPass')
if (e.checked) {
txtBox.attr("Type", "Text");
}
else {
txtBox.attr("Type", "Password");
}
}
</script>

Well, no, you don't need anything really special here. jQuery DOES help, and you can do it this way:
<h3>Enter password</h3>
<asp:TextBox ID="txtPass" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
<br />
<br />
<asp:CheckBox ID="ckShowPass" runat="server" Text="Show password" onclick="myshowp()" />
<script>
function myshowp() {
ckbox = $('#ckShowPass')
txtBox = $('#txtPass')
if (ckbox.is(':checked')) {
txtBox.attr("Type", "Text");
}
else {
txtBox.attr("Type", "Password");
}
}
</script>
Output:
And if we check the box show password, then we get:
So, the above DOES use jQuery, and that is useally installed for you.
You can also use pure JavaScript, but the Text mode is read only, and thus you have to make a copy of the control - which is painful.

Why button doesnt fire javascript function

I have no idea why the button click function is not firing in Javascript, am I missing something? I tried:
aspx.page
<input type="button" id="tglBtn" onclick="changeName(this) " runat="server" />
or
<input type="button" id="tglBtn" OnClientClick="changeName(this);" runat="server" />
or
<input type="button" id="tglBtn" OnClientClick="changeName(this);return false;" runat="server" />
Javascript
function changeName(obj) {
alert("hey");
if ($(obj).attr("Value") == "Open") {
$(obj).val("Close");
}
else {
$(obj).val("Open");
}
}

Actually it work so fine to me.
Here is my code:
<script src="js/jquery.min.js" type="text/javascript"></script>
<input type="button" id="tglbtn" onclick="changeName(this)" runat="server" />
<script type="text/javascript">
function changeName(obj) {
alert("hey");
if ($(obj).attr("Value") == "Open") {
$(obj).val("Close");
}
else {
$(obj).val("Open");
}
}
</script>
Do you have jQuery? If you dont have just add a jQuery..

I think you made a mistake... now try this...
<asp:Button id="tglBtn" OnClientClick="return changeName()" runat="server"><asp>

The OnClientClick is work on asp.net controls (not on html controls that you have apply the run on server).
So the first line is only left.
<input type="button" id="tglBtn" onclick="changeName(this) " runat="server" />
This line is run, but at the same time you make Post Back, so you probably not have the time to see the results of javascript. Of course you may have some other javascript bugs, if you open your browser console you can see if the javascript runs with out errors.

Use ASP:Button instead.
see below code
<asp:Button runat="server" id="tglBtn" onclientclick="return changeName()" Text="submit" />
//in head section
<script language="Javascript">
function changeName()
{
alert("I am in function");
document.getElementById("tglBtn").value = "New name";
return false;
}
</script>
it will resolve your issue

.NET ClientSide RequiredFIeldValidator with Bootstrap "has-error" Class

I'm working on a legacy .NET WebForms project where the front-end is being updated with Bootstrap.
There are some .NET Validation Controls which are validating on the ClientSide, but the "has-error" class needs to be added to the parent div of the input fields to match the Bootstrap markup.
Is there an event hook or a way of extending the .NET Validators so that I can add the "has-error" class to an invalid control group and remove it when valid?
e.g: Here is my markup which works server side:
<div class="form-group <%= IIf(RequiredFieldValidator1.IsValid, "has-error", "") %>">
<label class="control-label">Test</label>
<asp:TextBox runat="server" ID="TextBox1" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1"
ContolToValidate="TextBox1" ErrorMessage="TextBox1 is Required!" />
</div>

I was requiring the has-feedback class on the form-group div as well as the glyphicon tick and crosses depending on whether the input was valid or not. What I have found that works in my solution is to override asp.net's client side function ValidatorUpdateDisplay (note my code utilizes jQuery although you could use native JavaScript):
var originalValidatorUpdateDisplayMethod;
if (typeof(ValidatorUpdateDisplay) == "function"
&& typeof(originalValidatorUpdateDisplayMethod) != "function") {
originalValidatorUpdateDisplayMethod = ValidatorUpdateDisplay;
// now overwrite original method
ValidatorUpdateDisplay = function (val) {
originalValidatorUpdateDisplayMethod(val); // call original method first
var parent = $("#" + val.controltovalidate).parent();
if (parent.hasClass("form-group")) {
parent.addClass("has-feedback");
parent.toggleClass("has-success", val.isvalid);
parent.toggleClass("has-error", !val.isvalid);
var glyph = parent.find("span.form-control-feedback");
if (glyph.length == 0) {
glyph = $("<span class='glyphicon form-control-feedback' />");
parent.append(glyph);
}
glyph.toggleClass("glyphicon-ok", val.isvalid);
glyph.toggleClass("glyphicon-remove", !val.isvalid);
}
}
}
This adds the bootstrap validation to fields when they change as well as when an event on a control that has causesvalidation="true" is triggered.
Note: this is only adding the validations on the client side.

You'll need to put a id on the element
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
and this is the javascript which adds a class to a <div> element
var d = document.getElementById("div1");
d.className = d.className + " otherclass";

Here is what I did:
<asp:Panel ID="pnlNumberOnly" runat="server" CssClass="form-group">
<label for="<%= tbNumberOnly.ClientID %>" class="control-label">Enter a number:</label>
<asp:TextBox ID="tbNumberOnly" runat="server" CssClass="form-control" />
<asp:RegularExpressionValidator runat="server" ID="regExpNumberOnly"
ControlToValidate="tbNumberOnly"
Display="Dynamic"
ErrorMessage="Numbers only" CssClass="control-label"
ValidationExpression="^\d+$" EnableClientScript="True"/>
</asp:Panel>
and then my js looked like this:
$(document).ready(function() {
$('#<%= tbNumberOnly.ClientID %>').change(function() {
if ($('#<%= regExpNumberOnly.ClientID %>').is(':visible')) {
$('#<%= pnlNumberOnly.ClientID %>').addClass('has-error');
} else {
$('#<%= pnlNumberOnly.ClientID %>').removeClass('has-error');
}
});
});

JavaScript to display asp:TextBox based on selected option

I just recently started developing some parts of the ASP.NET project but I have very little experience of it. The problem is pretty much as described in a title of this question and here goes the code:
<script type="text/javascript" src="/scripts/hide.fields.js"></script>
<divs and divs...>
<asp:DropDownList class="dropdown expand" ID="EligibleUK" onchange="visaCheck(this.ListItem.GetValue());" runat="server">
<asp:ListItem
Enabled="True"
Text="Choose..."
Value=""
/>
<asp:ListItem
Enabled="True"
Text="Yes (UK/EU Cittizen)"
Value="Yes (UK/EU Cittizen)"
/>
<asp:ListItem
Enabled="True"
Text="Yes (Work Visa)"
Value="Yes (Work Visa)"
/>
<asp:ListItem
Enabled="True"
Text="No"
Value="No"
/>
</asp:DropDownList>
the content of my JS file:
function visaCheck(visa) {
if (visa === "Yes (Work Visa)"){
document.getElementById(visa1).style.display = "block";
document.getElementById(visa2).style.display = "block";
}else{
document.getElementById(visa1).style.display = "none";
document.getElementById(visa2).style.display = "none";
}
}
Now I tried different things in the html (.master strictly speaking) where I call the JS function code, such as:
this.ListItem
asp:ListItem
ListItem.Value
this.ListItem.Value
this.ListItem.Value()
this.ListItem.GetValue()
including the most obvious one (this.value) which worked with standard html file and in jsfiddle. Is there any specific way of doing it in ASP.NET? What am I missing and how do I fix this problem? Thanks for your answers.

Try changing:
<asp:DropDownList class="dropdown expand" ID="EligibleUK" onchange="visaCheck(this.options[this.selectdIndex].value);" runat="server">

I post an answer under my own question so it's more visible. I call js function with no argument and my javascript looks like this now:
function visaCheck() {
var visa = document.getElementById('Content_EligibleUK');
var selectedIndex = visa.selectedIndex;
var value = visa.options[selectedIndex].value
if (value === "Yes (Work Visa)"){
document.getElementById("visa1").style.display = "block";
document.getElementById("visa2").style.display = "block";
}else{
document.getElementById("visa1").style.display = "none";
document.getElementById("visa2").style.display = "none";
}
}
hope this helps some folks in the future :)

How to retrieve hidden field value using javascript?

I've asp.net web site , I used master page for the design. I've child page which is placed in the contentplaceholder. On the child page i used one hidden field as -
<input id="Hidden1" type="hidden" value="This is hidden text"/>
I want to display the hidden field value using alert() function from javascript on the page load event. How to do this?
I tried following thing in my script but it is not working-
(function msgShow() {
var e1 = document.getElementById('Hidden');
alert(e1.value);
})();
Thanks.

window.alert(document.getElementById("Hidden1").value);
Make sure this code is executed after the DOM is ready.

With jQuery you do like this:
$(document).ready(function() {
alert($('#Hidden1').val());
});
without jQuery you do:
alert(document.getElementById('Hidden1').value);

Just like with any other element, you can get it with document.getElementById('Hidden1').value

Refer the code given below to know how to get
<html>
<body>
<script type="text/javascript">
function printIt(){
alert(document.getElementById('abcId').value);
alert(document.formName.elements['abcName'].value);
}
</script>
<h1>Access Hidden value in JavaScript</h1>
<form name="formName">
<input type="hidden" id="abcId" name="abcName"
value="I am Hidden value"/>
<input type="button" value="Get Value" onclick="printIt()" />
</form>
</body>
</html>

document.getElementById('Hidden1').value;
and alert the return value

<script type="text/javascript">
function dis() {
var j = document.getElementById("<%= Hidden1.ClientID %>").value;
alert(j);
}
</script>
<input id="Hidden1" type="hidden" runat="server" value="Hello" /><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return dis();" />

With pure JavaScript:
var value = document.getElementById(id).value;

Also be sure not to reference a DOM element before it exists - like I just did and spent an hour trying to figure why even HelloWorld would not work.