創建使用表單數據與阿賈克斯/ jQuery的

我的繼承人形式DIV，不知道我是否正確設置它爲使用AJAX但是...創建使用表單數據與阿賈克斯/ jQuery的

<form id="form" method="post"> 
<input id="cloudName" name="cloudName" type="text" placeholder="Enter cloud name"> 
<input id="cloudFamily" name="cloudFamily" type="text" placeholder="Enter cloud family"> 
<button id="add" type="submit" name="add">Add</button> 
</form>

我基本上想知道如何創建一個class =「cloud」的div，並將第一個輸入項「cloudName」放入div中的第一個p標籤中，並將第二個p標籤中的「cloudFamily」放入我們按下添加按鈕時創建的div中。 .hopefully有一個腳本，可以讓我們不斷添加div。任何幫助讚賞。我在網上搜索用AJAX添加div，但沒有任何工作，也許是因爲我在頁面上的其他地方做了其他的Ajax調用？不知道這是否會影響與否

來源

2012-09-14 mike

下面是一個例子應該爲你工作假設你能夠讓jQuery工作。請注意，這裏假設你有一個名爲container cloudcontainer（放置新格）：

<div class="cloudcontainer"></div>

的Javascript應該是這樣的：

$('.cloundcontainer').append('<div class="cloud"><p>'+$('#cloudName').val()+'</p><p>'+$('#cloudFamily').val()+'</p></div>');

產生的HTML應該是這樣的：

<div class="cloundcontainer"> 
    <div class="cloud"> 
     <p>...</p> 
     <p>...</p> 
    </div> 
</div>

我在這個鏈接上準備了一個可用的JSFIDDLE示例：Example

來源

2012-09-14 19:55:45 Jeremy

o我親愛的主人，它完美的工作，然後只要div被填充，頁面刷新，它回到了沒有div的方式...任何想法爲什麼發生這種情況？ – mike

聽起來像是一個PostBack的結果。如果您使用的是ASP.NET，請考慮爲執行「刷新」的元素禁用PostBack。如果它是一個按鈕，你可以做一些像''。或者，更簡單的是，不要使用服務器控件，只需使用標準的html按鈕（不使用runat =「server」）即可。順便說一下，這是一個單獨的問題，與我給出的答案無關（它確實有效）。 – Jeremy

我把return false;在append函數後面的click函數中，它工作了......不知道它的正確代碼是否正常工作？！？！？！...非常感謝你！ – mike

試試這個：

$('<div/>', { 
    'class': 'cloud', 
    html: '<p></p><p></p>' 
}).prependTo('form');  


$('.cloud p').each(function(i,v){ 
    $(this).append($('form input').eq(i)) 
})

http://jsfiddle.net/Wb8TZ/

來源

2012-09-14 19:41:57 undefined

您的AJAX回調會是這個樣子：

success: function(data) { 
    $('<div class="cloud">'); // Creates the holder div 
    $('<p class="cloudname">').html(data.cloudname).appendTo('.cloud'); // Create the cloud name p element and attach to cloud placeholder 
    $('<p>').html(data.cloudfamily).appendTo(".cloudname"); // Do the same for the cloudfamily 
}

來源

2012-09-14 19:42:16

這似乎應該工作，但我無法獲得任何類型的jquery創建div腳本工作，可能這是因爲我在頁面上的其他地方運行其他Ajax？繼承人另一個AJAX IM開始使用得到XML ... $ .get（'Data.xml'，function（xmldata）{}）; 另外，我將如何追加你提供的所有代碼？ – mike

創建使用表單數據與阿賈克斯/ jQuery的

回答

相關問題