We Keep Coding

2 Modals in the same form but 1 button isn't going off

Problem
I'm creating a webshop and I want to use two different modals in one form in my masterpage, one modal is to create accounts and the other modal is to log users in.
The first modal works perfect, you can open the modal with the button, the buttons inside the modal also work perfect (e.g., register and close buttons). But the other modal (log in) doesn't work, you can open the modal and close the modal, but you can't log in. So the button log in inside the modal "log in" doesn't work, I have some C# code behind that button, but it never activated the code because the button doesn't go off. I put a breakpoint just after the BtnLogin_click, but even the breakpoint doesn't go off. The thing is if I put the second modal (register) in comment, the login modal works again or there must be something wrong in form right? Any tips or advice?
Attempt
The things I tried are:
Looked at the properties of the button, then event, and it said it's onclick with the correct name. Tried to create a new button, and a new onclick event.
HTML
The 2 buttons to open the modals
<input type = "button" id="btnShowLogin" class="btn btn-primary" value = "Login" />
<input type = "button" id="btnShowRegister" class="btn btn-primary" value = "Registreer" />
Modal 1 Login (not working)
<form id="form1" runat="server">
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="ModalTitle">
Login</h4>
</div>
<div class="modal-body">
<label for="txtUsername">
Username</label>
<asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" placeholder="Enter Username"
/>
<br />
<label for="txtPassword">
Password</label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control"
placeholder="Enter Password" />
<div class="checkbox">
<asp:CheckBox ID="chkRememberMe" Text="Remember Me" runat="server" />
</div>
<div id="dvMessage" runat="server" visible="false" class="alert alert-danger">
<strong>Error!</strong>
<asp:Label ID="lblMessage" runat="server" />
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnLogin" Text="Login" runat="server" OnClick="ValidateUser" CssClass="btn btn-default" Visible="true" />
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
Modal 2 register (working)
<div class="modal fade" id="RegisterModal" tabindex="-2" role="dialog" aria-labelledby="Registreer"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="Registreer">
Registreer</h4>
</div>
<div class="modal-body">
<label for="TxtVnaam">
Voornaam</label>
<asp:TextBox ID="TxtVnaam" runat="server" CssClass="form-control" placeholder="Enter Voornaam"
/>
<label for="Txtnaam">
Achternaam
</label>
<asp:TextBox ID="Txtnaam" runat="server" CssClass="form-control" placeholder="Enter Achternaam"
/>
<br />
<label for="TxtNick">
Username</label>
<asp:TextBox ID="TxtNick" runat="server" CssClass="form-control" placeholder="Enter Username"
/>
<label for="txtEmail">
Email</label>
<asp:TextBox ID="txtEmail" runat="server" CssClass="form-control" placeholder="Enter Email"
/>
<br />
<asp:RequiredFieldValidator ErrorMessage="Required" Display="Dynamic" ForeColor="Red"
ControlToValidate="txtEmail" runat="server" />
<asp:RegularExpressionValidator runat="server" Display="Dynamic" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ControlToValidate="txtEmail" ForeColor="Red" ErrorMessage="Invalid email address." />
<label for="txtWW">
Wachtwoord</label>
<asp:TextBox ID="TxtWW" runat="server" CssClass="form-control" placeholder="Enter Wachtwoord"
/>
<label for="bevestig">
Bevestig Wachtwoord</label>
<asp:TextBox ID="bevestig" runat="server" CssClass="form-control" placeholder="Enter Wachtwoord"
/><asp:CompareValidator ErrorMessage="Passwords do not match." ForeColor="Red" ControlToCompare="txtWW"
ControlToValidate="bevestig" runat="server" />
<label for="TxtGemeente">
Gemeente</label>
<asp:TextBox ID="TxtGemeente" runat="server" CssClass="form-control" placeholder="Enter Gemeente"
/>
<label for="TxtPC">
Postcode</label>
<asp:TextBox ID="TxtPC" runat="server" CssClass="form-control" placeholder="Enter Postcode"
/>
<br />
<label for="TxtAdres">
Adres</label>
<asp:TextBox ID="TxtAdres" runat="server" CssClass="form-control" placeholder="Enter adres"
/>
<br />
<label for="TxtTel">
Telefoonnummer</label>
<asp:TextBox ID="TxtTel" runat="server" CssClass="form-control" placeholder="Enter Telefoonnummer"
/>
<label for="TxtRek">
Rekeningnummer</label>
<asp:TextBox ID="TxtRek" runat="server" CssClass="form-control" placeholder="Enter rekeningnummer"
/>
<br />
</div>
<div class="modal-footer">
<asp:Button ID="Button1" Text="Registreer" runat="server" OnClick="RegisterUser" Class="btn btn-primary" />
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</form>
JavaScript
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<script type="text/javascript">
$(function () {
$("#btnShowLogin").click(function () {
$('#LoginModal').modal('show');
});
});
$(function () {
$("#btnShowRegister").click(function () {
$('#RegisterModal').modal('show');
});
});
</script>
I expect that the button login inside the modal login will active so it can use the code I put behind it and validate the user.

