$(“#submit”)。点击不阻止页面加载

时间:2014-04-18 22:38:01

标签: javascript php jquery .post

这真让我疯了......;)

我在每行都有一个表,一个删除按钮。这是代码:

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
    }

我正在尝试使用此Jquery代码缓存提交按钮(FORM):

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

但是它不起作用......它加载了“delete.php”页面并且它没有返回到原始页面......

虽然我有SAVING的相同代码(但不在表中),但这不起作用......

我很感激任何帮助......提前谢谢你...... :)

P.S .: 这是工作SAVE功能:

<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>

以及相关的Jquery代码:

$("#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;   
    });
});

正如你所看到的,它是相同的...而且这个是有效的...唯一的区别是,上面的DELETE FORM在表格中成倍增加,SAVE FORM not ...可能与此相关误差Δθ

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

?>

2 个答案:

答案 0 :(得分:1)

如果您在默认情况下单击它,

<input type="submit" />将提交表单(并更新页面)。因此,如果您想阻止它转到另一个页面,只需使用其他类型的按钮:<input type="button" /><button />或阻止在jQuery中实现e.preventDefault()的默认事件:

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

UPDATE:我刚刚注意到你在PHP循环中对HTML元素使用相同的ID。这意味着您将拥有多个具有相同ID的元素。这是非常错误的。这就是为什么它不起作用。 当有多个相同ID元素时,jQuery将只选择第一个!因此,您的事件处理程序将仅使用第一个表单。您可以在此处测试一个非常简单的示例:http://jsfiddle.net/AEm8B/

为了使事情有效,您可以使用类而不是ID。我将在这里放置一个重构表单的示例,但是ID应该在整个循环中更改为类,因为它在语义上是错误的:ID应该是唯一的。

<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>

你的jQuery代码:

$(".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;   
});*/

或使用e.preventDefault(可能更优选):

$(".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); });
    });

这应该最终成为

答案 1 :(得分:0)

您无需在.click

中使用.submit
$("#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();优于return false;,请参阅event.preventDefault() vs. return false