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列中添加some text值的行，并在第一列中添加drop down list按钮作为表单。

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

是否可以提交表格并且不会失去JavaScript功能的效果？

Answer 1

您可以考虑使用AJAX提交表单：http://www.malsup.com/jquery/form/

这样，您可以使用表单中的数据执行某些操作，并向用户提供反馈，而无需触发整页刷新。

Answer 2

我认为你有点迷失PHP / Javascript的所有可能性。

要更新您向用户显示的内容，即使您要使用用户在表单中输入的数据，也无需提交表单。它可以使用Javascript完成（无需重新加载页面）：

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

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

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

Answer 3

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

Answer 4

如果您在提交表单时向调用的函数添加return false;，则会阻止表单提交。

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

Answer 5

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

额外的return false;使得表单不像通常那样提交。

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

5 个答案: