如何將jQuery代碼放在一個文件中，所有頁面都將引用它？

Question

我有一個登錄彈出窗口，它將在我網站的每個頁面上彈出。 我要做的是，一旦用戶單擊“提交”，就擁有一個JS文件，用於處理該請求的jQuery代碼將保存在其中，並進行AJAX調用以驗證數據庫中的參數。

我能夠彈出這個彈出框。 並加載表格。 我認為我的jQuery代碼將保存在單獨的導入文件中，如下所示：

<script type="text/javascript" >
$(function()
{
    $("input[type=submit]").click(function()
    {
        var some_params= $("#param").val();

        var dataString = 'Some url to send to ajax';

        if( params validated ok )
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "/problems/add_problem.php",
                dataType: "json",
                data: dataString,
                success: function(json)
                {
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();    
                }
            });
        }

        return false;
    });
});
</script>

所以我的問題是，僅當提交正確的表單時，如何使它被調用？ 該表單將具有一些id =“ some_name”，但我真的不明白如何僅在調用該表單元素時如何執行此jQuery代碼。

這是我要在彈出窗口中顯示的表單：

<?php
         echo '<div id="login_div">
         <form id="login_form" method="post" action="">
         <p>
             <label for="name"><span>Your Email:</span></label> <input type="text" name="email" />
         </p>
         <p>
             <label for="name"><span>Your Password:</span></label> <input type="password" name="user_pass">
         </p>
         <p>
            <input type="submit" value="Log In"  />
         </p>
         </form>
         </div>


<p>
    <a href="http://www.problemio.com/auth/create_profile.php">Create Account</a> | <a href="http://www.problemio.com/auth/forgot_password.php">Reset Pass</a>
</p>
         ';
?>

這是帶有jQuery來處理登錄表單提交的問題io.js內容：

// javascript library

// login_form

$(function()
{
    $("#login_form input[type=submit]").click(function()
    {
        console.log("test");
        alert("1");
//      var name = $("#problem_name").val();
//      var problem_blurb = $("#problem_blurb").val();

//      var dataString = 'problem_name='+ name + '&problem_blurb=' + problem_blurb;

//      if(name=='' || problem_blurb == '')
//      {
//          $('.success').fadeOut(200).hide();
//          $('.error').fadeOut(200).show();
///     }
//      else
//      {
//          $.ajax({
//              type: "POST",
//              url: "/problems/add_problem.php",
//              dataType: "json",
//              data: dataString,
//              success: function(json)
//              {
//                  $('.success').fadeIn(200).show();
//                  $('.error').fadeOut(200).hide();
//                  
///                 // Here can update the right side of the screen with the newly entered information
//                  //alert (json);
//          
//                  new_string = "<h2>Most Recently Added Problems</h2>";

                    // Have to figure out how to make this work with the DOM.

//              }
//          });
//      }

        return false;
    });
});

Answer 1

您可以使用.submit（）將處理程序附加到表單提交事件。 首先，您需要通過ID選擇表單：

$("#some_form_id").submit(function() {
    // the code you have in the click event above goes here.
});

Answer 2

兩件事情。 首先，將上面的代碼放入單獨的javascript文件時，請確保刪除<script ..>和</ script> HTML標簽。

接下來，更改以下行：

$("input[type=submit]").click(function()

改為說：

$("#loginform input[type=submit]").click(function()

然后在<form>標記上設置id =“ loginform”。

Answer 3

您可以指定要觸發jquery的表單。 http://api.jquery.com/submit/

Answer 4

如果不確定，請右鍵單擊該網頁並閱讀其html代碼。

<script type="text/javascript" src="some.js"></script>

而且，將該功能綁定到form.submit比將其綁定到Submit按鈕要好得多。

$('formid').submit(function(){blablabla;return false;})

Answer 5

如果您想在不使用ID的情況下處理頁面上每個提交的click事件，則始終可以在click事件中使用this關鍵字來查找發件人，然后找到父form 。