禁用表单提交后重新加载页面

Question

我有一个脚本可以创建动态表格。当用户点击按钮时，表格底部会添加下一行row。

function createRow()
        {
            var options='<select name="nameselect'>
            options+='<option>one</option>';
            options+='</select>';
        options+='<input type=\'submit\' name=\'loadReq\' value=\'Pobierz dane\' />';
            var form = document.createElement('form'); // create row node
            var row = document.createElement('tr'); // create row node
            var col = document.createElement('td'); // create column node
            var col2 = document.createElement('td'); // create second column node
            var col3 = document.createElement('td'); // create column node
            var col4 = document.createElement('td'); // create second column node
            var col5 = document.createElement('td'); // create column node
            var col6 = document.createElement('td');
            form.appendChild(col);
            row.appendChild(form); // append first column to row
            row.appendChild(col2); // append second column to row
            row.appendChild(col3); // append first column to row
            row.appendChild(col4); // append second column to row
            row.appendChild(col5); // append first column to row
            //row.appendChild(col6);
            col.innerHTML = options; 

            col2.innerHTML = 'some text'; // put data in second column
            col3.innerHTML = 'some text';
            col4.innerHTML = 'some text';           
            col5.innerHTML = 'some text';
            table.insertAdjacentElement('beforeEnd', row);
            counter++;
        }

现在我正在将带有一些文本值的行添加到2-5列，并使用下拉列表和按钮作为第一列的表单。

但是，每当我提交表单时，页面都会重新加载，因此我的JavaScript函数效果不再存在，结果我得到的页面与我之前打开的页面完全相同，我添加的行也消失了。

是否可以提交表单而不会失去JavaScript函数的效果？

- Mithrand1r

---

在您的函数的结尾添加 return false;。 - Mostafa Shahverdy

很遗憾，没有成功... - Mithrand1r

你真的想提交表单（在这种情况下到另一个页面）还是只需点击执行Javascript的按钮？ - Marshall

如果你真的需要提交，你需要在加载之间记住整个当前页面的内容。否则，一个 AJAX 调用可能就足够了。 - Mr Lister

在提交表单后，我可以“读取”我的PHP中select标签的值，以便将该值放入其他列。 - Mithrand1r

Answer 1

你可以考虑使用AJAX提交表单: http://www.malsup.com/jquery/form/ 这样，你可以使用表单中的数据执行一些操作，并在无需触发完整页面刷新的情况下向用户提供反馈。

- Rick van Bodegraven

Answer 2

我觉得你可能对PHP/Javascript的各种可能性感到迷茫。

如果你想要展示给用户更新后的内容，即使你想要使用用户输入的数据，也不需要提交表单。这可以通过Javascript实现（无需重新加载页面）：

var userInput = document.getElementById('userInput').value;

如果你想在PHP中提交表单以获取和使用用户输入（例如更新数据库...），你可以提交表单，当你重新显示它时（页面重新加载后），用先前的用户输入初始化它。做类似这样的事情：

echo '<input type="text" name="userInput" value="'.$_POST['userInput'].'">';

- Marshall

---

你是完全正确的。但是你必须把我的问题看作是一个整体 - 问题是在提交表单时，var col = document.createElement('td'); 这些元素会消失，因此插入的行也会消失，我不知道如何避免这种情况。 - Mithrand1r

我想告诉你的是，因为你没有全局视图来了解提交、生成页面等过程，所以你没有朝着正确的方向搜索。 - Marshall

你可以在PHP中处理用户输入并按照要求构建表格（包括正确数量的行和其中的正确数据），或者不提交表单并使用Javascript处理所有数据... - Marshall

Answer 3

要么取消按钮点击的默认行为，要么将其从<input type="submit">更改为<input type="button">或<button>（两者都没有默认行为）。

- Rijk

---

我需要将它设置为“submit”，以便进行“POST”，这样我就能够将“select”字段的值加载到我的“php”变量中，但我不想丢失用户输入的数据。 - Mithrand1r

Answer 4

如果在表单提交时调用的函数中添加return false;，它将阻止表单提交。

function createRow(){
    /*Code*/
    return false;
}

- Kevin Bowersox

---

但问题是表格只放在第一列。在函数结尾处返回false没有任何影响。 - Mithrand1r

Answer 5

    table.insertAdjacentElement('beforeEnd', row);
    counter++;
    return false;
}

return false;的作用在于防止表单像通常一样被提交。

- Xenolithic