Having a bit of an issue with jQuery at the moment. I have a table and my objective is to have a delete button and when clicked, it removes this from a mySQL backend. I have no issues in terms of functionality, my issue is that I can not get jQuery to return false, it keeps redirecting to the php script that I point to in the form tag. Please let me know if you can see an issue with the code.

I have a table structure set up and this is simply to show all rows that are returned from the mysql query. Perhaps I am not setting up the form correctly.

<?php
if (sizeof($rows5) > 0) {
    foreach($rows5 as $row5):
    echo"
<tr class='tableRowClass2'>
<td>{$row5['PackingSlipStarmontID']}</td>
<td>{$row5['fullStarmont']}</td>
<form action='delete/starmont.php' method='post' name='deletestarmontForm' id='deletestarmontForm'>
<td>
    <button id='button3'>Remove</button>
    <input type='hidden' id='PackingSlipStarmontID' name='PackingSlipStarmontID' value='{$row5['PackingSlipStarmontID']}'/>
</td>
</form>
</tr>";
    endforeach;
}
?>

and here is the jQuery that is suppose to stop the page from redirecting once the form is submitted.

$(document).ready( function() {
    $("#button3").click( function() {
        $.post( $("#deletestarmontForm").attr("action"), 
            $("#deletestarmontForm :input").serializeArray(), 
            function(info){
                $("#result4").html(info); 
           });
        });
        $("#deletestarmontForm").submit( function() {
            return false;   
        });
        function clearInput() {
        $("#deletestarmontForm :input").each( function() {
           $(this).val('');
        });
    }
});

So this code works in the sense that it calls the php script and the SQL query is fine. The issue is that it redirects to that php page instead of returning false upon submission.

*EDIT*** Thank you everyone for all your help. Between this and experimenting I have solved the issue. It seems the issue was to do with the duplicate IDs. The code I used is the same as what I posted, but instead of using an ID selector I solved it by changing it to a class selector

Having a bit of an issue with jQuery at the moment. I have a table and my objective is to have a delete button and when clicked, it removes this from a mySQL backend. I have no issues in terms of functionality, my issue is that I can not get jQuery to return false, it keeps redirecting to the php script that I point to in the form tag. Please let me know if you can see an issue with the code.

I have a table structure set up and this is simply to show all rows that are returned from the mysql query. Perhaps I am not setting up the form correctly.

<?php
if (sizeof($rows5) > 0) {
    foreach($rows5 as $row5):
    echo"
<tr class='tableRowClass2'>
<td>{$row5['PackingSlipStarmontID']}</td>
<td>{$row5['fullStarmont']}</td>
<form action='delete/starmont.php' method='post' name='deletestarmontForm' id='deletestarmontForm'>
<td>
    <button id='button3'>Remove</button>
    <input type='hidden' id='PackingSlipStarmontID' name='PackingSlipStarmontID' value='{$row5['PackingSlipStarmontID']}'/>
</td>
</form>
</tr>";
    endforeach;
}
?>

and here is the jQuery that is suppose to stop the page from redirecting once the form is submitted.

$(document).ready( function() {
    $("#button3").click( function() {
        $.post( $("#deletestarmontForm").attr("action"), 
            $("#deletestarmontForm :input").serializeArray(), 
            function(info){
                $("#result4").html(info); 
           });
        });
        $("#deletestarmontForm").submit( function() {
            return false;   
        });
        function clearInput() {
        $("#deletestarmontForm :input").each( function() {
           $(this).val('');
        });
    }
});

So this code works in the sense that it calls the php script and the SQL query is fine. The issue is that it redirects to that php page instead of returning false upon submission.

*EDIT*** Thank you everyone for all your help. Between this and experimenting I have solved the issue. It seems the issue was to do with the duplicate IDs. The code I used is the same as what I posted, but instead of using an ID selector I solved it by changing it to a class selector

• javascript
• php
• jquery
• mysql
• forms

• e.preventDefault() before you return false? – Soundz Commented Oct 11, 2013 at 20:19
• 1 Id should always be unique. – Rafael Herscovici Commented Oct 11, 2013 at 20:20
• event.preventDefault(); will do the job in click function – M Khalid Junaid Commented Oct 11, 2013 at 20:20
• Why are you using a click handler for the button and don't just use the submit handler for everything? Then you could just add e.preventDefault as the first line of code inside that handler. – Steve Commented Oct 11, 2013 at 20:22
• so instead of .click, use .submit and add e.preventDefault as first line? – Corey Stadnyk Commented Oct 11, 2013 at 20:27

6 Answers 6

You cannot use the same ID multiple times. So, note that I have changed ID to Class.

<?php
if (sizeof($rows5) > 0) {
    foreach($rows5 as $row5):
    echo"
<tr class='tableRowClass2'>
<td>{$row5['PackingSlipStarmontID']}</td>
<td>{$row5['fullStarmont']}</td>
<td>
    <button class='button3'>Remove</button>
    <input type='hidden' id='PackingSlipStarmontID' name='PackingSlipStarmontID' value='{$row5['PackingSlipStarmontID']}'/>
</td>
</tr>";
    endforeach;
}
?>

And then, you need to change your jQuery code. You need to prevent default behavior of the button.

$(document).ready( function() {
    $(".button3").click( function(event) {
     event.preventDefault();
     var value = $(this).siblings('input[type=hidden]').val();
     $.post( "/your/path", 
             { value : value }, 
             function(info){ $("#result4").html(info); 
       });
    });
});

The form will be submitted by $.post, but event.prevenDefault() will suppress the form to be submitted.

You may try this e.preventDefault()

$("#button3").click( function(e) {
    e.preventDefault(); // <-- prevents default action
    // rest of the code
});

The default action is to go to the form page, which you want to prevent.

$("#button3").click( function(e) {
    e.preventDefault();
    // rest of submit stuffs
});

$("#button3").click( function(e) {
    e.preventDefault();
});

the form action is causing it to go to the php page. us jQuery to suppress the default action since you are having the button run your function.

 $("#deletestarmontForm").submit( function() {
  return false;
  event.preventDefault();
});

I think would to it.

While all the other answers make a good point of using e.preventDefault, I don't think that is the cause of your problem. return false; should do what you want just fine. You can see that your code works in this fiddle. My guess is that there is something else going on with your code. Probably a JS error (check your console) that prevents the handlers to behave correctly and therefore the fallback behavior is the original form submission.