Question

我有一个调用java脚本函数的html表单，这是表单标记：

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

并且此表单的提交按钮在数据库中插入数据，但插入后移动到空白页面，我希望它保持在同一页面中插入更多数据，这是javascript函数：

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);
}

这是按钮的代码：

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

并且返回false不起作用。

有人有解决方案吗？

Answer 1

您是否尝试过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;
}

编辑：正如下面的评论所指出的那样。你也必须通过这个活动。

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

Answer 2

您应在return false;功能的末尾添加updateTable()。

这将阻止表单提交完成。

Answer 3

如果返回false不起作用。您还可以尝试获取第一个参数（事件）并阻止对其执行默认操作：

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

Answer 4

请勿使用onsubmit属性。

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

如下所示使用onclick。控件将保留在同一页面中。

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

在updateTable()函数中使用AJAX调用来插入数据。

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

4 个答案: