CODEWITHSUNDEEP
javascriptjqueryhtml
Dude Alex
Dude Alex

Reputation: 83

When input type="image", onclick action was triggered by hitting enter from another input field

In my code, I made a JavaScript function which will delete the current row from a table. Then in HTML I put that function into an 'input' element which will trigger the function in an 'onclick' action. Everything works fine if I make the input type="button", but if I make it type="image" as you can see below, even with "return false;", whenever I press enter in any of the input field in the same row, it will trigger the delete function.

I don't know why. 

 function deleteRow(r)
{   
var rowLength= document.getElementById("newOrder").rows.length; //get how many rows are in this table

if (rowLength == 2)  //if there are only two rows (including header), then don't allow to delete a row
{
    alert ("At least one row is needed to create an order.");
    return;
} else  //if row number is greater than 2, then delete a row is allowed
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("newOrder").deleteRow(i);
}

following is the HTML code

        <tr>
        <td class="item"><input type="image" onclick="deleteRow(this); return false;" src="img/delete.png" height="20" width="20" alt="delete"><input type="text" class="biginput, item"  ></td>
        <td class="detail"><input class="detail" type="number" ></td>
        <td class="detail"><input class="detail" type="number" ></td>
        </tr>

Upvotes: 1

Views: 2555

Answers (1)

KKS
KKS

Reputation: 3630

Use this: Demo Link

<form>
    <input id="image" onclick="return deleteRow(this);" type="image" src="img/delete.png" height="20" width="20" alt="delete" />
</form>

Using pure javascript: 

function deleteRow(instance) {
    alert("delete");
    return false;
}

Using jquery as you have tagged jquery in your post:

$('#image').click(function(event) {
    event.preventDefault(); // yaa!
alert("delete");
});

Upvotes: 1

Related Questions