e.preventDefault在表单提交时被忽略

时间:2016-05-12 19:44:23

标签: javascript php ajax

当我点击下面的任何按钮时,php页面getkey.php正在被打开,因为我正在使用e.preventDefault();并且id =“getgame”与我的javascript代码中的相同。这让我烦恼,因为除了e.preventDefault()之外的一切;按预期运作。 value =“”正在通过$ _GET [“appid”]传递,它的响应为0为1。

<form action="getkey.php" method="get" class="getgame">
<button name="appid" type="submit" value="112">Request</button>
</form>

<form action="getkey.php" method="get" class="getgame">
<button name="appid" type="submit" value="113">Request</button>
</form>

<form action="getkey.php" method="get" class="getgame">
<button name="appid" type="submit" value="114">Request</button>
</form>

 <script>
 $(function(){
$('form.getgame').on('submit', function(e){    
         // prevent native form submission here
    e.preventDefault();

    // now do whatever you want here
    $.ajax({
        type: $(this).attr('method'), // <-- get method of form
        url: $(this).attr('action'), // <-- get action of form
        data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
        beforeSend: function(){
            $('#result').html('');
        },
        success: function(data){
            $('#result').html(data);



 if(data === "0") {
 alert("foo");
  }

 if(data === "1") {
 alert("bar");
  }



             }
         });
     });     
 });
 </script>

1 个答案:

答案 0 :(得分:0)

首先,你不能为多个元素使用相同的id。

将所有表单的id属性更改为class,就像这样

<form action="getkey.php" method="get" class="getgame">

然后在您的JS中,使用return false;代替e.preventDefault()

像这样

$('form.getgame').on('submit', function(e){    
     //your ajax stuffs here
     return false;
});

注意: jQuery serialize()不包含buttoninput[type=submit],因此您必须手动添加

所以你的JS看起来像

$(function(){
    $('form.getgame').on('submit', function(e){        
        // now do whatever you want here
        var appid = $(this).find("button[type=submit]").attr("value");
       $.ajax({
           type: $(this).attr('method'), // <-- get method of form
           url: $(this).attr('action'), // <-- get action of form
           data: { "appid" : appid }, // <-- serialize all fields into a string that is ready to be posted to your PHP file
           beforeSend: function(){
               $('#result').html('');
           },
           success: function(data){
               $('#result').html(data);
               if(data === "0") {
                   alert("foo");
               }
               if(data === "1") {
                   alert("bar");
               }
            }
        });    
       // prevent native form submission here
       return false;       
    });     
});