Develop Reference

Prevent from a postback and run OnClick using jQuery

I'm trying to validate the TextBox and click the Button of asp.net.
<asp:TextBox ID="txtEmail" Placeholder="E-mail" runat="server"></asp:TextBox>
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" Text="Login" />
And here is a jQuery code which validate TextBox and then trigger the OnClick method:
var al = document.getElementById('<%=lblAlert.ClientID%>');
var email = document.getElementById('<%=txtEmail.ClientID%>');
var msg = null;
$(document).ready(function () {
$('#<%=btnLogin.ClientID%>').on('click', function (e) {
if (email.innerText == '') {
msg = 'Please! enter email address.';
al.innerText = msg;
}
else {
$('#<%=btnLogin.ClientID%>').click();
}
});
});
Edit:
OnClick method is:
protected void btnLogin_Click(object sender, EventArgs e)
{
// some code
}

You should cancel the click event, when needed, using event.preventDefault().
$(document).ready(function () {
$('#<%=btnLogin.ClientID%>').on('click', function (e) {
if (email.innerText == '') {
msg = 'Please! enter email address.';
al.innerText = msg;
e.preventDefault();
}
});
});
No need to call click again if validation succeeds.

Since in the HTML your button is already clicked when the jquery gets called, your
else {
$('#<%=btnLogin.ClientID%>').click();
}
is redundant.
Here is the thing, if you want to validate and then click, then you should use a different element as a button
If you want to use the same button (recommended) then you have to prevent the postback when the validation fails by returning false.
Simple HTML concepts
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" Text="Login" OnClientClick="return false;" />
Will never cause a postback
Here is what I would do
<asp:TextBox ID="txtEmail" Placeholder="E-mail" runat="server"></asp:TextBox>
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" Text="Login" OnClientClick="ValidateMe()" />
<script>
var al = document.getElementById('<%=lblAlert.ClientID%>');
var msg = null;
function ValidateMe() {
var email = document.getElementById('<%=txtEmail.ClientID%>');
if (email.innerText == '') {
msg = 'Please! enter email address.';
al.innerText = msg;
return false;
}
else {
return true;
}
}
</script>

Javascript - textbox validation on ASP.Net button click

When I click the asp.net button as per the below code, it goes into my js file, and gets the function as I need, however if it fails validation it still goes through with the postback as if it were valid.
the asp.net button
<asp:Button ID="bttnSend" runat="server" OnClientClick="DoValidation()" Text="Send" CssClass="btn btn-primary margin30" />
the javascript
function DoValidation(parameter) {
console.log("validating");
var valid = true;
var emailTo = document.getElementById("txtEmailTo").value;
if (emailTo.length < 1) {
alert("Please select at least one recipient to send an email to");
valid = false;
}
console.log(valid);
if (valid == true) {
__doPostBack('bttnSend', parameter);
}
};
I would be grateful if someone could please tell me what i need to change and what to so that the validation doesnt allow the postback if it fails.
thanks

You need to prevent the default action of button when condition fails.
Modify your function to return true/false
function DoValidation(parameter) {
var valid = true;
var emailTo = document.getElementById("txtEmailTo").value;
if (emailTo.length < 1) {
alert("Please select at least one recipient to send an email to");
valid = false;
}
return valid;
};
The use the return value
<asp:Button ID="bttnSend" runat="server" OnClientClick="return DoValidation()" Text="Send" CssClass="btn btn-primary margin30" />

Update one textbox using javascript function when another changes

