create div using form data with Ajax / Jquery

1
votes

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

3
jqueryajax

3 Answers

2
votes

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

1
votes

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
}
1
votes

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