you have to set ValidationGroup attribute for RequiredFieldValidator for registering .
for example :
<asp:RequiredFieldValidator ValidationGroup="register" ErrorMessage="Required" Display="Dynamic" ForeColor="Red"
ControlToValidate="txtEmail" runat="server" />
when use asp validators you should set ValidationGroup attribute because in your case you have 2 submit buttons and when you click on log in button validator of registration show the message in hidden modal and form will not submit.

Why ASP.Net HtmlEditorExtender dropping space after postback?

I'm using asp.net htmlEditorExtender, when i copy data from word and paste it into editor and after clicked on button space will automatically drops, why is this happening?
I was using ajax control toolkit version 16.1 now i updated it to 18.1 but getting same problem.
Here is my code
<div class="form-horizontal">
<div class="form-group">
<asp:Label ID="lblRichTextEditor" runat="server" Text="TextEditor" CssClass="control-label col-md-3"></asp:Label>
<div class="col-md-8">
<asp:TextBox ID="eBody" runat="server" Width="100%" Height="250px"></asp:TextBox>
<cc1:HtmlEditorExtender ID="HtmlEditorExteBody" runat="server" TargetControlID="eBody" EnableSanitization="false" DisplaySourceTab="false">
<Toolbar>
<cc1:Undo />
<cc1:Redo />
<cc1:Copy />
<cc1:Paste />
<cc1:Bold />
<cc1:Cut />
<cc1:Italic />
<cc1:Underline />
<cc1:FontSizeSelector />
<cc1:FontNameSelector />
<cc1:UnLink />
</Toolbar>
</cc1:HtmlEditorExtender>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-default" OnClick="btnSave_Click" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3">
<asp:Label ID="lblBody" runat="server"></asp:Label>
</div>
</div>
</div>

I solved this issue by Updating Ajax control tool kit to latest version(18.1) and added TextMode="Multiline" in textbox.
Here is My Code
<asp:TextBox ID="eBody" runat="server" Width="100%" Height="250px" TextMode="MultiLine"></asp:TextBox>

OnClientClick not working for Imagebutton hidden fileupload

