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>

How to Transfer Value from Bootstrap Popup Textbox to Parent page textbox in asp.net?

Here, When I Click On "+" Button. then Jquery Popup Opens and Then in TextBox txtTotalCarat and txtTTotalAmount Gets Value from calculating from back end code. When I Click On Submit Button. Click Event is Firing and in Debug mode I can see That Value is Transferring to Main Page Textbox txtInvoiceCarats and txtInvoiceAmount.
But The Problem here is After Finishing Click Event Popup Is not getting Close and Values not Showing In Main Page Textbox txtInvoiceCarats and txtInvoiceAmount.
Please Help Me To Solve This Problem.
<script type = "text/javascript">
function ShowTotal() {
$.ajax({
type: "POST",
url: "Admin/AddSales.aspx/GetTotal",
data: '{TCarats: "' + $("#<%=txtTotalCarats.ClientID%>")[0].value + '", TAmount: "' + $("#<%=txtTTotalAmount.ClientID%>")[1].value + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
alert(response.d);
}
</script>
<asp:UpdatePanel ID="updSales" runat="server" UpdateMode="Conditional"
ChildrenAsTriggers="true">
<ContentTemplate>
<div class=" form-horizontal">
<hr />
<table align="center" style="width:100%;">
<tr>
<td align="center" style="width:33.33%;">
<div class="form-group">
<div class="col-lg-12">
<asp:TextBox ID="txtInvoiceCarats" CssClass="form-control" runat="server" style="width:80%; display:inline-block;" placeholder="Invoice Carats"></asp:TextBox>
<asp:Button ID="btnAddCaratDetails" runat="server" Text="+" CssClass="btn btn-success" OnClick="btnAddCaratDetails_Click" />
</div>
</div>
</td>
<td align="center">
<div class="form-group">
<div class="col-lg-12">
<asp:TextBox ID="txtInvoiceAmount" CssClass="form-control" runat="server" style = "width:90%;" placeholder="Invoice Amount"></asp:TextBox>
</div>
</div>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
**//Below Code for PopUp On The Same Page**
<asp:UpdatePanel ID="updSalesDetails" runat="server"
UpdateMode="Conditional" ChildrenAsTriggers="True">
<ContentTemplate>
<div class="form-horizontal">
<table align="center" style="width:100%;">
<tr>
<td align="center">
<div id="editModal" class="modal fade" data-backdrop="" style="top:15%;left:0%;margin:-50px 0 0 -1000px; " tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="width:1600px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editModalLabel">Add Sales Details</h3>
</div>
<div class="modal-body">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<table style="width:100%;">
<tr>
<td style = "width:2%;" align="center">
<div class="form-group">
<div class="col-lg-12">
<asp:TextBox ID="txtTotalCarats" CssClass="form-control" runat="server" Font-Bold="true" style = "width:95%; background-color:lightgreen;" Enabled="false" placeholder="Total Carats"></asp:TextBox>
</div>
</div>
</td>
<td>
<div>
<div class="col-lg-12">
<asp:TextBox ID="txtTTotalAmount" CssClass="form-control" runat="server" Font-Bold="true" style = "width:90%; background-color:lightgreen;" Enabled="false" placeholder="Grand Amount"></asp:TextBox>
</div>
</div>
</td>
</tr>
</table>
<div class="modal-footer">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn btn-success" UseSubmitBehavior="false" data-dismiss="modal" OnClientClick="ShowTotal()" />
<asp:Button ID="btnReset" runat="server" Text="Reset" CssClass="btn btn-warning" OnClick="btnReset_Click" />
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnReset" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Code Behind
[System.Web.Services.WebMethod]
public void GetTotal(string TCarats,string TAmount)
{
txtInvoiceCarats.Text = TCarats.ToString();
txtInvoiceAmount.Text = TAmount.ToString();
}

Prioritized Jquery validation before asp Code Behind in Button Click

New in ASP.net and i want to set the validation first before it goes to the Codebehind in my asp program, because the fields does'nt validate after clicking the button inside ASP:Content
Heres my Shortcode:
<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="MainContent" CssClass="bodyForm">
<section id="content" role="main">
<div class="entry two_third">
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#contactform').validationEngine('init');
jQuery('#contactform #contact_form_formsend').click(function () {
alert("He Goes Here!");
var form_builder_url = jQuery('#contact_form_url').val();
jQuery('#Content2 .loading').animate({ opacity: 1 }, 250);
if (jQuery('#Content2').validationEngine('validate')) {
jQuery.post(form_builder_url, {
contact_name: jQuery('.txtName').val(),
contact_email: jQuery('.txtEmail').val(),
contact_subject: jQuery('.txtSubject').val(),
contact_message: jQuery('.txtaMessage').val(),
formname: 'Content2',
formtype: 'contactf'
}, function () {
jQuery('#Content2 .loading').animate({ opacity: 0 }, 250);
document.getElementById('Content2').reset();
jQuery('#Content2').parent().find('.box').hide();
jQuery('#Content2').parent().find('.success_box').fadeIn('fast');
jQuery('html, body').animate({ scrollTop: jQuery('#Content2').offset().top - 100 }, 'slow');
jQuery('#Content2').parent().find('.success_box').delay(5000).fadeOut(1000);
});
return false;
} else {
jQuery('#Content2 .loading').animate({ opacity: 0 }, 250);
return false;
}
});
});
</script>
<form action="#" method="post" id="contactform">
<asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
<br />
<p>Required fields are marked <span class="color_3">*</span></p>
<div class="form_info cmsms_input">
<label for="contact_name">Name <span class="color_3">*</span></label>
<div class="form_field_wrap">
<input type="text" name="contact_name" runat="server" id="txtName" value="" size="22" tabindex="3" class="txtName validate[required,minSize[3],maxSize[100],custom[onlyLetterSp]]"/>
</div>
</div>
<div class="cl"></div>
<div class="form_info cmsms_input">
<label for="contact_email">Email <span class="color_3">*</span></label>
<div class="form_field_wrap">
<input type="text" name="contact_email" runat="server" id="txtEmail" value="" size="22" tabindex="4" class="txtEmail validate[required,custom[email]]" />
</div>
</div>
<div class="cl"></div>
<div class="cl"></div>
<div class="form_info cmsms_input">
<label for="contact_subject">Subject <span class="color_3">*</span></label>
<div class="form_field_wrap">
<input type="text" name="contact_subject" runat="server" id="txtSubject" value="" size="22" tabindex="6" class="txtSubject validate[required,minSize[3],maxSize[100]]" />
</div>
</div>
<div class="cl"></div>
<div class="form_info cmsms_textarea">
<label for="contact_message">Message <span class="color_3">*</span></label>
<div class="form_field_wrap">
<textarea name="contact_message" runat="server" id="txtaMessage" cols="28" rows="6" tabindex="7" class="txtaMessage validate[required,minSize[3]]" ></textarea>
</div>
</div>
<div class="cl"></div>
<div class="cl"></div>
<div>
<asp:Button class="more_button fl" runat="server" tabindex="8" Text="Send a message"
ID="contact_form_formsend" onclick="btnSendEmail_Click" /></div>
<div class="loading">
</div>
</form>
</div>
</div>
</section>
</asp:Content>
Here as you can see, My problem is that it goes forward the the codebehind and submit the form even before validating the page which I encounter Errors because of null fields, Hope Someone with Golden heart help me in this problem. . Thanks in Advance

