ansaurus

Question

jquery add li item to ul and submit it with php to save in sql

Answer 1

A:

Your code is very wrong and is some mixture of jQuery and plain JavaScript. Here is an example how should be done:

var id = 1;
$(".add_item").click(function() { 
    if(id<5){
        $("#elem ul").append('<li id="listItem_"'+ id +'>Item Added Nr.'+ id +'</li>');
        $.ajax({ url: "addItem.php", item: "listItem_"+ id});
        id++;
    }
});


<div id="elem">
    <ul id="test-list">
    </ul>
</div>
<p><a href="#" class="add_item">Add New Item</a></p>

Each time a user adds an item you should execute AJAX call to your PHP script, e.g. you can use $.ajax, $.post or $.get function, each time the PHP script is called you should save the received item in the database.

AJAX - http://api.jquery.com/jQuery.ajax/

Check the code again.

infinity 2010-10-30 13:05:46

hi, thanks for the reply ..the problem isi want to submit them using a php form and get the new added items in the submitted form data ..i can add elements it is working well, but the php posting is not getting the elements i added to the list ..

jqueryanfänger 2010-10-30 13:08:10

http://www.wil-linssen.com/demo/jquery-sortable-ajax/ here is a list with example, iam adding new items, but they wont appear in the array submitted with php form

jqueryanfänger 2010-10-30 13:12:38

Use AJAX to update user records each time he adds a list item, or other way which is not very good approach is on each added item to create hidden input field, e.g. $("#form").append('<input type="hidden" name="item[]" value="'+id+'" />');

infinity 2010-10-30 13:26:37

Answer 2

A:

hi infinity, iam trying your code, but it is not working ..

this is what i have :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<link rel='stylesheet' href='styles.css' type='text/css' media='all' />
<script type="text/javascript">
var id = 1; 
$(".add_item").click(function() {  
    if(id<5){ 
        $("#elem ul").append('<li id="listItem_"'+ id +'>Item Added Nr.'+ id +'</li>'); 
        $.ajax({ url: "addItem.php", item: "listItem_"+ id}); 
        id++; 
    } 
}); 
</script>
</head>
<body>
<div id="elem"> 
    <ul id="test-list"> 
    </ul> 
</div> 
<p><a href="#" class="add_item">Add New Item</a></p> 
</body>
</html>

what am i doing wrong?

jqueryanfänger 2010-10-30 14:27:48

ansaurus

tags:

views:

answers:

jquery add li item to ul and submit it with php to save in sql

related questions