I am working on Asp.net form as follows
<form runat="server" id="form">
<label>Select Category <span>*</span></label>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Mobiles</asp:ListItem>
<asp:ListItem>Electronics and Appliances</asp:ListItem>
<asp:ListItem>Cars</asp:ListItem>
<asp:ListItem>Bikes</asp:ListItem>
<asp:ListItem>Furniture</asp:ListItem>
<asp:ListItem>General</asp:ListItem>
</asp:DropDownList>
<div class="clearfix"></div>
<label>Ad Title <span>*</span></label>
<asp:TextBox ID="txt_title" class="phone" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Ad Description <span>*</span></label>
<%--<textarea class="mess" placeholder="Write few lines about your product"></textarea>--%>
<asp:TextBox ID="txt_Body" class="mess" placeholder="Write few lines about your product" TextMode="multiline" Style="resize: none" Width="770px" Height="150px" Wrap="true" runat="server" Font-Bold="True"></asp:TextBox>
<div class="clearfix"></div>
<div class="upload-ad-photos">
<label>Photos for your ad :</label>
<div class="photos-upload-view">
<asp:ImageButton ID="ImageButton1" UseSubmitBehavior="false" OnClientClick="return chooseFile();" ImageUrl="Images/Capture.JPG" runat="server" />
<asp:FileUpload ID="FileUploadControl" runat="server" Visible="False" />
<div id="messages">
<p>Status Messages</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="personal-details">
<label>Your Name <span>*</span></label>
<asp:TextBox ID="txt_name" class="name" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Your Mobile No <span>*</span></label>
<asp:TextBox ID="txt_phn" class="phone" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Your Email Address<span>*</span></label>
<asp:TextBox ID="txt_email" class="email" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<p class="post-terms">By clicking <strong>post Button</strong> you accept our Terms of Use and Privacy Policy</p>
<asp:TextBox ID="post_sub" Text="Post" type="submit" runat="server"></asp:TextBox>
<div class="clearfix"></div>
</form>
Where I want to call a hidden fileupload when Imagebutton is clicked using JavaScript as follows:
<script type="text/javascript">
function chooseFile() {
document.getElementById("#FileUploadControl").click();
alert("grt");
return false;
}
</script>
But, I was not able to call the function instead page reloads, as you can see I am returning false in the function also. Please guide me to make this work.

You have set the Visible property of the FileUpload Control to false. Therefore it does not exist on the client side. The Visible property is not the same as display:none in HTML/CSS.
You should do something like this:
<span style="display: none">
<asp:FileUpload ID="FileUploadControl" runat="server" />
</span>
And it's always better to use the ClientID instead of hard coding the ID of the FileUpload Control.
<script type="text/javascript">
function chooseFile() {
document.getElementById("<%= FileUploadControl.ClientID %>").click();
return false;
}
</script>

When you use document.getElementById you shouldn't mention # since it already searches for id attribute, in your current state it will look for id #FileUploadControl which is not your element id. change your code to this:
function chooseFile() {
document.getElementById("FileUploadControl").click();
alert("grt");
return false;
}
<form runat="server" id="form">
<div class="photos-upload-view">
<img id="ImageButton1" OnClick="return chooseFile();" src="https://maxcdn.icons8.com/office/PNG/512/Computer_Hardware/mouse_left_click-512.png" style="widdth:40px;height:40px;" />
<input type="file" ID="FileUploadControl" runat="server" style="display:none;" />
</div>
</form>

Yes, number one is you using # of you document.getElementById("#FileUploadControl") it's wrong and you should use it without # document.getElementById("FileUploadControl").
second thing if you use Visible="False" attribute it not rendering the HTML element, without that you can use below two methods.
FileUploadControl.Style["visibility"] = "hidden" in your backend file
using following css class for hide
function chooseFile() {
document.getElementById("FileUploadControl").click();
alert("grt");
return false;
}
.setDisplayNone {
display:none;
}
<asp:FileUpload ID="FileUploadControl" runat="server" CssClass="setDisplayNone" />

ModalPopUpExtender not showing the pop up

