Блог

У меня есть всплывающее окно входа в систему, которое будет появляться на каждой странице моего сайта. Что я хочу сделать, так это после того, как пользователь нажмет кнопку отправить, чтобы иметь один 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>
         ';
?>
  

и вот problemio.js содержимое с помощью jQuery для обработки отправки формы входа в систему:

 // 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   'amp;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;
    });
});
  

Две вещи. Во-первых, когда вы поместите приведенный выше код в отдельный файл JavaScript, будьте уверены, чтобы удалить <script ..=»»> and </script> HTML tags.

Затем измените следующую строку:

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

Вместо этого сказать:

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

А затем установите id=»loginform» в вашем теге <form> .

Вы можете использовать .submit(), чтобы прикрепить обработчик к событию отправки формы. Сначала вам нужно выбрать свою форму с помощью идентификатора:

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

Вы можете указать форму, которую хотите запустить jquery. http://api.jquery.com/submit /

Если вы не уверены, просто щелкните правой кнопкой мыши на этой веб-странице и прочитайте ее html-код.

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

Кроме того, привязка функции к form.submit намного лучше, чем к кнопке отправки.

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

Если вы хотите обрабатывать событие щелчка для каждой отправки на странице без использования идентификаторов, вы всегда можете использовать this ключевое слово в событии щелчка, чтобы найти отправителя, а затем найти родителя form .