title: Delete Record Confirmation Message
body: <p>I wonder whether someone may be able to help me please.</p>
  
  <p>Firstly, my apologies because I'm really very new to this, so please forgive me what some may seem a very basic question/error.</p>
  
  <p>The <strong>extract</strong> of code below, successfully creates a table of records pertinent to the current user.</p>
  
  <p><strong>Working Solution -</strong> Baylor Rae' worked tirelessly with me over the last 3-4 days to find a solution. All Baylor Rae' was unable to provide a fully successful script, they certainly helped considerably in moving this on . However the full working script below is <strong>Courtesy of jazzman1 @ PHP Freaks</strong></p>
  
  <p><strong>Main Script</strong></p>
  
  
  
  <pre><code> &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $('form.delete').submit(function(e){
                console.log('submit'); return false;   
              })
          })
      &lt;/script&gt;   
  
  &lt;script type="text/javascript"&gt;
      $(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 Location. &lt;br /&gt;It cannot be restored at a later time! Do you wish to 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.
  
                  }
              }
          });
  
      });
  
      })
  &lt;/script&gt;  
  </code></pre>
  
  <p><strong>jqueryconfim.js</strong></p>
  
  <pre><code>  (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 += '&lt;a href="#" class="button '+obj['class']+'"&gt;'+name+'&lt;span&gt;&lt;/span&gt;&lt;/a&gt;';
  
                  if(!obj.action){
                      obj.action = function(){};
                  }
              });
  
              var markup = [
                  '&lt;div id="confirmOverlay"&gt;',
                  '&lt;div id="confirmBox"&gt;',
                  '&lt;h1&gt;',params.title,'&lt;/h1&gt;',
                  '&lt;p&gt;',params.message,'&lt;/p&gt;',
                  '&lt;div id="confirmButtons"&gt;',
                  buttonHTML,
                  '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
              ].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);
  </code></pre>
  
  <p><strong>Form In Main Script</strong></p>
  
  <pre><code>&lt;form name="delete" id="delete" class="delete"&gt;
  &lt;input type="hidden" name="lid" id="lid" value="&lt;?php echo $theID ?&gt;" /&gt;
  &lt;input type="submit" value="Delete Record"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>deletelocation.php</strong></p>
  
  <pre><code>&lt;?php
  
      $lid = intval($_POST['lid']);
      $query = mysql_query("DELETE FROM table WHERE locationid='".$lid."'");
  
      ?&gt;
  </code></pre>
  
  <p>You'll see that the end of the table are four buttons, which, through the <code>locationsaction.php</code> script navigate the user to four different screens all linked back to the main table record via the <code>lid</code> value. This script is shown below.</p>
  
  <p>I'm now trying to implement a confirmation message for the <code>Delete</code> function. The source code for this can be found <a href="http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/" rel="nofollow">here</a>.</p>
  
  <p>This is where I've become a little unsure about what to do next. I've tried to link the button <code>on click</code> event with the name of the <code>Delete</code> function, but rather than the confirmation message, the user is taken to a blank screen and the record is deleted.</p>
  
  <p>I've run the JavaScript Console and there are no errors created, so I'm a little unsure about how to continue.</p>
  
  <p>I just wondered whether someone could possibly take a look at this please and let me know where I'm going wrong.</p>
  
  <p>Many thanks and kind regards</p>