CODEWITHSUNDEEP
javascriptphpjquerymysqlforms
Corey Stadnyk
Corey Stadnyk

Reputation: 57

jQuery form submission will not return false

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

Upvotes: 0

Views: 4145

Answers (6)

PlantTheIdea
PlantTheIdea

Reputation: 16369

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
});

Upvotes: 1

Yosep Kim
Yosep Kim

Reputation: 2951

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.

Upvotes: 4

Steve
Steve

Reputation: 8640

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.

Upvotes: 0

Dani
Dani

Reputation: 1250

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.

Upvotes: 0

Anthony
Anthony

Reputation: 658

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

Upvotes: 0

The Alpha
The Alpha

Reputation: 146201

You may try this e.preventDefault()

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

Upvotes: 1

Related Questions