I have a javascript function that counts characters in 2 different textboxes and puts the value in a third textbox.
This is the function is as follows:
function CountChars() {
var subjectLength = document.getElementById("txtBoxSubject").value.length;
var msgLength = document.getElementById("txtBoxMsg").value.length;
document.getElementById("txtBoxCnt").value = subjectLength + msgLength;
}
I call it from the Message text box using 'onkeyup' and it works fine.
<asp:TextBox ID="txtBoxMsg" runat="server" ClientIDMode="Static"
TextMode="MultiLine" onkeyup="CountChars()"></asp:TextBox>
The Subject textbox can be changed using a dropdown list or a user adding text to it. So using 'onkeyup' will not work for the Subject textbox. I tried using 'onchange' and nothing is entered in the Count text box.
This is the Subject html:
<asp:TextBox ID="txtBoxSubject" runat="server" ClientIDMode="Static" onchange="CountChars()"></asp:TextBox>
What am I doing wrong?
How can I call the javascript function whenver the text changes in the Subject textbox?
Thanks.
UPDATE
This is the Subject dropdown and the function that is called when it changes.
<asp:DropDownList ID="ddListSubject" runat="server" ClientIDMode="Static" AutoPostBack="true" onchange="SubjectChanged();">
</asp:DropDownList>
function SubjectChanged() {
var strSubject = document.getElementById("ddListSubject").value;
if (strSubject == "Custom") {
document.getElementById("txtBoxSubject").value = "";
document.getElementById("txtBoxSubject").focus();
}
else {
document.getElementById("txtBoxSubject").value = strSubject;
}
CountChars(); //number appears for a second then disappears
}

it seems like you not terminating the function with semi column. use something like onkeyup="CountChars();"

Your .aspx are using MasterPage? The names of Asp.Net objects changing in the rendered page. Try using <% =% Objeto.ClientID>.
function CountChars() {
var subjectLength = document.getElementById("<%=txtBoxSubject.ClientID %>").value.length;
var msgLength = document.getElementById("<%= txtBoxMsg.ClientID %>").value.length;
document.getElementById("<%= txtBoxCnt.ClientID %>").value = subjectLength + msgLength;
}
Or maybe use JQuery. Look at the code below, works as you described.
Subject:
<input id="text1" type="text" />
<br />
Msg
<input id="text2" type="text" multiple style="height: 100px" />
<br />
Total: <span id="total">0</span>
<script type="text/javascript">
$(document).ready(function () {
$("input[type=text]").keyup(function () {
var total = 0;
$("input[type=text]").each(function () {
total += $(this).val().length;
});
$("#total").html(total);
});
});
</script>
Hope this helps you

Dummy me...I removed the AutoPostBack="true" from the Dropdown!
Thanks for all of your help!!

Cancel ajax modalpopupextender using javascript

I have a modalpopupextender with a targetcontrolid = buttCopyFormula. The buttCopyFormula is wrapped in a span tag for the user to verify they want to proceed. The button also has a javascript function that verifies there is text in one of the fields and if there is places it in a textbox within the modalpopup.
If there isn't text in the field I want to cancel the popup and display a message.
I've had the span around the button for a while, but am just adding the verification function. I would imagine there is a better way to do this, but just not sure what it is.
What is the best way to execute this functionality?
TargetControl Button
<span onclick="return confirm('Copy the selected formula?')">
<asp:ImageButton ID="buttCopyFormula" ImageAlign="AbsBottom" OnClientClick="transferName()" runat="server" ImageUrl="~/images2020/copy_32.png" />
<b style="color:White">Copy</b>
</span>
Modal Popup
<asp:ModalPopupExtender ID="ModalPopupExtender2" Y="20" runat="server"
BackgroundCssClass="modalBackground" CancelControlID="buttFormulaCancel"
PopupControlID="Panel2" TargetControlID="buttCopyFormula">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel2" runat="server" CssClass="modalQuestionBackground"
Style="display:none"><br />
<h5>Enter a Name for the Formula</h5>
<br /><br />
Formula Name:
<asp:TextBox ID="txtFormulaNameNew" CssClass="controltext" Width="65%" runat="server" Text=""></asp:TextBox><br /><br />
<center>
<asp:Button ID="buttFormulaSaveNew" runat="server" CssClass="button"
OnClick="buttFormulaSaveNew_Click" Text="Save Formula" />
<asp:Button ID="buttFormulaCancel" runat="server" CssClass="button"
Text="Cancel" />
</center>
<br />
</asp:Panel>
JavaScript Function
function transferName() {
var v = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaNameNew").value;
var f = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaName");
if (v === "") {
alert("Please select the formula you want to copy before proceeding");
return false;
}
f.value = v
}
I've been working on this and first removed the span around the button, put a fake hyperlink for the modal popup and added a behavior id to the popup. I have also changed the javascript as follows...
New Javascript
function transferName() {
var v = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaNameNew").value;
var f = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaName");
if (f === "") {
alert("Please select the formula you want to copy before proceeding");
return false;
} else {
if (confirm('Copy selected formula?')) {
f.value = v;
var mod = $find("ModalPopupExtender2");
alert(mod.id.toString);
mod.show;
return false;}
}
}
I still can't get the modalpopup to show. I imagine it's because it's wrapped in an update panel. Any ideas??

