CODEWITHSUNDEEP
javascriptjquerydom
Genadinik
Genadinik

Reputation: 18639

How to put a jQuery code into one file which will be referenced by all pages?

I have a login popup that will pop up on every page of my site. What I want to do is once the user clicks submit, to have a single JS file where the jQuery code for handling that request lives, and makes an AJAX call to validate the parameters in the DB.

I am able to get the pop up box to pop up. And the form loads. I am thinking my jQuery code will live in a separate imported file and look like this:

<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>

So my question is how do I make this get invoked only when the right form is submitted? The form would have some id="some_name" but I don't really understand how to make this jQuery code get executed only when that form element is called.

And here is the form I am calling to display in the popup:

<?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>
         ';
?>

and here is the problemio.js contents with the jQuery to handle the login form submit:

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

Upvotes: 1

Views: 496

Answers (5)

Mike Gwilt
Mike Gwilt

Reputation: 2449

If you would like to handle the click event for every submit on the page without using ids, you can always use the this keyword in the click event to find the sender and then find the parent form.

Upvotes: 0

OpenGG
OpenGG

Reputation: 4540

If you are not sure, just right-click this webpage and read its html code.

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

And also, binding the the function to form.submit is much better than to the submit button.

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

Upvotes: 1

Watermark Studios
Watermark Studios

Reputation: 1183

You can specific the form you want to trigger the jquery. http://api.jquery.com/submit/

Upvotes: 1

Alfred Fazio
Alfred Fazio

Reputation: 956

Two things. First, when you place the code above into a separate javascript file, be sure to remove the <script ..> and </script> HTML tags.

Next, alter the following line:

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

To instead say:

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

And then set id="loginform" on your <form> tag.

Upvotes: 3

Kyle Trauberman
Kyle Trauberman

Reputation: 25684

You can use .submit() to attach a handler to the form submit event. First you'll need to select your form via the id:

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

Upvotes: 3

Related Questions