I have a check box and a continue button on my web page. If the user checks the checkbox then I want to do postback on the server otherwise I want to stay on the page:
<input data-theme="a" id="field_UseAdvancedSearch" type="checkbox" data-iconpos="left" runat="server" id="chkAgree" />
<asp:Button ID="btnContinue" runat="server" Text="Continue" data-icon="arrow-r" OnClick="btnContinue_Click" /></div>
If the user click on the continue button then I want them to go to next page otherwise they need to stay on the same page. I dont want any post back to occur when the continue button is clicked if the user does not check the check box or if the checkbox is not checked then continue button should be disabled.
Any help will be highly appreciated.
For that you should use OnClientClick attribute on conditional basis. So for this fix you should use jquery function inside <head> tag as follows :
<script>
function myFunction()
{
if ($('#field_UseAdvancedSearch').is(":checked")){
return true;
}
else if ($('#field_UseAdvancedSearch').is(":not(:checked)")){
return false;
}
}</script>
And call from your button as follows :
<asp:Button ID="btnContinue" runat="server" Text="Continue" data-icon="arrow-r" OnClick="btnContinue_Click" OnClientClick="myFunction();" />
Here We are checking if the checkbox is checked or not using jQuery and returns based on that if the checkbox is checked then the user able to postback button else user won't able to postback.
Hope this helps.
Related
I have an C# ASP.net website that is using FullCalendar (http://arshaw.com/fullcalendar/).
I want to grab all the calendar events and save them to my SQL database. I have added the following button which calls a javascript function:
<script type="text/javascript">
function save() {
alert('save');
//this will save to database...
}
</script>
<asp:Button ID="btnSave" runat="server" OnClientClick=" return save();" Text="Save" />
I notice that when I click the button the message appears but then the whole calendar just disappears from my page, why is this? and how can I prevent it.
It sounds like you're wanting to keep the page from submitting with this button. Adding return false; to your save() function will prevent the postback from occurring. If that is not right and you have a server-side click event for this button, in it, you will need to emit the javascript needed to recreate the calendar.
Use a HTML input button
<input type="button" id="btnSave" runat="server" Value="save" onclick="save()" />
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>
I have an ASP.NET webpage that I enter a serial number in, and it then shows up in a gridview below.
I can delete a row(serial#) if I change my mind. If there is zero rows in my grid I make grid disappear but I also want to make my submit button disappear as well.
How do I do that? Can I do it from: Sub Gridview1_RowDeleting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewDeleteEventArgs)
If so, I've tried, but I can't seem to find the control to work with it.
Or is there any other way?
HTML example:
<div style="width:800px; margin-right: 0px;" id="divMain" runat="server">
<table stuff...>
<input id="iSubmit" type="button" value="SubmitHere"/>
</table>
In the code behind you can show or hide the button
iSubmit.Visible = False
you have to make sure to add the runat="server" attribute
<input id="iSubmit" type="button" value="SubmitHere" runat="server" />
So, when you delete a row, if the collection is empty then you can hide the button.
When you add a new row, if the button if hidden then you show it.
HTML MarkUp:
You need to add runat="server" to your button so its ID can access from codebehind as the_lotus mentioned above
<input id="iSubmit" type="button" value="SubmitHere" runat="server" />
CodeBehind:
1) iSubmit.Visible = false; // This will hide the button
2) iSubmit.Style.Add("display", "none");// This will hide the button
3) iSubmit.Enabled = false;//It disabled button, user can view but not able to click
I feel like i've done this scenario plenty of times, and it usually works, so im obviously missing something.
Here's my server-side ASP.NET Button:
<asp:Button ID="btnFoo" runat="server" Text="Foo" CssClass="button foo" OnClientClick="foo_Click();" />
Which get's rendered on the client as:
<input type="submit" name="reallylongclientid" value="Foo" onclick="foo_Click();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(reallylongclientidandpostbackoptions, false, false))" id="reallylongclientid" class="button foo">
No surprises there.
Here's the surprise, in my JavaScript function:
function foo_Click() {
return false;
}
Okay so there's more to it than that, but i cut it down to prove a point.
When i click the button, it calls the client-side function, and returns false.
But it still posts back to the server, why?
I basically want to do this on the click of the button:
Do client-side validation.
If validation passes, post back
If not, show some error messages on the form.
Of course, i could change this to an client-side button (input type="button") and manually kick off the postback when i want, but i shouldn't need to do that. Or should i?
write return statement so when you click on button it return false which not allow to submit form
<asp:Button ID="btnFoo" runat="server" Text="Foo" CssClass="button foo"
OnClientClick="return foo_Click();" />
I have a chat application, I want that whenever user accidentally or manually closes the browser ,he should get an alert so that various clean up operations could be carried out. I have more thing i itried to use on before event but I want that to be used for a particular web page as all other web pages are also called on before load. Please help
This is not really a JQuery thing, I use this functions:
function setConfirmUnload(on) {
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage() {
return "Are you sure you want to leave this page";
}
Then, at any time you can call
setConfirmUnload(true) to enable the confirmation or false if you want to allow them to close the screen without a warning (if you have a close button for instance).
We should prevent or prompt user that on performing these actions he will lose his data.
Click on back browser button.
Click on refresh browser button.
Click on close button of browser.
Click of forward browser button.
Keyboard stroke- Alt+F4 (Close)
Keyboard stroke- F5 (Refresh)
Keyboard stroke-CTRL+ F5 (Refresh)
Keyboard stroke-Shift+ F5 (Refresh)
Change of url
Or anything that cause postback other than your particular submit button.
To explain that I have used two textboxes, one Asp.net submit button with id TestButton.
Other postback controls that I have taken are
One other asp.net button,one checkbox with autopostback property true,one dropdownlist with autopostback property true.
Now I have used all these postback controls so that to show you that we also need to show promt to user about the data lose when user perform actions on these controls.
On submit button we will not show the prompt as we have to submit the data with that control action.Here is the sample code.I have set window.onbeforeunload method on controls change.
<html >
<head id="Head1">
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
// Prevent accidental navigation away
$(':input').bind(
'change', function() { setConfirmUnload(true); });
$('.noprompt-required').click(
function() { setConfirmUnload(false); });
function setConfirmUnload(on)
{
window.onbeforeunload = on ? unloadMessage : null;
}
function unloadMessage()
{
return ('You have entered new data on this page. ' +
'If you navigate away from this page without ' +
'first saving your data, the changes will be lost.');
}
window.onerror = UnspecifiedErrorHandler;
function UnspecifiedErrorHandler()
{
return true;
}
});
</script>
</head>
<body>
<form id="form1" name="myForm" runat="server">
<div>
First Name :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<br />
Last Name :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<br />
IsMarried :<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<br />
<asp:Button runat="server" ID="TestButton" Text="Submit" CssClass="noprompt-required" /><br />
<br />
<br />
<br />
<br />
<asp:Button runat="server" ID="AnotherPostbackButton" Text="AnotherPostbackButton"
/><br />
<br />
<asp:CheckBox runat="server" ID="CheckboxWhichCausePostback" Text="CheckboxWhichCausePostback"
AutoPostBack="true" /><br />
<br />
DropdownWhichCausePostback<asp:DropDownList runat="server" ID="DropdownWhichCausePostback"
AutoPostBack="true">
<asp:ListItem Text="Text1"></asp:ListItem>
<asp:ListItem Text="Text2"></asp:ListItem>
</asp:DropDownList>
<br />
<br />
</div>
</form>
</body>
Above I have used:
$('.noprompt-required').click(function() { setConfirmUnload(false); });
What I have done in this line is I am calling setConfirmUnload method and passing false as argument which will set the window.onbeforeunload to null.
So what that means is on any control where you want that user should not be prompted, give that control the class .noprompt-required and leave other as it is.
You can try the unload event:
$(window).unload( function () { alert("Bye now!"); } );
http://docs.jquery.com/Events/unload
I'm guessing this cleanup is on the client only. It would be interesting to know the nature of these "cleanups".
You may try this with ajax
$(window).unload( function () { alert("AJAX function to do required job"); } );