I have radio buttons on click of which I want to perform some actions. The change events are not working and it shows following error,
Uncaught referenceerror: RightClick is not defined at onload
Here is my code that I am using, Please can I have some insight on this error.
$(document).ready(function() {
console.log('In jQuery');
$('#rblKnowAboutCourse').change(function() {
console.log('In jQuery-On Click2-Sarvesh');
if ($(this).val() == "Other") {
$("#TextBox1").prop("disabled", false);
} else {
$("#TextBox1").prop("disabled", true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click: <input type="radio" id="rblKnowAboutCourse" />
<input type="text" id="TextBox1" value="" placeholder="textbox" />
The error shows link for this line in html
<body style="font-size:11px" onload="RightClick.init();">
Here is the radios i am using,
<asp:RadioButtonList ID="rblKnowAboutCourse" runat="server" Font-Size="Medium" Height="30px" Width="708px" TextAlign="Right" RepeatDirection="Horizontal">
<asp:ListItem>Website</asp:ListItem>
<asp:ListItem>Friends</asp:ListItem>
<asp:ListItem>Your Company</asp:ListItem>
<asp:ListItem>Online Ad</asp:ListItem>
<asp:ListItem>other</asp:ListItem>
</asp:RadioButtonList>
Thank you for the concern everyone has shown. My issue resolved just by changing the id to class.
Related
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.
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 an asp.net website. I want to manipulate a webpage based on return value of a confirmation popup.
I have a drop down with some values. "cancel" is one of those values. So when user selects this item, a confirmation box asking user "Are you sure you want to cancel the ticket"? is displayed.
Here is my code,
HTML:
<asp:DropDownList ID="ddlStatus" runat="server" CssClass="selectstyle" DataTextField="Name" DataValueField="ID" onchange ="GetSelectedItem(this);" />
<asp:Panel ID="pnl_Cancel" runat="server" Visible="false">
<tr>
<td class="label" align="right">
Cancellation Reason :
</td>
<td>
<asp:TextBox ID="tbxCancellationReason" runat="server" CssClass="selectstyle" TextMode="MultiLine" Width="400" Height="50"></asp:TextBox>
</td>
</tr>
</asp:Panel>
JavaScript :
<script type="text/javascript">
function GetSelectedItem(x) {
if (x.value == 4) {
if (confirm("Are you sure you want to cancel support ticket ?") == true) {
alert("Yes");
document.getElementById("pnl_Cancel").style.visibility = 'visible';
}
}
}
</script>
which is displaying a popup as I want.
Now, I want to make a panel visible if user clicked on "OK" and reset dropdownlist if user clicked on "Cancel". I am getting "Yes" alert message but the panel visibility is not working.
First, you need to do a below things in code-behind file.
Register client IDs of pnl_cancel and ddlStatus controls. You will need these client IDs of the controls to access them in JavaScript
Add style attribute to pnl_cancel with value display:none. This is to ensure that the control is rendered in HTML but is hidden
This link here simulates the final rendered HTML. It will help resolve your problem.
function GetSelectedItem(x) {
if (x.value == 4) {
if (confirm("Are you sure you want to cancel support ticket ?")) {
document.getElementById("pnl_Cancel").style.display = 'block';
} else {
x.value = "";
}
}
}
I have radio button list and inside one of its itemlists I have html input type="text".
When I select the option with input text field, and then click on the text field the focus gets lost and focus shifts to radio button list item that is selected.
Here is the display what I am trying to achieve
When I click on "Dealer Name" the focus gets shifted to Dealer radio button and so user can not type "Dealer Name"
This above behavior is happening in firefox. In Chrome it's not causing any problem
UPDATED:
This is the code I used when selected index change
$("#rOD").change(function () {
if ($("#rOD input:checked").val() == "Dealer") { $("#txtDName").removeAttr("disabled"); }
else { $("#txtDName").attr("disabled", "disabled"); }
});
I have tried using following code to change focus
function fc(elem) {
$("#rOD").focusout();
$(elem).focus();
}
And this is the markup
<asp:RadioButtonList Font-Size="Small" ID="rOD" data-toggle="popover" title="Field required"
data-content="Please Select" ClientIDMode="Static" runat="server"
RepeatDirection="Vertical">
<asp:ListItem Text="Owner" Value="Owner">Owner</asp:ListItem>
<asp:ListItem Text="Dealer" Value="Dealer">Dealer  <input type="text" id="txtDName" onclick="return fc(this);" placeholder="Dealer Name" disabled="disabled" data-toggle="popover" title="Field required" data-content="Please Select" style="width:150px" /> </asp:ListItem>
</asp:RadioButtonList>
try this jQuery code:-
$("#rOD").click(function (e) {
$("#rOD input:checked").next().find('input').focus();
});
$("#rOD").change(function (e) {
if ($("#rOD input:checked").val() == "Dealer") {
$("#txtDName").removeAttr("disabled");
e.preventDefault();
} else {
$("#txtDName").attr("disabled", "disabled");
}
});
Use this code,
$(document).ready(function () {
$("#rOD").change(function () {
if ($("#rOD input:checked").val() == "Dealer") { $("#txtDName").removeAttr("disabled"); $("#txtDName").focus(); }
else { $("#txtDName").attr("disabled", "disabled"); }
});
});
function fc(elem) {
$(elem).focus();
}
here is the result,
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