使用jquery將表單輸入直接加載到頁面

我在一個頁面上有一個表單，其中一些表單數據是從我的mysql數據庫中的各個表中提取的 - 這些表包含不同選擇的選項，因此以下是這樣我的數據看起來的PHP腳本運行後：使用jquery將表單輸入直接加載到頁面

<select name="vehicleStyle"> 
    <option value="empty" selected="selected">- select -</option> 
    <option value="coupe">Coupe</option> 
    etc.... 
    </select>

我有第二個形式的貨物在此頁面中的iframe，這第二個形式允許我更新包含在這個MySQL表中的數據，使我可以隨時向表單添加選項。但是，如果我更新（添加一個值）到這個表中，我必須刷新頁面才能讓新數據以主頁上的第一個表單顯示出來。我玩過自動刷新頁面，但這有點令人厭惡。

有沒有辦法通過jquery將此表單數據直接添加到我的原始頁面？

我認爲twitter在你添加推文（我不使用twitter）時會做類似的事情，但它會將最近的推文添加到頁面的頂部，而不會實際重新加載整個頁面。

非常感謝！

來源

2010-09-23 Thomas

我認爲最好的辦法是使用負載jQuery函數（http://api.jquery.com/load/）。它可讓您直接從JavaScript加載網頁。

這裏是我會做什麼：

移動選擇創建一個新的URL（fillselect.php的爲例）
加載的頁面，而無需創建選擇：創建一個div標籤，而不是（命名爲divforselect爲例）
在頁面的onload javascript事件中，寫入： $("#divforselect").load("fillselect.php")這將導致div標籤innerText設置爲fillselect.php頁面的內容。所以url fillselect.php不會是一個完整的html頁面，而只會包含select標籤。

之後，只要你想刷新選擇，你可以撥打$("#divforselect").load("fillselect.php")！

來源

2010-09-23 17:18:58

這聽起來像我在找什麼，我很欣賞響應，但我不能完全包裹我實際上正在做的事情 - 我對JavaScript/jquery等非常陌生 - 此fillselect。 PHP頁面將只是一個空白頁面？我如何才能真正將數據輸入到那裏？目前我正在使用的這個頁面是一個mysql查詢結果，它通過數據庫循環來創建選擇，我嘗試使用.load（）在提交時加載它，但我無法得到它的工作，請寫 – Thomas 2010-09-23 17:32:22

@托馬斯 - 這可能會給你一些關於如何做ajax調用的指導：http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ – 2010-09-23 19:12:26

@ thomas：「fillselect.php」頁面將填寫您現在用於填充選擇的完全相同的代碼，您只需將該部分放在單獨的頁面中，以便只加載/重新加載選擇。 – 2010-09-24 05:52:00

我想你想用JS做DOM操作。所有你需要做的是與用戶輸入值的新選項標籤附加到SELECT一樣：

var option = $('<OPTION/>'); 
$(option).html('INSERT YOUR VALUE HERE'); 
$('SELECT').append(option);

記住：這是添加OPTION只是在客戶端上。因此，如果您的實際表單提交（在您的iframe中）無法將數據推送到您的數據庫，這將代表您的用戶（他會認爲新的OPTION已創建但實際失敗）的不一致視圖。

所以，你必須綁定你的UI更新與你的後端響應。通常，您需要在更新後端的調用的AJAX響應中刷新此UI。

來源

2010-09-23 17:04:47 Rajat

也許你應該使用AJAX填充框？然後你可以隨時刷新數據。

jQuery Ajax

來源

2010-09-23 17:06:11

使用jquery將表單輸入直接加載到頁面

回答

相關問題