You can call javascript function before postback. OnClientClick is use to call javascript function before postback. Use following code for reference:
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" ToolTip="Save" OnClientClick="return CheckValidation()" />
Call CheckValidation() javascript function. It will postback if function returns true.
<script type="text/javascript">
function CheckValidation()
{
// do validations here and return true if validate and return false if not
}
</script>

Image is not displayed in a Modal Pop Window using javascript and asp.net

Basically, I am trying to develop a ASPX page where the user will be able to upload an image, then display it in a modal pop window and crop it if required.
If I display the image outside of pop window it works completely fine, but if I try to display inside of the pop window the image is not displayed. However, I have noticed if I keep the image there and remove <asp:Image ID="imgCrop" from the javascript below, the image is displayed and off course it will not allow me to crop it.
Here is the javacripts I use to display the modal popwindow and set the crop settings:
<head runat="server">
<title>Crop Image</title>
<link href="Styles/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.Jcrop.js"></script>
<script type="text/javascript" src="scripts/jquery.helper.js" ></script>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#imgCrop').Jcrop({
onSelect: storeCoords
});
});
function storeCoords(c) {
jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
};
</script>
</head>
here is the definition of modal pop window and where I want to see the image to be cropped in <asp:Image ID="imgCrop"
<input class="button_popup" id="btnShowModalDiv" onclick="$('#divSimplePopup').showModal(); return false;" type="submit" value="Show Modal Div"/>
<div id="divSimplePopup" class="popup" style="display: none; width: 350px;">
<div class="container">
<div class="header">
<span id="lblPopupHeader" class="msg">Simple Popup Header</span>
<a id="btnClosePopup" class="close" onclick="$('#divSimplePopup').hideModal(); return false;" ></a>
</div>
<div>
<div class="body" style="height: 100px; overflow: auto;">
<asp:Panel ID="pnlCrop" runat="server" Visible="false">
<asp:Image ID="imgCrop" runat="server" />
<br />
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
<asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
</asp:Panel>
</div>
<div class="footer">
<input class="button_popup" id="btnOK" style="width: 40px;" type="submit" value="OK"/>
<input class="button_popup" id="btnCancel" onclick="$('#divSimplePopup').hideModal(); return false;" type="submit" value="Cancel"/>
</div>
</div>
</div>
</div>
source code and references:
http://geekswithblogs.net/vladimirl/archive/2009/12/20/jquery-simple-modal-plugin.aspx
http://supershope.com/tuvianblog/cropimage.zip
Does anyone has any hint?

<asp:Image ID="imgCrop" runat="server" />
your image have runat="server" so it may have different ID when it will be rendered.
so you need to have following in your page.
jQuery(document).ready(function ()
{
jQuery('#<%= imgCrop.ClientID %>').Jcrop({
onSelect: storeCoords
});
});
Apart from that you've visible="false" on your panel as shown in below code:
<asp:Panel ID="pnlCrop" runat="server" Visible="false">
So whole panel won't be rendered and your jquery code won't work. Rather use style="display:none", panel will get rendered and so the image will be and your plugin will work.