We Keep Coding

How to track asp:button click with Google Tag Manager

Let's say I've got an asp:button on a website which I'm trying to track to count how many times it has been clicked by different users.
<asp:Button ID="SubBtn" runat="server" OnClick="Button1_Click" runat="server" Text="Sub" />
In my code behind I've got a redirect link to a different page.
I'm aware that I need to include something like
<a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});" >Button 1</a>
Do I need to convert my asp:button to a html button to make this work?

You need to use attribute "OnClientClick":
<asp:Button ID="SubBtn" runat="server" OnClick="Button1_Click" runat="server" Text="Sub" OnClientClick="dataLayer.push({'event': 'button1-click'});" />
You can read more about this attribute on MSDN: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick(v=vs.110).aspx

prevent The Client side validation go to server side

I have a form and I have a validation in JavaScript. How to prevent the submit button go the the server side if the form is not valid?
<button id="LoginButton" onclick="Login.initReuiredValidation();"
onserverclick="LoginButton_Click" runat="server" type="submit"
class="submit btn btn-primary pull-right">
<asp:Literal runat="server" meta:resourcekey="LoginButton" />
<i class="icon-angle-right"></i>
</button>

in jquery you can do as
$(yourform).submit(function(event){
event.preventDefault();
//do somehting
})

This isn't classic asp, it's asp.net webforms and I've edited the tags accordingly
Adding input validation in webforms is quite easy, you can assign a validation control to each form control, eg
Contact Name<br />
<asp:TextBox ID="Contact_name" runat="server" Width="246 pt"></asp:TextBox>
<asp:RequiredFieldValidator ID="ContactNameValidator" runat="server"
ErrorMessage="Please enter your name" ControlToValidate="Contact_name"></asp:RequiredFieldValidator><br />
<br />
Contact Telephone<br />
<asp:TextBox ID="Contact_phone" runat="server" Width="246pt"></asp:TextBox>
<asp:RequiredFieldValidator ID="ContactPhoneValidator" runat="server" ControlToValidate="Contact_phone"
ErrorMessage="Please enter your telephone number"></asp:RequiredFieldValidator>
If you view the output, you will see that the validation is actually done with (client side) JavaScript. Asp.net generates that for you, you don't have to write it yourself.
Further information here
https://msdn.microsoft.com/library/a0z2h4sw%28v=vs.100%29.aspx

In the code behind add...
LoginButton.Attributes.Add("onclick", "return false;");

asp:Button and asp:LinkButton and asp:Button submitting on enter in Chrome

In Internet Explorer if I hit enter in the TextBox P it submits the Form using the onclick event of LoginButton.
This is what I want to happen.
In Google Chrome if I hit enter it submits the form with the onclick of Button1.
This is not what I want to happen.
Button1 is actually not visible on the form under normal circumstances. It is made visible under certain circumstances to do a different task then login.
How can I force this, browser independently, to always use LoginButton onclick when someone presses enter?
<asp:TextBox ID="P" runat="server" TextMode="Password" Width="150"></asp:TextBox>
<asp:LinkButton CssClass="button" ID="LoginButton"
runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1"
onclick="LoginButton_Click" />
<asp:Button
ID="Button1" runat="server"
Text="Submit" onclick="Button1_Click" />

You set the forms default button:
<form id="Form1" defaultbutton="SubmitButton" runat="server">
The Following works for me.
<form id="form1" runat="server" defaultbutton="LoginButton">
<div>
<asp:TextBox ID="P" runat="server" TextMode="Password" Width="150"></asp:TextBox>
<asp:LinkButton CssClass="button" ID="LoginButton"
runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1"
OnClick="LoginButton_Click" />
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" > </asp:button>
</div>
</form>

You'll probably want to set a default button in your Page_Load method, like this:
this.Form.DefaultButton = this.LoginButton.UniqueID;

I ended up using C# in my Page_Load(object sender, EventArgs e) method to set the DefaultButton. Found this on another stackoverflow post.
https://stackoverflow.com/a/2213237/2907463
this.Form.DefaultButton = Login1.FindControl("LoginButton").UniqueID;

Clear button should not required field HTML5

im creating the form include below code :
<asp:TextBox ID="txtPhone" required="required" runat="server" placeholder="Phone No. (eg. 999)"
CssClass="glowStyle"></asp:TextBox>
<br />
<asp:Button ID="btnAddDriver" Text="Add" runat="server" CssClass="button" />
<br />
<asp:Button ID="btnCnclAddDriver" Text="Clear" runat="server"
CssClass="cancelbutton" onclick="btnCnclAddDriver_Click" />
</form>
when i click the "Clear" button, the required (html5) still show up.
how to disable it for Clear button only.

Add formnovalidate attribute to your cancel/clear button.
Here you can find some more information about this attribute.

Do you actually require a server control to cancel ? A simple <input type="reset"> or a small javascript code can do the job in most situations.
If not, simple add CauseValidation="false" to your button :
<asp:Button ID="btnCnclAddDriver" CauseValidation="false" Text="Clear" runat="server"
CssClass="cancelbutton" onclick="btnCnclAddDriver_Click" />
(remove suggestion as it applies to asp.net validation)

You can set the autopostback option for btnCnclAddDriver button to False. And execute your server side code (btnCnclAddDriver_Click) by Ajax.

You can clear your TextBox(s) with javascript (jQuery) :
$('txtPhone').val('');
Or Javascript :
function name()
{
document.getElementById('txtPhone').value = "";
}
Hope this help.

very simple c# submit button

I have several ImageButtons on the top of my page, then I have a textbox and button in the middle. If you type in the textbox then hit enter on the keyboard the browser follows the link of the first ImageButton instead of the submit button next to the textbox. I have ran into this in the pase and had to put the imagebuttons on the bottom of the page for it to work correctly, that is not an ok fix in this case. I tried setting UseSubmitBehavior="true" , but that does nothing. I tried putting the textbox and button in a separate DIV and a separate panel, didn't work either
TOP of the page
<div style="position:absolute; left: 70% ; top: 5%;">
<asp:ImageButton ID="imgFB" runat="server" ImageUrl="Images/facebook_icon.jpg" PostBackUrl="http://www.facebook.com/832586561" />
<asp:ImageButton ID="imgLI" runat="server" ImageUrl="Images/linkedin_logo.jpg" PostBackUrl="http://www.linkedin.com/pub/scott-selby/33/304/44a" />
<asp:ImageButton ID="imgCB" runat="server" ImageUrl="Images/careerbuilder_logo.jpg" PostBackUrl="http://www.careerbuilder.com" />
<asp:ImageButton ID="imgCP" runat="server" ImageUrl="Images/codeplex_logo.jpg" PostBackUrl="http://www.codeplex.com" />
</div>
Middle of Page
<div ID="formPanel" runat="server" style="position:absolute; top:235px;">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" UseSubmitBehavior="true" />
</div>

You may set the default button via <form/> attribute.
<form defaultbutton="btnChangeCity" id="form1" runat="server">
...
</form>
Or use Panel control to set default button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnChangeCity">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" />
</asp:Panel>

You surround your controls with <div> which is a good idea, but to have it run at all you also need <form>. In case you just didn't include it, the submit button also has to have OnClick="sub" attribute.
Read more here.