Delete Row With jQuery
===

I wonder whether someone may be able to help me please.

The **extract** of code below successfully creates a table showing records pertinent to the current user.


    /* display row for each location */ 
    echo "<tr>\n"; 
    $theID = $row['locationid']; 
    echo " <td style='text-align: Center'>{$row['locationname']}</td>\n"; 
    echo " <td style='text-align: Left'>{$row['returnedaddress']}</td>\n"; 
    echo " <td style='text-align: Center'>{$row['totalfinds']}</td>\n"; 
    echo " <form name= 'locationsconsole' id= 'locationsconsole' action= locationsaction.php  method= 'post'><input type='hidden' name='lid' value=$theID/> 												<td><input type= 'submit' name= 'type' value= 'Details'/></td><td><input type= 'submit' name= 'type' value= 'Images'/></td><td><input type= 'submit' name= 'type' value= 'Add Finds'/></td><td><input type= 'submit' name= 'type' value= 'View Finds'/></td><td><input type= 'submit' name= 'type' value= 'Delete'/></td></form>\n"; 
        </tbody> 
        </table> 
        <div align="center"><p id="deletelocationresponse"></p></div>

At the end of this section of code, you'll see that there is a `Delete` button. Upon clicking this, a record is deleted from the table and the deletion functionality works correctly.

In addition to the delete button you'll notice that there is a div called `deletelocationresponse`. This runs a jquery script to provide onscreen messages to the user telling them whether the deletion has been successful or not. The code for this is below.

    <script type="text/javascript">
    $(document).ready(function(){
    	$('#locationsconsole').submit(function(){
    		
    		//check the form is not currently submitting
    		if($(this).data('formstatus') !== 'submitting'){
    		
    			//setup variables
    			var form = $(this),
    				formData = form.serialize(),
    				formUrl = form.attr('action'),
    				formMethod = form.attr('method'), 
    				responseMsg = $('#deletelocationresponse');
    			
    			//add status data to form
    			form.data('formstatus','submitting');
    			
    			//show response message - waiting
    			responseMsg.hide()
    					   .addClass('response-waiting')
    					   .text('Please Wait...')
    					   .fadeIn(200);
    			
    			//send data to server for validation
    			$.ajax({
    				url: formUrl,
    				type: formMethod,
    				data: formData,
    				success:function(data){
    					
    					//setup variables
    					var responseData = jQuery.parseJSON(data), 
    						klass = '';
    					
    					//response conditional
    					switch(responseData.status){
    						case 'error':
    							klass = 'response-error';
    						break;
    						case 'success':
    							klass = 'response-success';
    						break;	
    					}
    					
    					//show reponse message
    					responseMsg.fadeOut(200,function(){
    						$(this).removeClass('response-waiting')
    							   .addClass(klass)
    							   .text(responseData.message)
    							   .fadeIn(200,function(){
    								   //set timeout to hide response message
    								   setTimeout(function(){
    									   responseMsg.fadeOut(300,function(){
    									       $(this).removeClass(klass);
    										   form.data('formstatus','idle');
    									   });
    								   },2000)
    								    setTimeout(function() { 
    								 	$('body').fadeOut(400, function(){
    								 	location.reload();
    									setTimeout(function(){
    								    $('body').fadeIn(400);
    									 }, 500);
    									 window.scrollTo(x-coord, y-coord);
    								 });
    							}, 2000);							
    						});
    					});
    				}
    			});
    		}
    		
    		//prevent form from submitting
    		return false;
    	});
    });
    </script>
    <style type="text/css">
    #deletelocationresponse {
    	display:inline;
    	margin-left:4px;
    	padding-left:20px;
    	font:Calibri;
    	font-size:16px;
    }
    
    .response-waiting {
    	background:url("images/loading.gif") no-repeat;
    }
    
    .response-success {
    	background:url("images/tick.png") no-repeat;
    }
    
    .response-error {
    	background:url("images/cross.png") no-repeat;
    }
    </style>

The problem I'm having is that when the `Delete` button is clicked the onscreen message is stuck on the `Please wait` message.

Now I know this script works, because I use it on my other pages, obviously with the relevant fields changed. So I've narrowed it down to a problem in it picking up my form name, which is this line in the jQuery code: `$('#locationsconsole').submit(function(){`.

On my other pages my form is created via HTML whereas this script uses PHP.

I've tried researching this, but I'm not particularly well versed in JavaScript, so I'm not too sure what I should be looking for. Could someone possibly tell me please is there a way to call the form in a different way?

Any help would be gratefully appreciated.

Many thanks and kind regards
