html表单调用javascript函数，并且其提交按钮返回false

Question

I have a html form which calls a java script function, this is the form tag:

<form name="myForm1" method="post" action="test" onsubmit=" updateTable();">

and the submit button of this form inserts data in the database, but after inserting it moves to a blank page, I want it to stay in the same page to insert more data, this is the javascript function:

function updateTable() {
    tabBody = document.getElementById("editable");
    row = document.createElement("tr");
    cellID = document.createElement("td");
    cellname = document.createElement("td");
    cellID.innerHTML = document.forms['myForm1'].elements[1].value;
    cellname.innerHTML = document.forms['myForm1'].elements[0].value;
    row.appendChild(cellID);
    row.appendChild(cellname);
    if (tabBody.childNodes.length == 10) {
        tabBody.removeChild(tabBody.childNodes[0])  
    }

    document.getElementById("mytb").style.display = "block";
    tabBody.appendChild(row);
}

and this is the code of the button:

<input id="SaveBtn" name="SaveBtn" type="submit" value="حفظ" onclick="return false;">

and return false doesn't work.

Does any one have a solution?

Answer 1

Have you tried preventDefault() ?

function updateTable(e) {

    e.preventDefault();

    tabBody = document.getElementById("editable");
    row = document.createElement("tr");
    cellID = document.createElement("td");
    cellname = document.createElement("td");
    cellID.innerHTML = document.forms['myForm1'].elements[1].value;
    cellname.innerHTML = document.forms['myForm1'].elements[0].value;
    row.appendChild(cellID);
    row.appendChild(cellname);
    if (tabBody.childNodes.length == 10) {
        tabBody.removeChild(tabBody.childNodes[0])  
    }

    document.getElementById("mytb").style.display = "block";
    tabBody.appendChild(row);

    return false;
}

EDIT: As pointed out in comment below. You'll have to pass the event too.

<form name="myForm1" method="post" action="test" onsubmit=" updateTable(event);">

Answer 2

You should add return false; at the end of your updateTable() function.

This will prevent the form submission to complete.

Answer 3

If return false doesn't work. You can also try to get the first argument (the event) and prevent the default action on it:

function updateTable( event ){
    // do your stuff
    // ...
    event.preventDefault();
    return false;
}

Answer 4

Don't use the onsubmit property.

<form name="myForm1" method="post" action="test" onsubmit=" updateTable();">

Use onclick like below. Control will remain in same page.

<form name="myForm1" onclick=" updateTable();">

In the updateTable() function use AJAX call to insert the data.