CODEWITHSUNDEEP
javascriptjquerybuttonjquery-events
Iurii Dziuban
Iurii Dziuban

Reputation: 1091

Page is reloaded on button click

I have got a web page with a lot of components. There are a lot of buttons and when I click on them they don`t reload a page but when I click on buttons that are inside this code:

<div style="width:300px; height:250px; float:left; position:absolute; z-index:4">
    <form style="width:100%;">
        <fieldset style="width:250px; height:210px;">
        <legend><b>Authors</b></legend>
        <div id="authors" style="width:250px; height:150px; position:absolute; overflow:scroll">
            <div style="white-space: nowrap;">
                <button class="button removeclick" style="display:block; float:left;"><img src="img/list-remove.png" alt="remove" /></button>
                <button class="button upclick" style="display:block; float:left;"><img src="img/arrow-up.png" alt="arrow-up" /></button>
                <button class="button downclick" style="display:block; float:left;"><img src="img/arrow-down.png" alt="arrow-down" /></button> 
                <input  class="resizable" type="text" style="height:29px"/>
            </div>
            <div style="white-space: nowrap;">
                <button class="button removeclick" style="display:block; float:left;"><img src="img/list-remove.png" alt="remove" /></button>
                <button class="button upclick" style="display:block; float:left;"><img src="img/arrow-up.png" alt="arrow-up" /></button>
                <button class="button downclick" style="display:block; float:left;"><img src="img/arrow-down.png" alt="arrow-down" /></button> 
                <input  class="resizable" type="text" style="height:29px"/>
            </div>
        </div>
        <div style="position:absolute; top:180px;"><button id="add" class="button" style="display:block; float:right;"><img src="img/add_new.png" alt="add new" /> Add New</button></div>
        </fieldset>
    </form>
    </div>

The page is reloaded and I do not know why. I don't need this behaviour.

Upvotes: 1

Views: 1611

Answers (6)

Marwen Trabelsi
Marwen Trabelsi

Reputation: 4257

Delete the tag form and it should work.

Upvotes: 1

Anwar
Anwar

Reputation: 4508

All buttons have to be located inside the Form tag.

Clicking an a button located inside the Form tag submits and posts the form to the server-side.

Upvotes: 0

Rahul garg
Rahul garg

Reputation: 9362

Remove the form attribute from the code, the input fields inside the form attribute submits the form on Enter press..

Upvotes: 1

Yaron U.
Yaron U.

Reputation: 7881

change the opening form tag to be:

<form style="width:100%;" onsubmit="return false;">

Upvotes: 3

Rafay
Rafay

Reputation: 31033

that is because they are inside a form, if you dont need to submit there is no point of having a form, remove

<form style="width:100%;">

and 

 </form>

Upvotes: 1

Fabian
Fabian

Reputation: 3495

try preventDefault(); in your javascript if you don't want the page to reload:

in jQuery like this:

$("#buttonID").click(function(e){

    e.preventDefault();

});

Upvotes: 0

Related Questions