Why does the page reload?

[michael]

Good Morning Everyone,


I am writing a script to add and remove rows from a table. Here are the
two functions:

function newRow(rowNo)
{
var theTable = document.getElementById("table1");
var newRow = theTable.insertRow(rowNo);
}

function removeRow(rowNo)
{
var theTable = document.getElementById("table1");
if (rowNo >= 0 && rowNo <= theTable.rows.length);
{
theTable.deleteRow(rowNo);
}
}


The functions are called from images in the table as follows:

<tr><td><input type="image" src="removeRow.png" alt="Remove Row"
title="Remove Row" onclick="removeRow(10);">
<input type="button" src="newRow.png" alt="New Row" title="Insert New
Row" onclick="newRow(20);"></td><td>...


When the "Remove Row" icon is clicked, the row is removed nicely, however,
when the "New Row" icon is clicked, a new row appears and then the page
immediately reloads, without the new row. After the page has reloaded,
the address in the addressbar has "?x=6&y=7" appended to the original
address.

If I change the input type of the "New Row" to "Button", the new row
appears nicely and the page does not reload.


I have tested this on Internet Explorer, Firefox, Opera and Konqueror all
with the same result.


Does anyone have an idea why this happens and what I can do to keep using
the input type="image" without having the page reload?


Cheers!

Michael

 

[web.dev]

If I change the input type of the "New Row" to "Button", the new row
appears nicely and the page does not reload.

Does anyone have an idea why this happens and what I can do to keep using
the input type="image" without having the page reload?

When you use an html input element with its type to be an "image", what
this really means is that it creates a graphical submit button. This
is the reason your page reloads when you click on it.

As for a solution, you can try using the html img element instead and
use the onclick event handler there:

<img src = "newRow.png" onclick = "newRow(20)">

 

[michael]

When you use an html input element with its type to be an "image", what
this really means is that it creates a graphical submit button. This
is the reason your page reloads when you click on it.

As for a solution, you can try using the html img element instead and
use the onclick event handler there:

<img src = "newRow.png" onclick = "newRow(20)">

Thanks, the scripts are now working, however, it still puzzles
me why the original "Remove Row" did not result in a page reload but the
"New Row" did.


Cheers!

Michael

 

[RobG]

Thanks, the scripts are now working, however, it still puzzles
me why the original "Remove Row" did not result in a page reload but the
"New Row" did.

Your original HTML was invalid:

<input type="button" src="newRow.png" alt="New Row" ... >

I'll guess that in your real page you had type="image". Input type
image are by default submit buttons, so your row is added then the form
submitted.

In the case of remove row, the onclick removes the input type image from
the DOM so the submit does not occur.


[...]

 

[Lee]

michael said:

<tr><td><input type="image" src="removeRow.png" alt="Remove Row"
title="Remove Row" onclick="removeRow(10);">
<input type="button" src="newRow.png" alt="New Row" title="Insert New
Row" onclick="newRow(20);"></td><td>...


When the "Remove Row" icon is clicked, the row is removed nicely, however,
when the "New Row" icon is clicked, a new row appears and then the page
immediately reloads, without the new row. After the page has reloaded,
the address in the addressbar has "?x=6&y=7" appended to the original
address.

The function of an input of type "image" is to submit the form,
providing the x,y coordinates of the mouse click relative to
the image. That's exactly the behavior you're seeing.