CODICE HTML

jQuery Add to Queue

jQuery Add to Queue

Add to queue:

Queue:

CODICE CSS

 
#queue {
background-color: #CCCCCC;
padding: 6px;
border: 1px solid #000000;
}
#queue > div {
background-color: #66CC66;
border: 1px solid #FFFFFF;
margin: 4px;
padding: 4px;
display: none;
}
 

CODICE JAVASCRIPT

 
$(document).ready(function() {
// wait for form submission
$("#form").submit(function() {
// get the input element and text
var input = $("#input");
var text = input.val();
// check if text was entered
if(text.length > 0) {
// create a new div element, add it to queue and animate
var element = $(‘
‘ + text + ‘
 
‘);
element.prependTo("#queue").slideDown();
// clear input field
input.val(”);
}
// prevent default form action
return false;
});
});
 

AGGIUNGIAMO L’AJAX

 
$(document).ready(function() {
// wait for form submission
$("#form").submit(function() {
// get the input element and text
var input = $("#input");
var text = input.val();
// check if text was entered
if(text.length > 0) {
//post data to process.php and get json
$.post(‘process.php’, { data: text }, function(data) {
// if process.php returns success
if(data.status == ‘success’) {
// create a new div element, add it to queue and animate
var element = $(‘
‘ + data.text + ‘
 
‘);
element.prependTo("#queue").slideDown();
// clear input field
input.val(”);
}
}, ‘json’);
}
// prevent default form action
return false;
});
});
 

FILE process.php

 
< ?php
if(isset($_POST[‘data’])) {
// add to database or something here
$text = htmlspecialchars($_POST[‘data’]);
echo "{‘status’:'success’,'text’:'" . $text . "’}";
}
else {
echo "{‘status’:'failed’}";
}
?>
 

fonte: www.sastgroup.com