CODEWITHSUNDEEP
jqueryasp.net
StackJP
StackJP

Reputation: 681

ASP.NET - Don't want page to refresh

So I have this function, and I don't want the page to refresh when I click on Add Button. Can you help me?

<div class="form-group">
            <label for="autores">Autores</label>
            <textarea runat="server" class="form-control" rows="1" id="autores"></textarea>
            <asp:Button runat="server" OnClientClick="addAutor();" Text="Add" CssClass="btn btn-default" AutoPostback=false  />
        </div>
    </div>
    <div class="col-md-4">
        <table id="lista" contenteditable>
            <tr>
                <td><strong>Autores</strong></td>
            </tr> 
        </table>
        <script>
            function addAutor() {
                var table = document.getElementById("lista");
                var row = table.insertRow(1);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = "NEW CELL1";
                cell2.innerHTML = "NEW CELL2";
                return false;
            }
        </script>
    </div>

OK! So...i also try to do this:

<table id="myTable">
            <tr>
                <td>Row1 cell1</td>
                <td>Row1 cell2</td>
            </tr>
            <tr>
                <td>Row2 cell1</td>
                <td>Row2 cell2</td>
            </tr>
            <tr>
                <td>Row3 cell1</td>
                <td>Row3 cell2</td>
            </tr>
        </table>
        <br>

        <button onclick="myFunction()">Try it</button>

        <script>
            function myFunction() {
                var table = document.getElementById("myTable");
                var row = table.insertRow(0);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = "NEW CELL1";
                cell2.innerHTML = "NEW CELL2";
            }
        </script>

with a html button...but it still not work, because it adds the content to the table, but the page reloads, and the new content disapears.

Upvotes: 0

Views: 134

Answers (1)

Amr Elgarhy
Amr Elgarhy

Reputation: 68902

<asp:button id="Button1"
      text="Submit"
      onclick="addAutor();" 
      usesubmitbehavior="false"
      runat="server"/>

Set usesubmitbehavior to false to change the button from submit to button type

I see your sample working fine, may be add type="button"

        
            function myFunction() {
                var table = document.getElementById("myTable");
                var row = table.insertRow(0);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = "NEW CELL1";
                cell2.innerHTML = "NEW CELL2";
            }
        
<table id="myTable">
            <tr>
                <td>Row1 cell1</td>
                <td>Row1 cell2</td>
            </tr>
            <tr>
                <td>Row2 cell1</td>
                <td>Row2 cell2</td>
            </tr>
            <tr>
                <td>Row3 cell1</td>
                <td>Row3 cell2</td>
            </tr>
        </table>
        <br>

        <button onclick="myFunction()">Try it</button>

Upvotes: 1

Related Questions