Jquery and php delete row without refresh page

Question

I am trying to make a jquery delete div function but i have one problem.

When i press submit button div was not removed and also page refreshed. How can i do without refresh page.

This is my DEMO page

This is my jquery function code:

$(document).ready(function () {

    $('.ilan_alani').on('click', '.showmenu', function(e) {
        var $ilan_alani = e.delegateTarget;
        $('.note_area', $ilan_alani).toggle('puff');
        $('.showmenu', $ilan_alani).hide();
        $('.hidemenu', $ilan_alani).show();
    })
    .on('click', '.hidemenu', function(e) {
        var $ilan_alani = e.delegateTarget;
        $('.note_area', $ilan_alani).toggle("puff");
        $(".hidemenu", $ilan_alani).hide();
        $(".showmenu", $ilan_alani).show();
    });
  $('.ilan_alani .psdlt').click(function() {
  $(this).parents('.ilan_alani').animate({ opacity: 'hide' }, 'slow');
});
});

and also HTML code here:

<div class="ilan_alani">
    <div class="note_area">
        <div class="hidemenu"> 
          <form method="post">
          <input type='submit' name='Delete' value='Delete' class='psdlt' />
          </form></div>
    </div>
    <div class="test"></div>
    <div class="showmenu">Shows</div>
</div>

<div class="ilan_alani">
    <div class="note_area">
        <div class="hidemenu"> <form method="post">
          <input type='submit' name='Delete' value='Delete' class='psdlt' />
          </form></div>
    </div>
    <div class="test"></div>
    <div class="showmenu">Show</div>
</div>

What I want. Div without refreshing the ilan_alani is deleted.

Ram Sharma · Accepted Answer · 2014-09-08 10:44:27Z

3

You are using form tag and submit button which submit your form on click try to remove form tag and button type as submit

<form method="post">
      <input type='submit' name='Delete' value='Delete' class='psdlt' />
</form>

to

<input type='button' name='Delete' value='Delete' class='psdlt' />

answered Sep 8, 2014 at 10:44

Ram Sharma

8,8157 gold badges48 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Black Sheep · Accepted Answer · 2014-09-08 10:51:33Z

0

You can add onclick="return false;" on <form> to avoid event submit like this:

<form method="post" onclick="return false;">
  <input type='submit' name='Delete' value='Delete' class='psdlt' />
</form>

Demo

edited Sep 8, 2014 at 10:51

answered Sep 8, 2014 at 10:45

Black Sheep

6,7047 gold badges32 silver badges51 bronze badges

3 Comments

user4017388 Over a year ago

Thanks for your respond. But if i use onclick="return false;" mysql row not deleted ?

user4017388 Over a year ago

I don't know hot can i do this :( ?

herriekrekel Over a year ago

@simplename see my answer to get a basic idea of what aldanux means

herriekrekel · Accepted Answer · 2014-09-08 13:32:14Z

0

What you want to do is make a php page apart from this,
which deletes a row based on your get or post value

something like this (with your own security and db connection added)

<?php 
     $db->query('DELETE FROM yourtable WHERE id = ' . $_POST['rowId']); 
?>

Than with your javascript button or whatever has the click event,
you add the ajax to call the page above.

So this will look something like this:

$('#someElement').click(function() {
    id = the id of the row you want deleted;
    $.ajax({
        url: "url to the page above here",
        type: "post",
        data: {
            "rowId" : id,
        }
    }).done(function() {
        alert('row deleted');
    });
});

edited Sep 8, 2014 at 13:32

answered Sep 8, 2014 at 13:23

herriekrekel

5716 silver badges16 bronze badges

Collectives™ on Stack Overflow

Jquery and php delete row without refresh page

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related