Javascript issue: Unable to postback on save button click in ASP.NET - javascript

I have a textbox and save button on a pop-up, the textbox has a required field validator. I have a scenario, if the user accidentally forgets to enter data in the textbox and click save the required field validator kicks in, which is expected. But, now if the user enters data in the textbox and clicks on 'save', the record doesn't get saved on the first click instead it needs an additional click. I know the reason for this: it is not doing a postback when the button is clicked for first time, but for the second time it does and saves the data.
Does anyone know the workaround for this? The end user is getting annoyed by that additional click. Please note there is no javascript function associated with it. It is autogenerated javascript from the browser.
Code:
<div class="row">
<div class="col-md-12">
<div class="form-group">
<asp:Label runat="server" Text="" AssociatedControlID="txtTitle">
Title<span class="text-danger">*</span>
</asp:Label>
<asp:TextBox runat="server" CssClass="form-control" ID="txtTitle" >
</asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtTitle" Display="Dynamic" ErrorMessage="Required" ValidationGroup="questionTitle" CssClass="text-danger">
</asp:RequiredFieldValidator>
</div>
</div>
</div>
Save button:
<div class="row">
<div class="col-md-3 col-md-offset-9">
<asp:LinkButton runat="server" ID="lnkSave" CssClass="btn btn-lg btn-block btn-success btn-lg" role="button" ValidationGroup="questionTitle" OnClick="lnkSave_Click">
<i class="fa fa-floppy-o"></i> Save
</asp:LinkButton>
</div>
</div>

It seems like a common issue with the validator.
The validator error is suppose to clear out when lose focus to the textbox
however, apparently if your validator Display is set to Dynamic, when the error message appear, it will cause the triggering clearing the validator error to fail.
hence the clicking twice (first click trigger clear error which should have been trigger earlier but failed, second trigger actual form post)
solution is to change your RequiredFieldValidator Display to Static
more info checkout
RequiredFieldValidator have to click twice
RequiredFieldValidator requires user to click twice

Related

On validation prevent calender control to open

I want to prevent open calendar control on save button at time of validation fire , I am not able to find how can I prevent It
I have one calendar control in form , select date validation fire on save button after validation it will direct focus on calendar control and open calendar automatically , business don't want to open calendar control
HTML
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="form-group datepicker">
<label>Project Start Date </label>
<asp:TextBox ID="ProjectStartDate" TabIndex="27" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
<asp:HiddenField ID="hdnProjectStartDate" runat="server" Value="" />
</div>
</div>
I want to prevent open calendar open on save button
let me know if any solution over there
Thank you
I have solve this issue to change in formValidation.JS
In this file there is one function
// Determined the first invalid field which will be focused on automatically
var ns = this._namespace;
for (var i = 0; i < this.$invalidFields.length; i++) {
var $field = this.$invalidFields.eq(i),
autoFocus = this.isOptionEnabled($field.attr('data-' + ns + '-field'), 'autoFocus');
if (autoFocus) {
// Focus the field
//$field.focus();
return false;
break;
}
}
On validation it will auto focus that element & after focus calendar control will
open automatically because of focus
Comment this line for prevent focus on calendar control
$field.focus();
Thank you !!
What calendar or date picker control are you using? jQuery UI, Telerik AJAX, Control Toolkit AJAX, Kendo?
For a general ASP.NET validation scenario, the textbox won't be focused automatically. You will need to set the following property to True explicitly do to that:
SetFocusOnError="true"
<asp:TextBox runat="server" ID="ProjectStartDate"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="* Required"
ForeColor="Red" ControlToValidate="ProjectStartDate" SetFocusOnError="false">
</asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="Submit" />
You can check your code-behind whether you have defined this property somewhere.

Enter causing postback even if no submit button is present

I have a form in asp.net page. Whenever enter key is pressed the page is posted back.
I don't have any submit button in my form and using javascript to submit form.
<div class="row-fluid" align="center">
<a id="saveConfirm" class="textDecorationNone">
<div class="btn btn-primary">
<i class="icon-ok icon-white"></i> Add
</div>
</a>
<asp:LinkButton ID="btnCancel" runat="server" Text="Cancel" CssClass="btn" CausesValidation="false" OnClick="btnCancel_Click">
<i class="icon-remove"></i> Cancel
</asp:LinkButton>
</div>
row('#saveConfirm').click(function (){
//submit form
});
This can be addressed I believe with the accepted solution of the following post:
ASP.Net page enter key causing post back
Quoting:
You could set the DefaultButton on the Form or a Panel. This way you have full control what happens.
Set UseSubmitBehavior="False" on your Buttons. This disables the "AutoPostback" on Enter.
A possible javascript solution for ASP.NET is covered under this solution:
Disable default button in ASP.NET [duplicate]
use Updated Panel which avoid postback while enter.