I have a modalpopUpExtender and trying to pop up list of ATM
.Following code shows the ASP Panel where i want to do the pop up
<asp:Panel ID="pnlBanks" CssClass="atmBnkPopup" runat="server" meta:resourcekey="pnlBanksResource1">
<div id="pnlBanksCnt" style="display: none;">
<h2 class="sectionHeading">
<asp:Literal ID="litATMPaymentHeader" runat="server" meta:resourcekey="litATMPaymentHeaderResource1"
Text="ATM Payment (Indonesia)" />
</h2>
<asp:Literal ID="litATMPaymentText" runat="server" meta:resourcekey="litATMPaymentTextResource1" />
<br />
<div style="text-align: center;">
<asp:LinkButton ID="lbCloseBanks" runat="server" meta:resourcekey="lbCloseBanksResource1"
Text="<img
alt="Close" src="images/btn/btn-close.gif" __designer:mapid="5f" />" />
</div>
</div>
<asp:Button ID="btnBanks" runat="server" Style="display: none;" meta:resourcekey="btnBanksResource1" />
</asp:Panel>
<cc1:ModalPopupExtender ID="mpeBanks" runat="server" TargetControlID="btnBanks" CancelControlID="lbCloseBanks"
PopupControlID="pnlBanks" BackgroundCssClass="modalBackground" DynamicServicePath=""
Enabled="True" />
In the Aspx page, trying to call a JavaScript to pop up the screen
<p>
<asp:Literal ID="litATMBanks" runat="server" Text="To view the banks at which we accept ATM payment," meta: resourcekey="litATMBanksResource1" />
<a href="javascript:ShowBankList();">
<asp:Literal ID="litATMBanksLink" runat="server" Text="click here" meta: resourcekey="litATMBanksLinkResource1" />
</a>
</p>
Here is My Java Script
function ShowBankList() {
var modal = $find("mpeBanks");
if (modal) {
$("pnlBanksCnt").style.display = "block";
modal.show();
}
}
I am getting Modal as null .
I am not sure what is missing in the code . Why $find not able to find the element

ASP Enable enter key

I have a login box that I need to have submitted when enter is pressed. Below you are going to find part of the code. Please any help would be appreciated.
<div class="box-login clearfix">
<div class="box-login-header">
<h3>
Registered Users</h3>
</div>
<div>
<asp:Label ID="LblMessage" runat="server" ForeColor="Red"></asp:Label>
<asp:RequiredFieldValidator ID="Rfv_LoginId" runat="server" ControlToValidate="TextLogInId"
ErrorMessage="Login Id is required" ValidationGroup="A" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RevLoginId" runat="server" ControlToValidate="TextLogInId"
ErrorMessage="Login id does not contain spaces,double quotes or +><=';:,|/"
ValidationExpression="[^ "+><=':,|/]*$" ValidationGroup="A" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="Rfv_Password" runat="server" ControlToValidate="TextPassword"
ErrorMessage="Password is required" ValidationGroup="A" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:CustomValidator ID="CvPassword" runat="server" ClientValidationFunction="ValidatePassword"
ControlToValidate="TextPassword" ErrorMessage="" Display="Dynamic"></asp:CustomValidator>
<asp:RegularExpressionValidator ID="RevPassword" runat="server" ControlToValidate="TextPassword"
ErrorMessage="Space is not allowed" ValidationExpression="[^ ]*$" ValidationGroup="A"
Display="Dynamic"></asp:RegularExpressionValidator>
<asp:Label ID="LblPassword" runat="server" ForeColor="#FF0066"></asp:Label>
</div>
<p>
Please enter your GoCCL.com Login ID & Password below</p>
<ul>
<li>
<label for="cloginid">
Login ID:</label>
<asp:TextBox ID="TextLogInId" runat="server" CssClass="text-box" MaxLength="16" onblur="ClearMessage()"></asp:TextBox>
</li>
<li>
<label for="cpassword">
Password:</label>
<asp:TextBox ID="TextPassword" runat="server" TextMode="Password" CssClass="text-box"
MaxLength="16" onblur="ClearMessage()"></asp:TextBox>
</li>
</ul>
<asp:LinkButton ID="btnForgotPassword" CssClass="forgot" runat="server" Text="Forgot your Login ID or Password?"
OnClick="btnForgotPassword_Click"></asp:LinkButton>
<asp:ImageButton ID="CmdLogin" CssClass="btn-login" OnClick="CmdLogin_OnClick" OnClientClick="ClearMessage()"
runat="server" ImageUrl="/stylesheets/bookccl/images/button/btn-login.gif" CausesValidation="true" />
<div class="box-login-fotter clearfix">
<p>
<strong>New to GoCCL? </strong>
<asp:LinkButton ID="btnRegistration" runat="server" Text="Register Now" CssClass="register-new"
OnClick="btnRegistration_Click"></asp:LinkButton>
to join the fun!</p>
</div>
</div>

You could wrap it in a Panel control and set the DefaultButton to the button you want invoked when pressing Enter. There are also other options explored here:
http://www.beansoftware.com/asp.net-tutorials/accept-enter-key.aspx