2013-06-05 20 views
1

我試圖通過jQuery和AJAX提交我的表單,但似乎自我(index.php)的行爲最終被採取,不是jQuery提交處理程序。任何想法爲什麼?jQuery .submit()不處理我的表單,而是採取表單動作

<form id="artist_signup" action="index.php" method="get" oninput="AoutName.value=ANAME.value"> 
    <input type="hidden" name="ajax" value="true" /> 
    <div class="inlineInput"> 
     <input type="text" name="ANAME" placeholder="Name"> 
    </div> 

    <div class="inlineInput"> 
     <input type="text" name="LOCATION" placeholder="City, State"> 
    </div> 

    <div class="inlineInput"> 
     <input type="email" name="EMAIL" placeholder="Email"> 
    </div> 

    <div class="inlineInput"> 
     <input type="url" name="AWEBSITE" placeholder="www.myawesomeband.com"> 
    </div> 

    <div class="submitContainer"> 
     <input type="submit" value="Sen" class="donateButton formSubmit"> 
    </div> 
    <div id="artist_message"></div> 
</form> 

    <script type="text/javascript"> 
$(document).ready(function() { 
    $('#artist_signup').submit(function() { 
     $("#artist_message").html("<span class='error'>Adding your email address...</span>"); 
     $.ajax({ 
      url: 'inc/store-address.php', 
      data: $('#artist_signup').serialize(), 
      success: function(msg) { 
       $('#artist_message').html(msg); 
      } 
     }); 
     return false; 
    }); 
}); 
</script> 

回答

2

您需要防止默認操作,即表單提交。 這可以通過使用e.preventDefault()你可以閱讀更多關於它here

$(document).ready(function() { 
    $('#artist_signup').submit(function(e) { 
     e.preventDefault(); 
     $("#artist_message").html("<span class='error'>Adding your email address...</span>"); 
     $.ajax({ 
      url: 'inc/store-address.php', 
      data: $('#artist_signup').serialize(), 
      success: function(msg) { 
       $('#artist_message').html(msg); 
      } 
     }); 
    }); 
}); 
+0

似乎沒有辦法,仍然得到默認的表單動作提交。您是否重新加載了 – FLomid

+0

?可能是一個緩存問題 – karthikr

+1

對不起,這確實有效。我非常愚蠢的錯誤。我的文檔中加載的jQuery比這個jQuery代碼更低。 :(太傻了 – FLomid

0

當使用提交功能,這是自然的動作就是回發到任何形式的行動來完成。你可以做的是添加一個參數到你的功能e。這將代表具有與事件本身相關的屬性和方法的事件對象。有了這個,你可以做e.preventDefault();這將停止發生形式的行動。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#artist_signup').submit(function(e) { 
     e.preventDefault(); 
     $("#artist_message").html("<span class='error'>Adding your email address... </span>"); 
    $.ajax({ 
     url: 'inc/store-address.php', 
     data: $('#artist_signup').serialize(), 
     success: function(msg) { 
      $('#artist_message').html(msg); 
      } 
     }); 
    }); 
}); 
</script>