javascript page Load occurs on Button Click

Question

My problem is when i clicked on button with id="cmdAddATM" whole .aspx page reload.even though i didnt write any click function associated with it.what is the problem ? becausethis problem is arising some new issues in my project related to ajax/jquery

File Name : AddEditATM.aspx.cs

namespace Monitoring_Tool
{
    public partial class AddEditATM : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Generix.fillDropDown(ref litRegion, Generix.getData("dbo.Region", "REGION, Code", "", "", "Code", 1));
        }
    }
}

File : AddEditATM.aspx

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        showAddEditATMLoad();
    });
</script>
<body>
// I an not writing full syntax here but i have one button with id "cmdAddATM"
</body>

External JS File :

function showAddEditATMLoad() { 
    //Its Blank
}

My HTML Code:-

<table style="margin: 0px auto; width: 90%" runat="server">
  <thead>
      <tr>
          <th colspan="4" align="center" class="ui-widget-header PageHeader">
              ADD/EDIT ATM
          </th>
      </tr>
  </thead>
  <tbody style="vertical-align: bottom; border-style: solid; border-width: thick;">
      <tr>
          <td style="padding-left: 5px" colspan="2">
              Enter ATM ID &nbsp;<input id="txtEditATM" name="txtEditATM" type="text" />
              &nbsp;&nbsp;
              <button id="cmdEditATM">
                  EDIT ATM</button>
          </td>
          <td align="left" style="font-weight: bold" colspan="1">
              OR
          </td>
          <td align="center" colspan="2">
              <button id="cmdAddATM">
                  ADD ATM</button>
          </td>
      </tr>
  </tbody>
</table>

Yograj Gupta · Answer 1 · 2012-08-29T08:22:14.987

2

If your button is a <asp:Button runat="server" /> which will render as <input type="submit" /> on browser. So, It will postback your page.

Edited : add type="button" attribute with <button> tag, type attribute for <button> tag has three values for it, and default value which tag is getting in your case is submit, that's why it is submitted your form.

1. Submit - For Submitting a Form
2. Reset - For Resetting the Form
3. button - A Simple Button

edited Aug 29 '12 at 08:22

answered Aug 29 '12 at 07:57

Yograj Gupta

9,811
3
29
48

My Button is Simple...But the Table is runat server – Shaggy Aug 29 '12 at 08:00

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

Add type attribute to <button> tag.

<button id="cmdEditATM" type='button'>EDIT ATM</button>

SO threads

edited May 23 '17 at 12:04

Community

1
1

answered Aug 29 '12 at 08:04

KV Prajapati

93,659
19
148
186

score 1 · Answer 3 · answered Aug 29 '12 at 08:04

If you're using an asp:Button object, you can use the OnClientClick property or just jQuery to run some client-side code. You could return false out of the javascript click event handler (or use jQuery's event.preventDefault() method) to stop the postback.

If you never want a postback to occur for this button, just use a normal HTML button (<input type="button" ... />). If you need to access this button on the server-side, just add the normal runat="server" attribute to it.

Note that an HTML <input type="submit"/> button will cause a postback, as it will submit the form on the page.

score 1 · Answer 4 · answered Aug 29 '12 at 08:04

1

add type="button" attribute to your button. Different browsers may use different default types for the button element.

answered Aug 29 '12 at 08:04

Yuriy Rozhovetskiy

22,270
4
37
68

score 0 · Answer 5 · answered Aug 29 '12 at 08:01

0

in asp.net any if you add any asp button its automatically convert asp button to submit button so replace asp button with HTML button

<input type="button" id='cmdAddATM' value="Button" />

answered Aug 29 '12 at 08:01

Anant Dabhi

10,864
3
31
49

Its not asp button its HTML button only. – Shaggy Aug 29 '12 at 08:03

javascript page Load occurs on Button Click

5 Answers5