Databases
StackOverflow2013
Postsdbo
POHow to put a jQuery code into one file which will be referenced by all pages?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to put a jQuery code into one file which will be referenced by all pages?
    text
    copied!<p>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.</p> <p>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:</p> <pre><code>&lt;script type="text/javascript" &gt; $(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; }); }); &lt;/script&gt; </code></pre> <p>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.</p> <p>And here is the form I am calling to display in the popup:</p> <pre><code>&lt;?php echo '&lt;div id="login_div"&gt; &lt;form id="login_form" method="post" action=""&gt; &lt;p&gt; &lt;label for="name"&gt;&lt;span&gt;Your Email:&lt;/span&gt;&lt;/label&gt; &lt;input type="text" name="email" /&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="name"&gt;&lt;span&gt;Your Password:&lt;/span&gt;&lt;/label&gt; &lt;input type="password" name="user_pass"&gt; &lt;/p&gt; &lt;p&gt; &lt;input type="submit" value="Log In" /&gt; &lt;/p&gt; &lt;/form&gt; &lt;/div&gt; &lt;p&gt; &lt;a href="http://www.problemio.com/auth/create_profile.php"&gt;Create Account&lt;/a&gt; | &lt;a href="http://www.problemio.com/auth/forgot_password.php"&gt;Reset Pass&lt;/a&gt; &lt;/p&gt; '; ?&gt; </code></pre> <p>and here is the problemio.js contents with the jQuery to handle the login form submit:</p> <pre><code>// 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 = "&lt;h2&gt;Most Recently Added Problems&lt;/h2&gt;"; // Have to figure out how to make this work with the DOM. // } // }); // } return false; }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload