$(“#submit”).click not preventing page load

Question

This is really driving me nuts... ;)

I have a table an in each row a Delete button. Here is the Code:

while( $row=mysqli_fetch_row($result) ){
        echo'<tr id="'.$row[0].'" >';
        echo'<td id="colx">'.$row[1].'</td>';
        echo'<td id="CellTextBeschreibung">'.$row[5].'</td>';
        echo'<td id="CellTextLong">'.$row[3].'</td>';
        echo'<td id="CellTextLat">'.$row[4].'</td>';
        ?>
        <td><input type="button" onclick="ShowOnMap( <?php echo $row[0];  ?> )" value="Zeigen"></td>
        <td ><?php echo( $row[6]); ?></td>
        <td>
            <FORM id='deleteform' action='delete.php' method='post'>
                <INPUT type='hidden' name='mapid' value='<?php echo( $row[0]); ?>'>
                <INPUT type='hidden' name='userid' value='<?php echo( $row[2]); ?>'>
                <INPUT type='hidden' name='aktuuserid' value='<?php echo( $userID); ?>'>
                <INPUT id='subdel' type='submit' OnClick="return confirm('Löschen.Bist Du sicher?');" value='Löschen'>
            </FORM>
        </td>   
        <td id="colx"> <?php echo( $row[7]); ?>  </td>
        <td id="colx"> <?php echo( $row[8]); ?>  </td>
        </tr>
        <?php
    }

I'm trying to cach the Submit Button (FORM) with this Jquery code:

$("#subdel").click( function() {
    $.post( $("#deleteform").attr("action"), $("#deleteform").serializeArray(), function(info){alert(info); document.location.reload(true); });
    $("#deleteform").submit( function() {
        return false;   
    });
});

But it's not working... ... it loads the "delete.php" page and it is not returning to the origin page...

Although I have the SAME Code for SAVING (but not in a Table), this is not working...

I would appreciate any Help on this... Thank you in advance... :)

p.s.: Here is the working SAVE Function:

<FORM id='eingabeform' action='save.php' method='post'>
        <INPUT type='hidden' name='userid' value='<?php echo( $userID); ?>'>
        <INPUT type='hidden' name='username' value='<?php echo( $aktuuser); ?>'>
        <INPUT type='hidden' id='inputicon' name='icon' value='1'>  
        <INPUT type='hidden' id ='long' name='long' maxlength='20' >
        <INPUT type='hidden' id ='lat'  name='lat' maxlength='20' >
        <div>Beschreibung: <INPUT type='text' id ='longlattext'  name='longlattext' maxlength='300' ></div>
        <div>Link (bei Bearf):<INPUT type='text' id ='link'  name='link' maxlength='300' ></div> 
    <br>
        <INPUT id='submit' type='submit' value='Speichern'>     <INPUT id='abbrechen' type='Button' value='Schließen'  onclick="Hide('Lmenuinput')">
    </FORM>

and the associated Jquery code:

$("#submit").click( function() {
    $.post( $("#eingabeform").attr("action"), $("#eingabeform").serializeArray(), function(info){alert(info); if (!info=="Du musst auf der Karte einen Punkt anklicken" || !info=="Das ist kein Link! Check das bitte mal, ThX.. ;)") {document.location.reload(true); }});
    $("#eingabeform").submit( function() {
        return false;   
    });
});

As you can see, it's identical... and this one is working... the only difference is, that the above DELETE FORM is multiplied within the table, the SAVE FORM not... could that be related to this error??

here is the delete.php:

<?php

        include 'DBconn.php';
         // ******* TabelleKopf speichern *****************************
        $sql="DELETE FROM `map` WHERE mapID=".$_POST[mapid];
        if (!mysqli_query($con,$sql))
        {
            die('Fail: ' . mysqli_error($con));
        }
        echo "Success";
        mysqli_close($con);
    }

?>

Answer 1

<input type="submit" /> will submit the form (and update the page) if you click it by default. So, if you want to prevent it from going to another page, just use another type of button: <input type="button" /> or <button /> or prevent the default event with e.preventDefault() implemented in jQuery:

$("#subdel").click( function(e) {
    $.post( $("#deleteform").attr("action"), $("#deleteform").serializeArray(), function(info){alert(info); document.location.reload(true); });
    e.preventDefault();
});

UPDATE: And I've just noticed that you use same IDs for HTML elements inside of a PHP loop. It means that you will have multiple elements having the same ID. It's very wrong. That's why it's not working. When there are multiple same-ID elements, jQuery will select only the first one! So your event handlers will work with only the first form. You may test a very simple example here: http://jsfiddle.net/AEm8B/

To make things work you may use classes instead of IDs. I will place here an example of your form refactored, but IDs should be changed to classes in the whole loop, because it semantically wrong: IDs should be unique.

<FORM class='deleteform' action='delete.php' method='post'>
                <INPUT type='hidden' class='mapid' value='<?php echo( $row[0]); ?>'>
                <INPUT type='hidden' class='userid' value='<?php echo( $row[2]); ?>'>
                <INPUT type='hidden' class='aktuuserid' value='<?php echo( $userID); ?>'>
                <INPUT class='subdel' type='submit' OnClick="return confirm('Löschen.Bist Du sicher?');" value='Löschen'>
</FORM>

And your jQuery code:

$(".subdel").click( function() {
    var $form = $(this).parents(".deleteForm");
    $.post( $form.attr("action"), $form.serializeArray(), function(info){alert(info); document.location.reload(true); });
});

// If you want use this construction instead of e.preventDefault()
// it's better bind it outside of click handler if you're not going 
// to submit it with traditional means.
$(".deleteform").submit( function() {
   return false;   
});*/

or with e.preventDefault (could be more preferable):

$(".subdel").click( function(e) {
        var $form = $(this).parents(".deleteForm");
        e.preventDefault();
        $.post( $form.attr("action"), $form.serializeArray(), function(info){alert(info); document.location.reload(true); });
    });

This should make it finally

Answer 2

You don't need to use .submit inside a .click

$("#submit").click( function() {
    $.post( $("#eingabeform").attr("action"), $("#eingabeform").serializeArray(), function(info){alert(info); if (!info=="Du musst auf der Karte einen Punkt anklicken" || !info=="Das ist kein Link! Check das bitte mal, ThX.. ;)") {document.location.reload(true); }});

});

$("#eingabeform").submit( function(e) {
   e.preventDefault();
});

ps: e.preventDefault(); is better than return false;, see event.preventDefault() vs. return false