You may subscribe to showing event of ModelPopupExtender and cancel showing dependent on some conditions. Put script below at page AFTER THE ScriptManager control
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
function pageLoadedHandler(sender, args){
var popupExtender = $find("ModalPopupExtender2"); // BehaviorId of popup extender
popupExtender.remove_showing(onPopupShowing);
popupExtender.add_showing(onPopupShowing);
}
function onPopupShowing(sender, args) {
var txtFormulaNameNew;
var txtFormulaName = $get("<%= txtFormulaName.ClientID %>");
if (formulaTextBox.value.length === 0) {
alert("Please select the formula you want to copy before proceeding");
args.set_cancel(true);
} else {
if (confirm('Copy selected formula?')) {
txtFormulaNameNew = $get("<%= txtFormulaNameNew.ClientID %>");
txtFormulaNameNew.value = txtFormulaName.value;
}
}
}

jquery question regarding text change

<script type="text/javascript">
$(function () {
var text3;
$('.HideButton').click(function () {
text3 = $('#MessageText').text;
var theButton = $(this);
$('#disclaimer').slideToggle('slow', function () {
theButton.val($(this).is(':visible') ? 'Hide' : 'Show');
});
$('<p>' + text3 + '</p>').addClass("new").insertAfter('#disclaimer');
return false;
});
});
updated...code above doesnt change the buttons text
<p id="disclaimer" > DDDDDDDDDDDDDDDDDDDDDDDDDD</p>
<asp:Button ID="Button1" CssClass="HideButton" runat="server" Text="Hide" />
I want the text of the button to change each time i press on it..But it doesnt
<p id="disclaimer" >
<input id="MessageText" type="text" />
</p>
<asp:Button ID="Button21" CssClass="HideButton" runat="server" Text="Hide" />
As message typed in the textbox..it should appear while "#disclaimer disappear

The will render out to a form element. This means you should use .val() instead of .text()
Also as Neil has pointed out, you are returning before this gets executed.
$('.HideButton').click(function () {
$('#disclaimer').slideToggle('slow');
// return false;
if ($('#disclaimer').is(':visible')) {
$(this).val('Hide');
} else {
$(this).val('Show');
}
});
});
<p id="disclaimer" > DDDDDDDDDDDDDDDDDDDDDDDDDD</p>
<asp:Button ID="Button1" CssClass="HideButton" runat="server" Text="Hide" />

Thats because you returned before you canged any text.
remove the return ...; (or move it to the end of the function)

Try returning false at the end ;)

Your original question was answered a few different times and a couple different ways. Now you've asked what is essentially a completely new question.
I recommend any further changes be formed into their own questions.
Is this what you now want?
http://jsfiddle.net/kasdega/99GaJ/1/

After return your code will never be executed. Try this
$('.HideButton').click(function () {
var theButton = $(this);
$('#disclaimer').slideToggle('slow', function(){
theButton.val($(this).is(':visible')?'Hide':'Show');
});
return false;
});