create div using form data with Ajax / Jquery

Question

heres my form, don't know if I've set it up correctly for use with AJAX however...

<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>

I basically am wondering how to create a div with the class="cloud" and put the first input item "cloudName" in the first p tag in the div, and "cloudFamily" in the second p tag in the div that we create when we press the add button...hopefully there is a script that will allow us to continually add divs as well. Any help appreciated. I've searched online for adding divs with AJAX but nothing is working, maybe because I am making other ajax calls elsewhere on the page? Dont know if that would effect it or not

Jeremy · Accepted Answer · 2012-09-14 20:06:32Z

2

Here's an example that should work for you assuming you are able to get jQuery working. Note, this assumes you have a container (to place the new div) named cloudcontainer:

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

Javascript would look like this:

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

The resulting HTML would look like this:

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

I've prepared a working JSFIDDLE example at this link: Example

edited Sep 14, 2012 at 20:06

answered Sep 14, 2012 at 19:55

Jeremy

9,0402 gold badges39 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mike Over a year ago

o my dear lord, it works perfectly, then as soon as the div is populated, the page refreshes and it goes back to the way it was without a div at all...Any idea as to why this is happening?

Jeremy Over a year ago

Sounds to me like the result of a PostBack. If you are using ASP.NET, then consider disabling PostBack for the element performing the 'refresh'. If its a button, you could do something like <asp:Button ID="btnMyButton" runat="server" Text="Foo" OnClientClick="javascript:return false;" />. Or, even easier, don't use a server control, simply use the standard html button (without using runat="server"). By the way, that is a separate question and doesn't have anything to do with the answer I gave (which does work).

mike Over a year ago

I put return false; inside the click function after the append function and it worked...not sure if its correct code but it works perfectly?!?!?!...thank you very much!!!

R Down · Accepted Answer · 2012-09-14 19:42:16Z

1

Your AJAX callback would look something like this:

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
}

answered Sep 14, 2012 at 19:42

R Down

2,2892 gold badges18 silver badges23 bronze badges

1 Comment

mike Over a year ago

this seems like it should work, but I can't get anytype of jquery create div script to work, may this be because I am running other ajax elsewhere on the page?? heres the start of the other ajax im using to get xml... $.get('Data.xml', function(xmldata) {}); also, how would I append all the code you supplied??

Ram · Accepted Answer · 2012-09-14 20:03:50Z

1

Try this:

$('<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/

edited Sep 14, 2012 at 20:03

answered Sep 14, 2012 at 19:41

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

create div using form data with Ajax / Jquery

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related