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

所以現在IM使用按鈕添加一行some text值在2-5列，並與drop down list作爲一種形式第一列。

但每當我提出我的表格，頁面重新加載，所以我JavaScript功能的效應就不再出現在結果當我打開前後排我加消失，我得到exacly相同的頁面。

是否可以提交表格並且不放鬆JavaScript功能的效果？

Answer 1

我想你是一種失去了與PHP/Java腳本的一切準備。

要更新您的顯示給用戶的，即使你想使用用戶在表單中輸入的數據，你不需要提交表單。它可以使用JavaScript來完成（無需重新加載頁面）：

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

現在如果你想提交表單，以獲得和你的PHP中使用用戶輸入（更新例如數據庫......），你可以提交表單以及重新顯示錶單（頁面重新加載後）時，使用前面的用戶輸入進行初始化。做這樣的事情：

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

Answer 2

你可以考慮使用AJAX來提交表單：http://www.malsup.com/jquery/form/

這樣，您就可以使用數據的形式來執行一些操作，以及向用戶提供反饋，而無需觸發刷新整個頁面。

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;使得它如此的形式提交不喜歡它通常會。