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.
Related
I have following html form. There will be many business validations – and if validation fail an "error" attribute will be set on the element.
In the following form, I am returning a flag to see whether the validation is failed. How to make a common function to find all elements that has "error" attribute, and alert the value of "errDesc" attribute?
Note: I am looking for a JavaScript solution without using other libraries.
Note: My client browsers does not support HTML5
<html>
<head>
<script type="text/javascript">
function loadMessage(frm)
{
alert("Page Loaded");
}
function CustomSetError(element, msg) {
alert("calledSUB");
var isError = false;
//In productioon code, error will be set based on business validation
try {
//Set error
element.setAttribute("error", "true");
element.setAttribute("errDesc", msg);
isError = true;
}
catch (e) { }
return isError;
}
function ValidateForm(frm) {
alert("validate");
var isErrorPresent = CustomSetError(frm.txtBillAddressText, "TestMessage");
if (isErrorPresent) {
return false;
}
}
</script>
</head>
<body bgcolor="#E5DBE2" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onload="loadMessage(frmPOHeader)">
<form name="frmPOHeader" method="post" id="frmPOHeader">
<input name="txtBillAddressText" class="ArrowSmall" type="text" readonly="readonly" id="txtBillAddressText" fieldname="Bill To" />
<input name="hidBillToBuyerAddressCD" type="hidden" id="hidBillToBuyerAddressCD" />
<input type="submit" name="btnSubmit" value="Submit" onclick="return ValidateForm(frmPOHeader);" language="javascript" id="btnSubmit" class="ButtonSmallBlue" />
<br /><br />
<input name="txtDummy" class="ArrowSmall" type="text" readonly="readonly" id="txtDummy" fieldname="Dummy" />
</form>
</body>
</html>
You can use querySelectorAll to get all the div.
Then use hasAttribute to check if the element has an attribute error
Use getAttribute to get the errDesc
// will give all the div
var a = Array.prototype.slice.call(document.querySelectorAll("div"))
a.forEach(function(item){
if(item.hasAttribute('error')){
console.log(item.getAttribute('errDesc'))
}
})
JSFIDDLE
Note:querySelectorAll will select all the div which may be costly. You can actually add a class to error element. errorDesc can be as it is there.
Then you can do document.querySelectorAll("div.error") which will select dom only with error class
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
my java code:
<script type='text/javascript'>
$(document).ready(function () {
$('#email').keyup(function() {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test($(this).val())) {
$(this).css("background-color", "green");
} else {
$(this).css("background-color", "red");
}
});
});
</script>
my html:
<p><b>Email Address:</b> <input type="text" name="email_address" id="email" /> </p>
I am looking for a live-update type of effect as the user types, not a click-away affect.
Nothing seems to work, I have used similar code to change values of other text-boxes in a live-fashion. Sorry if this is a repeated question.
Thank you!
Why don't you use HTML5 validator ?
<form>
<input type="email" placeholder="me#example.com">
<input type="submit">
</form>
source: http://email.about.com/od/emailprogrammingtips/qt/How-To-Validate-Email-Addresses-With-Html5.htm
jsfiddle: http://jsfiddle.net/aunY4/1/
Your example is working fine on my computer.
Are you sure you have included jQuery? Which version? What browser are you using?
This is my working code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script type='text/javascript'>
$(document).ready(function () {
$('#email').keyup(function () {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test($(this).val())) {
$(this).css("background-color", "green");
} else {
$(this).css("background-color", "red");
}
});
});
</script>
<p><b>Email Address:</b>
<input type="text" name="email_address" id="email" />
</p>
</body>
</html>
And this is the result:
EDIT: if you want an easy client validation library I suggest you using jQuery Validation
The only right answer is to not validate it.
http://davidcel.is/blog/2012/09/06/stop-validating-email-addresses-with-regex/?utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer&utm_content=bufferdb46a
This is a MVC 3 application that uses the razor view engine. I have the following line of code in a view that displays 2 checkboxes. When one is checked the other checkbox should uncheck. I have searched around and between my lack of exp with javascript and the lack of threads found on google related to this i am at a lost for even a code snip of javascript to use for a worthwhile starting point. Any ideas?? This below is what I have coded up on my own but am more stuck than anything with this.
$("#isStaffCheckBox").change(
function (e) {
var checked = $(this).attr('checked');
if(checked)
{
<li>Staff Member: #Html.CheckBoxFor(Function(f) f.isStaff, New With {.id = "isStaffCheckBox"}) Board Member: #Html.CheckBoxFor(Function(f) f.boardMember, New With {.id = "isBoardCheckBox"})</li>
Any help is greatly appreciated..
If there is some reason for this to be a checkbox instead of a radio button then the following code should do it.
$("#isStaffCheckBox").change(
function (e) {
$("#isBoardCheckBox").prop('checked',!this.checked);
}
});
Change the property "("#isBoardCheckBox").prop" to "("#isBoardCheckBox").attr".
Works fine!
$("#isStaffCheckBox").change(
function (e) {
$("#isBoardCheckBox").attr("checked", !this.checked);
})
// If you use jquery version 1.6.4 or below use "attr", if you use higher versions (1.9 or above) use "prop" instead of attr.
Code:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Checkbox</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(":checkbox").change(function () {
$("input:checkbox").attr("checked", false);
$(this).attr("checked", "checked");
});
});
</script>
</head>
<body>
<input type="checkbox" id="chk1" value="1" /> Staff Member <br/>
<input type ="checkbox" id="chk2" value="2" /> Board Member
</body>
</html>
Please have a look on this link JsFiddle my code
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.