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

When I click any of the buttons as seen below the php page getkey.php is being opened when it shouldn't be because I'm using e.preventDefault(); and the id="getgame" is the same as in my javascript code. This is annoying me because everything besides e.preventDefault(); is functioning as intended. value="" is being passed via $_GET["appid"] and it is responding with 0 as 1.

当我点击下面的任何按钮时,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 个解决方案

#1

First of all you cannot use same id for more than one element.

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

change your all form's id attributes as class, like this

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

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

and then in your JS, use return false; instead of e.preventDefault()

然后在你的JS中,使用return false;而不是e.preventDefault()

like this

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

Note : jQuery serialize() doesn't include button or input[type=submit] so you will have to add it manually

注意:jQuery serialize()不包含按钮或输入[type = submit],因此您必须手动添加它

So your JS would looks like

所以你的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;       
    });     
});

#1