Unable to Pass Text Field Value To AJAX

[hobbiton73]

Hello, I wonder whether someone may be able to help me please with a problem I've been working on for a number of days which I just can't solve.

 

The extract of code below shows part of a script which I use to successfully create a table of 'location' records pertinent to the current user.

 

<form name="delete" id="delete" class="delete">
<input type="hidden" name="lid" id="lid" value="<?php echo $theID ?>" />
<input type="submit" value="Delete Record"/>
</form>

 

The problem I'm having is around the `deletion a `location record`.

 

Originating here http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/, upon clicking the `delete` button, the 'Delete Confirmation' message appears on screen and the user can select `Yes` or `No`.

 

If the user selects `Yes`, the `lid` value should be passed to the jQuery AJAX script below and onto a 'deletion' PHP script.

 

<script type="text/javascript">
		$('.delete').submit(function(e){ 
		e.preventDefault();
		var elem = $(this).closest('.delete');
		console.log($(this).serialize());
		$.confirm({
		'title'		: 'Delete Confirmation',
		'message'	: 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
			'buttons'	: {
				'Yes'	: {
			'class'	: 'blue',
			'action': function(){
			//elem.slideUp();
					      $.ajax({ 
						url: 'deletelocation.php', 
						type: 'POST', 
						data: $(this).serialize(), 
						success: function(response) { 
						console.log('success', response); 
						}, 
						error: function() { 
						console.log('error') 
						} 
						}); 
				}
			},
			'No'	: {
				'class'	: 'gray',
				'action': function(){}	// Nothing to do in this case. You can as well omit the action property.
			}
		}
	});

});

</script>   

   

 

and this is my`deletelocation.php` script called in the above code:

 

<?php

		$lid = $_POST['lid'];

		$query = mysql_query("DELETE FROM table WHERE locationid='$lid'");

?>

 

The problem I'm having is that I cannot find a way to pass the value from the form through the AJAX script and delete the record. The 'Delete Confirmation message' correctly appears on screen, but when  I select yes the record is not deleted.

 

In JS Console I receive the following message:

 

lid=5

success

 

So I do know that it is picking up the correct 'lid' value but it's just not passing it through to delete script.

 

I just wondered whether someone could possibly take a look at this please and let me know where I'm going wrong.

 

Many thanks and kind regards

[jazzman1]

This statement is wrong :

 

$('.delete').submit(function(e) {

}

[jazzman1]

If you want an event to work on your page, you should call it inside the $(document).ready() function:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('form.delete').submit(function(e){
          console.log('submit'); return false;   
        })
    })
</script>   
<form name="delete" id="delete" class="delete">
<input type="hidden" name="lid" id="lid" value="1" />
<input type="submit" value="Delete Record"/>
</form>

[jazzman1]

I've modified a little bit your code I think now is gonna be fine.

Good luck

index.php:

 

// include jquery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
// include jquery confirm method
<script src="jquery.confirm.js"></script> 
<script type="text/javascript">
    $(document).ready(function(){
        $('form.delete').submit(function(e){ 
                        
		e.preventDefault();
		var elem = $(this).closest('.delete');
		var lid = $(this).serialize();
		$.confirm({
        		 'title'	: 'Delete Confirmation',
		'message'	: 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
			'buttons'	: {
				'Yes'	: {
			'class'	: 'blue',
			'action': function(){
			//elem.slideUp();
					      $.ajax({ 
						url: 'deletelocation.php', 
						type: 'POST', 
						data: lid, 
						success: function(response) { 
						console.log('success', response); 
						}, 
						error: function() { 
						console.log('error') 
						} 
						}); 
				}
			},
			'No'	: {
				'class'	: 'gray',
                                        'action': function(){}	// Nothing to do in this case. You can as well omit the action property.

			}
		}
	});

});
        
    })
</script>   
<form name="delete" id="delete" class="delete">
<input type="hidden" name="lid" id="lid" value="<?php echo $theID ?>" />
<input type="submit" value="Delete Record"/>
</form>

 

deletelocation.php

 

$lid = intval($_POST['lid']);

$query = mysql_query("DELETE FROM table WHERE locationid='".$lid."'");

 

jquery.confirm.js

 

(function($){

$.confirm = function(params){

	if($('#confirmOverlay').length){
		// A confirm is already shown on the page:
		return false;
	}

	var buttonHTML = '';
	$.each(params.buttons,function(name,obj){

		// Generating the markup for the buttons:

		buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';

		if(!obj.action){
			obj.action = function(){};
		}
	});

	var markup = [
		'<div id="confirmOverlay">',
		'<div id="confirmBox">',
		'<h1>',params.title,'</h1>',
		'<p>',params.message,'</p>',
		'<div id="confirmButtons">',
		buttonHTML,
		'</div></div></div>'
	].join('');

	$(markup).hide().appendTo('body').fadeIn();

	var buttons = $('#confirmBox .button'),
		i = 0;

	$.each(params.buttons,function(name,obj){
		buttons.eq(i++).click(function(){

			// Calling the action attribute when a
			// click occurs, and hiding the confirm.

			obj.action();
			$.confirm.hide();
			return false;
		});
	});
}

$.confirm.hide = function(){
	$('#confirmOverlay').fadeOut(function(){
		$(this).remove();
	});
}

})(jQuery);

[hobbiton73]

Hi @jazzman1, I don't know what to say. This works like a dream.

 

I can't really express how grateful I am. Thank you so much for all your help, time and trouble, it's so greatly appreciated.

 

Many thanks, all the best and kind regards