HTML button causing unwanted page load - javascript

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>

Related

preventing autopostback when a checkbox is clicked

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.

How to use many buttons inside the form of asp.net c# having different functionality

This is my first ASP.NET web app and every form without <form runat="server"></form> tag is not running plus all element should be inside form tag. Now I have some buttons links for some other pages of my project.
If I use following code it opens new link on another page instead of same page:
<asp:Button ID="ButtonAttendance" OnClientClick="window.open('AttendanceForm.aspx','AttendanceForm')" runat="server" Text="Attendance"
CssClass="btn" /><br />
And if I use following code then every buttons acts after filling the form elements only:
<asp:Button ID="ButtonAttendance" OnClick=ButtonAttendance_Click() runat="server" Text="Attendance"
CssClass="btn" /><br />
Code behind:
protected void ButtonAttendance_Click(object sender, EventArgs e)
{
Response.Redirect("AttendanceForm.aspx");
}
My requirement is when click on any button we should redirect to related page directly on the same page without filling any form elements. How it is possible?
Your code behind looks fine.
If you are using a webform you have to put your controls within the form tags for the postback to work correctly and raise the OnClick event on the sever side.
<form runat ="server">
<asp:Button ID="ButtonAttendance" OnClick=ButtonAttendance_Click() runat="server" Text="Attendance"
CssClass="btn" /><br />
</form>
If you don't need to have the server set values or interact with the buttons on the page just make them regular HTML buttons and use the onclick event for JavaScript to do the redirection.
<button id="btnAttendance" onclick="window.location.href='AttendanceForm.aspx';return false;" class="btn">Attendance</button>
instead of window.open use window.location it will open in the same age
window.location='AttendanceForm.aspx'

Calling javascript function from button hides FullCalendar in my ASP.net

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()" />

Disable html input button from codebehind, after deleting a row

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

How can i check a radio button by clicking on asp text field using javascript

Hi
While working on asp, i want if i click on my asp text field, a radio button should be checked, but i dont find any onClick event available for asp text field, and if i use onchange, it is from the server end, i want this situation without page refresh, just like we do in html fields using javascript, please help!!!
Try this one:
HTML:
<asp:TextBox ID="txtSelect" runat="server" Width="200px" Text="Click here"> </asp:TextBox>
<br />
<asp:RadioButton ID="radCheck" runat="server" />
JQUERY:
$("#txtSelect").click(function(){
$("#radCheck").attr("checked",true);
});
OnFocus is probably the event I would use.
You can use Ajax if you don't wanna refresh the page

Categories