detepicker inside TextBox not working on some aspx pages

I implemented a datepicker inside my web forms application.
I tested it on one form, and it was working. The code of the TextBox was:
<asp:TextBox runat="server" class="fieldset__input js__datepicker picker__input" type="text" id="TbDate" aria-haspopup="true" aria-expanded="false" aria-readonly="false" />
I tried to add the same textbox to another form but it wasn't triggering.
The other form had the same master page. I copied all the code aspx from the first form to the new one and it was working.
I tried deleting one line at a time to see why the datepicker was working with this code, and found that this line is needed to enable it:
<asp:TextBox runat="server" ID="tbEmail" CssClass="form-control" TextMode="SingleLine" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbEmail" ErrorMessage="The username/email field is required."/>
I want the datepicker to open when i click on the tbDate TextBox, but it only works if the RequiredFieldValidator for the TextBox tbEmail is present. If i delete the validator, the datepicker won't open on the tbDate TextBox. The Validator checks if the input of tbDate is an email format, so there is no connection to the tbDate TextBox.
Also, i tried to delete the other TextBox, and attach the fieldValidator to the tbDate TextBox, and it also works.
I don't understand how this RequiredFieldValidator is helping the datepicker to open, especially inside another textbox?
Understanding this would help me implementing it on other forms.
Thank You!
Not sure which datepicker plugin you are using but the markup for the datepickers are not the same.
<asp:TextBox runat="server" class="fieldset__input js__datepicker picker__input" type="text" id="TbDate" aria-haspopup="true" aria-expanded="false" aria-readonly="false" />
is not the same as
<asp:TextBox runat="server" ID="tbEmail" CssClass="form-control" TextMode="SingleLine" />
you are missing the classes fieldset__input js__datepicker picker__input in the second datepicker which might be selectors for the JS script that's initializing the datepicker. Try adding that and see if it works without the RequiredFieldValidator.

HTML button causing unwanted page load

I feel with this particular problem I have to explain how my webpage works, otherwise it might not make sense to anyone. The page will load, you will be given some text and the option to click on a asp.net combobox filled with options, when you select one of them, the page will reload and get all the information in relation to that user and display it in a dynamically created HTML table.
After this there are two divs that runat server and dependent on if the user has uploaded a file will display an option of changing the file, or adding a new one.
I have a standard html button that when is clicked is meant to run my JavaScript function, but when you click on the button it fires my aspxcombobox code again. I will attach all my code that I feel might be useful.
HTML for DIVS
<div id ="upload" runat = "server" visible = "false" class="default">
<asp:Label ID="uploadlbl" runat="server" Text="Upload driving licence" style="color:Red"></asp:Label>
<dx:ASPxUploadControl ID="LicenceUpload" runat="server">
</dx:ASPxUploadControl>
<dx:ASPxButton ID="UploadButton" runat="server" Text="Upload" style="margin-left: 2px">
</dx:ASPxButton>
</div>
<div id="ChangeUpload" runat="server" visible="false" class="default">
<span>Licence already uploaded</span>
<br />
<button id="changeLicence" onclick="changeLicence()">Change Licence?</button>
</div>
JAVASCRIPT
function changeLicence() {
alert('test');
}
It's a submit button. It submits the form it is in. Since you are using ASP.NET, the entire page is probably in a form.
Add type="button" to make it a non-submit button.
default behavior of button is submit, Add type="button" attribute so that it doesn't submits form.
<button
type="button"
id="changeLicence"
onclick="changeLicence()">Change Licence?</button>

do postback after enter hit on changing text in textbox

How can I make postback after user changes textbox text and hits enter ?
Is only javascript real solution. Doesnt asp.net give any out from box solution for such a problem ?
Thank You for any hints.
Beside the javascript solutions, you can place the textbox with a submit button inside a panel and make use of DefaultButton property of the panel.
Below is the code example: -
Your aspx will look like this
<asp:Panel ID="Panel1" runat="server" DefaultButton="Button1">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
Now, when you press enter inside the text box the button click event occurs, same as by clicking the button.

Categories