如何将jQuery代码放入一个文件中,该文件将被所有页面引用
How to put a jQuery code into one file which will be referenced by all pages?
我有一个登录弹出,将弹出在我的网站的每一页。我想做的是,一旦用户单击提交,就有一个JS文件,其中处理该请求的jQuery代码存在,并进行AJAX调用以验证DB中的参数。
我可以让弹出框弹出。然后表单就加载了。我认为我的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处理登录表单的problem .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;
});
});
两件事。首先,当您将上述代码放入单独的javascript文件中时,请确保删除了<脚本。>和 HTML标签。
接下来,修改以下行:
$("input[type=submit]").click(function()
改为:
$("#loginform input[type=submit]").click(function()
然后在你的
您可以使用.submit()将处理程序附加到表单提交事件。首先,您需要通过id:
选择表单$("#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>
并且,将函数绑定到表单。提交比提交按钮好得多。
$('formid').submit(function(){blablabla;return false;})
如果您想在不使用id的情况下处理页面上的每个提交的单击事件,您可以始终在单击事件中使用this
关键字来查找发件人,然后找到父form
。
相关文章:
- ng-view 中的脚本在从文件引用时不起作用(JQuery 在角度之前加载)
- Javascript没有输入带有.php文件引用的函数
- MRAID文件引用
- 如何仅将js文件引用到特定的脚本块
- 如何在没有元素的情况下获取文件引用对象
- 尽管 js 文件引用在标头中,但未定义函数
- 文件引用从 js 浏览,模拟闪存中的按键解决方法
- 如何从外部 js 文件引用 id
- Javascript-外部库/文件引用
- 如何在asp.net中将javascript文件引用为UserControl
- 从extJavaScript文件引用PHP
- 如何从node_modules到html文件引用lodash 3.10.1
- 使用外部js文件引用td标记
- js文件引用末尾的花括号是什么意思
- 通过grunt任务更新json文件中的文件引用
- 如何在自定义控件中添加.js文件引用
- 从另一个HTML文件引用元素id
- requireJS优化器能用MD5校验和更新静态文件引用和名称吗?
- 在Phonegap中本地文件引用错误
- Ng-grid不能与文件引用的单元格模板一起工作