Why button doesnt fire javascript function - javascript

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

Related

Radio button change event not working with RightClick error

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.

sweet alert is stoping my data insertion

i am working on web-form where simple insertion is being place. i write a JS block to show success popup with the help of sweet alert. onclientclick i calling java script. javascript block work fine but no data insert into database.
that my java script code
<script type="text/javascript">
function massege() {
swal({
title: 'Congratulation!',
text: 'Your Data has been saved',
type: 'success',
confirmButtonText: 'ok'
},
function(){
window.location.href = 'RegisterRoute.aspx';
});
}
</script>
here my button code
<asp:Button ID="id" type="submit" runat="server" CssClass="btn pull-right" Text="Register Route" OnClick="RouteRegistration_Click" OnClientClick="massege(); return false" />
i had try it with another way like below
ClientScript.RegisterStartupScript(this.GetType(), "success", "massege();", true);
but from this method popup don't show. any idea what going wrong.
return false may be preventing to submit the request. Remove return false from below line and try. Attach the click event as..
OnclientClick="message();"
<asp:Button ID="RouteRegistration" type="submit" runat="server" CssClass="btn pull-right" Text="Register Route" OnClick="RouteRegistration_Click" OnClientClick="massege();" />

Jquery Dialog calling

When i click on button to show the message i get one MessageBox that's normal but when i call the Jquery Dialog for second time i get two MessageBoxs! and when i call Jquery Dialog for third time i get three MessageBoxs!
Please help me!
Here is my Code:
$("[id*=Call_Dialog]").live("click", function () {
$("#MyDiv").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
$("#ShowMessage").live("click", function () {
event.preventDefault();
alert('Hi');
$("#MyDiv").dialog('close');
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="MyDiv" style="display: none">
This is a simple popup
<asp:Button ID="ShowMessage" runat="server" Text="Button" />
</div>
</form>
<p>
<input id="Call_Dialog" type="button" value="button" /></p>
</body>
</html>
Include your scripts at the end of the body for better performance
Use "bind" instead of "live" if your elements are not dynamic.
If your elements are dynamic use "on" instead of "live".
http://jsfiddle.net/MX9Dk/
Made some amends and its working fine for me.
<form id="form1" runat="server">
<div id="MyDiv" style="display: none">
This is a simple popup
<asp:Button ID="ShowMessage" runat="server" Text="Button" />
</div>
</form>
<p>
<input id="call-dialog" type="button" value="button" />
</p>
$(document).ready(function() {
$("#call-dialog").click(function () {
$("#MyDiv").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
});
$("#ShowMessage").live("click", function () {
event.preventDefault();
alert('Hi');
$("#MyDiv").dialog('close');
});
});

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.

JavaScript "return false" from onkeypress handler

I used code in the below method to block my keyboard and it worked for me.
<asp:textbox id="t1" onkeypress="return false;" />
Now I want to add some more for for it and I tired to do the same using extra code as
<script type="text/javascript">
fuction disablekeys()
{
return false;
}
</script>
<asp:textbox id="t1" onkeypress="disablekeys();" />
But this code is not working. Why?
You need to return the value returned by disablekeys:
<asp:textbox id="t1" onkeypress="return disablekeys();" />
Your new onkeypress handler currently ignores this value.

Categories

Resources