I have an html form that has a jquery ajax script to the form_handler.php. The php output echos a list of todo items plus date and person name.
Below is the php page. The data isn't persistent , I am just writing the ajax. What I want to do is to create a delete button for the task and add a checkbox to the ajax and delete button to the task and output to the response div.

So the output should be:
checkbox + task + delete button

Here is the php form:

   if(isset($_POST['task_todo'])) {
    $task = $_POST['task_todo'];
    $name = $_POST['todo_name'];
    $date = $_POST['due_date'];

 echo $task;
   echo $name; 
    echo $date; 
   die();
}

My Jquery is working to just output the 3 text fields but I only need one field plus I need to add the buttons. I don't know if I need JQuery UI for the buttons or to use my own buttons. Whatever works. I don't know how to edit the response to just get the task from the page and then add a checkbox and a delete button in jquery.

<script type-"text/javascript">
function submitForm() {

					 $.ajax({type:'POST', url: 'form_handler.php',   data:$('#taskForm').serialize(),
					 success: function(response) {
                            $('#taskForm').find('.taskList').html(response);
                     }});
                     return false;

                 }

    Can you provide some more code? What you posted was not a form. Also I'm not exactly sure what the problem is.

      I have a web site for testing I tried to put the page on and it seems like AJAX doesn't work when you have a loop back account on dyndns. I could put it on jsfiddles.net except they don't have php for the form_hander page. I was also trying to read the jquery AJAX callback documentation and it isn't clear to me. I pasted the whole working form below. This page works perfectly with the simple form handler php page. The problem is I need to filter the data. I only need the task_todo returned but I need a checkbox in front of the task so the task can be either checked or unchecked and I need a delete button to the right so it can be deleted. I have an image for a delete button. I thought I would use a form input checkbox for the checkbox button. This page as it is works and returns all three fields but as I sad it needs to be filtered for only one field with both buttons on either side of it.

      I tried working on the problem some more. You have to filter the data something like this.
      dataValue= $response.filter('task_todo').val(); You have to get a var for the response object.
      var $response=$(data); and you have to display the response. I'm not clear on that or how to change the below so it works.
      Thanks.

      
	<title>Taskos</title> 
	<style> 
	body { background: #ccc; font-family: Arial; } 
	form { background: white;  text-align: center; float: left; padding: 1em 
		0.3em;   } 
		form div { margin: 0.2em 0; } 
		h2 {  font-size: 120%; font-weight: bold; margin: 0;} 
		input { border: solid 1px #999; } 


		</style> 

<link type="text/css" href="js/jquery_theme/jquery-ui.css" rel="stylesheet" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>



<script type="text/javascript"		src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/jquery-ui-datepicker-en-US.js"></script>
			<script type-"text/javascript">
					function submitForm() {

					 $.ajax({type:'POST', url: 'form_handler.php', data:$('#taskForm').serialize(),
					 success: function(response) {
                            $('#taskForm').find('.taskList').html(response);
                     }});
                     return false;

                 }
				$(function() {
				     $( "#due_date" ).datepicker({
					   clickInput:true,
					dateFormat: 'm/d/yy',
				       minDate:  +52,
				       maxDate: '+2y',
				        defaultDate: "+1d",
				        showOtherMonths: true,
				        selectOtherMonths: true,
				       changeMonth: true}) ;
			});


			$.datepicker.setDefaults($.datepicker.regional['en']);				



	   </script>

<body>
<form id="taskForm" onsubmit="return submitForm();"> 
<h2>taskos</h2> 
<div>&mdash; a tasklist todo app &mdash;</div> 
<div><input size=30 name="task_todo" value="What needs to be done?" style="width:15em"></div> 
<div><input size=20 name="todo_name" value="By whom?" style="width:10em"><input id="due_date" size=10 name="due_date" value="By when?" style="width: 5em"></div> 
<div><input type="submit" value="submit" style="border: inset 1px; background: "#ddd"></div> 
<div class="taskList">&nbsp;</div>
</form>

</body>

        this question isn't resolved but I will re-post and word the question a different way.

          Write a Reply...