動態生成的字段和數據提交後仍然保留

我正在一個窗體中，我有一個動態的字段，我可以添加和刪除輸入和下拉字段。動態生成的字段和數據提交後仍然保留

我的問題是我不知道如何使我添加的字段以及該字段上的數據在提交後保留。

<script type="text/javascript"> 
    document.getElementById('tonnage').value = "<?php echo $_POST['tonnage'];?>"; 
</script>

我試過這個代碼的選擇標記保持值，但沒有奏效。

這裏是我的示例代碼。

BOOTPLY

我希望你能幫助我，謝謝。

來源

2017-04-06 Mark Gerryl Mirandilla

你應該有一個服務器端的API POST數據並將其存儲在您的數據庫 –

對不起，先生，我不知道該怎麼做..我從其他線程學習我可以使用localstorage，但它也是複雜。 –

假設您不想設置服務器來存儲此信息，則只剩下幾個選項。具體來說就是客戶端存儲。我會覆蓋localStorage，因爲它是最容易使用的，你已經在上面提到過了。

這是localStorage API。如果您認爲界面過於複雜，我會建議給它一個通讀，也許還有一個tutorial（我個人認爲Mozilla文檔更好，但這個tut看起來更適合您的應用程序）。

總之，您將使用setItem(...)和getItem(...)方法。

localStorage.setItem("My test key", "My test value");

console.log(localStorage.getItem("My test key")); // --> My test value

因此，對於您的應用程序，我建議創建一個對象，以您的值存儲在再附加說對象localStorage。

var state = {} 
// Get values from your form however you feel fit 
values = getValues(...); 
function setValues(values) { 
    // Do this for all the values you want to save 
    state.values = values 
    // Continues for other values you want to set... 
} 
// Save values to localStorage 
localStorage.setItem("Application_State", state);

現在用於檢索用戶返回您的網站時的狀態。

// Application_State is null if we have not set the state before 
var state = localStorage.getItem("Application_State") || {}; 
function updateValues() { 
    values = state.values; 
    // Render your values to the UI however you see fit 
}

這是一個非常簡要介紹在這裏，我會鼓勵你把它發佈到生產就緒的網站之前，請仔細閱讀這些東西的文檔。

希望這會有所幫助& &祝你好運！

來源

2017-04-10 00:23:24

謝謝先生您的幫助，我會讀你的所有建議.. –

如果你想爲select輸入設定值，你只需要設置所需option爲selected：

var myValue = "<?php echo $_POST['tonnage'];?>"; 
$("#tonnage option").each(function(){ 
    if($(this).val()===myValue) 
    $(this).prop('selected',true); 
});

另一種方式爲this answer提到：

var myValue = "<?php echo $_POST['tonnage'];?>"; 
$("#tonnage").val("val2");

重要的一點是當您克隆某個部分並再次追加時，某些元素似乎有重複id。例如tonnage id是重複的。這可能會導致誤解。

來源

2017-04-10 17:19:06

謝謝先生，我試試吧 –

所以提交後，你已經在你的$_POST有數據。

現在您只需循環訪問$_POST陣列，並預先創建所有字段行的所有select & input字段行。

我猜你已經在做這件事了，你的問題是填充它們中的數據。

# Set a json array variable. 
var tonnages = <?php echo json_encode($_POST['tonnage']) ?>; 
var tablesize = ... 
# Do the same for others... 

# Now just loop through the select fields. 
$("select[name='tonnage[]']").each(function(i, el) { 
    $(el).val(tonnages[i]); 
}); 

$("select[name='tablesize[]']").each(function(i, el) { 
    ... 
}); 
# Do the same for others...

希望這會有所幫助。

來源

2017-04-11 11:06:53 TipuZaynSultan

謝謝先生，我試試吧 –

如果您按照以下代碼異步提交代碼，所有動態字段的值將保持不變。

$().ready(function() { 
     $('form').submit(function() { 
      $.post($(this).attr('action'), $(this).serialize(), function (result) { 
       console.log(result); 
      }); 
      return false; 
     }); 
    });

來源

2017-04-13 21:56:09

我認爲你需要有選擇的值以及所有動態域提交表單後，也可以按照下面的步驟來實現相同的：

負載形式並生成動態域（你已經做到了）
帖子的形式，並將其保存在服務器（使用PHP/MySQL或其他服務器腳本）在編輯模式下
加載表單，你從數據庫中保存的數據，並基於這一點，你可以生成負載上的動態字段爲y ou已經有來自數據庫的所有數據

讓我知道它是否有幫助。

來源

2017-04-15 06:29:15

謝謝先生的幫助，但我需要看到我所有的數據仍然存在在將它保存到數據庫之前有一個錯誤。 –

您可以通過AJAX發佈表單進行保存，並返回帶有表單數據的響應，即使它返回錯誤，所以如果出現錯誤，您可以顯示錯誤並加載數據。 –

我明白了..好吧，先生，我會那樣做的。謝謝 –

動態生成的字段和數據提交後仍然保留

回答

相關問題