提交表單后禁用重新加載頁面

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帶按鈕的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;否則， return false; 提交表單時調用的函數將阻止表單提交。

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

Answer 5

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

額外的return false; 使其不會像通常那樣提交表單。