#javascript #html
#javascript #HTML
Вопрос:
Я пытаюсь отобразить значение, введенное в текстовом поле, в javascript alert() . У меня есть форма, в которой onSubmit() я вызываю функцию checkLogin() , в которой я оповещаю о значении, введенном в текстовом поле #test_user . Ниже приведен HTML-код:
<form id="login_form" name="login_form" method="post" action="verifylogin.php" onSubmit="checkLogin()">
<input type="text" id="test_user" name="username" class="inputbox" placeholder="Username" value=""/>
<input type="password" id="password" name="password" class="inputbox" placeholder="Password" />
<input type="submit" id="login" name="submit" value="LOG IN">
<a href="#" class="login_facebook">Login with facebook</a>
</form>
И ниже checkLogin() приведена функция в js:
function checkLogin() {
var uname = document.getElementById('test_user').value;
alert(uname);
}
Мне нужно показать текст, введенный в текстовое поле с идентификатором #test_user в предупреждении, но предупреждение ничего не показывает. Отображается пустое предупреждение.
Я знаю, что это также можно сделать, передав значение в качестве параметра функции, но я хотел знать, почему этот способ не работает.
Пожалуйста, помогите.
ОБНОВЛЕНИЕ: это работает, когда я использую этот код отдельно, но когда я делаю это на веб-сайте, который я разрабатываю, возникает эта проблема. Я не могу понять, почему это происходит.
ОБНОВЛЕНИЕ: ниже приведен весь мой HTML-код:
<!doctype html>
<!--[if IE 7 ]> <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
<!--[if IE 8 ]> <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
<!--[if IE 9 ]> <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-gb" class="no-js"> <!--<![endif]-->
<head>
<title><?php echo $title?> | App Contest</title>
<meta charset="utf-8">
<meta name="keywords" content="app contest" />
<meta name="description" content="Welcome to App Contest" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>addons/superfish_responsive/superfish.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/updates.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/custom.css" type="text/css" />
<!-- This stylesheet only adds some repairs on idevices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/responsive-devices.css" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900amp;amp;v1amp;mp;subset=latin,latin-ext" type="text/css" media="screen" id="google_font" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open Sans:400,400italic,700amp;amp;v1amp;mp;subset=latin,latin-ext" type="text/css" media="screen" id="google_font_body" />
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo base_url(); ?>js/jquery-1.8.2.min.js">x3C/script>')</script>
<script src="<?php echo base_url(); ?>js/jquery.noconflict.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>js/common_functions.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js" type="text/javascript"></script>
<link rel="shortcut icon" href="<?php echo base_url(); ?>images/favicons/favicon.png">
<link rel="apple-touch-icon" href="<?php echo base_url(); ?>images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo base_url(); ?>images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo base_url(); ?>images/favicons/apple-touch-icon-114x114.png">
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="css/fixes.css" />
<![endif]-->
<!--[if lte IE 8]>
<script src="js/respond.js"></script>
<script type="text/javascript">
var $buoop = {vs:{i:8,f:6,o:10.6,s:4,n:9}}
$buoop.ol = window.onload;
window.onload=function(){
try {if ($buoop.ol) $buoop.ol();}catch (e) {}
var e = document.createElement("script");
e.setAttribute("type", "text/javascript");
e.setAttribute("src", "http://browser-update.org/update.js");
document.body.appendChild(e);
}
</script>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Facebook OpenGraph Tags - Replace with your own -->
<meta property="og:title" content="KALLYAS Template HTML"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.hogash.com/demo/kalypso_html/"/>
<meta property="og:image" content="http://www.hogash.com/demo/kalypso_html/images/logo.png"/>
<meta property="og:site_name" content="Kallyas"/>
<meta property="fb:app_id" content=""/> <!-- PUT HERE YOUR OWN APP ID - you could get errors if you don't use this one -->
<meta property="og:description" content="Welcome to KALLYAS Template, a wonderful and premium product for multipurpose websites"/>
<!-- END Facebook OpenGraph Tags -->
<!-- THIS IS THE DARK THEME STYLESEET // REMOVE COMMENTS TO ENABLE -->
<!-- <link rel="stylesheet" href="css/dark-theme.css" type="text/css" /> -->
<!-- END DARK THEME -->
</head>
<body class="">
<!-- ADD AN APPLICATION ID !!
If you want to know how to find out your app id, either search on google for: facebook appid, either go to http://rieglerova.net/how-to-get-a-facebook-app-id/ -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1amp;appId="; // addyour appId here
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="support_panel" id="sliding_panel">
<div class="container">
<div class="row">
<div class="span9">
<h4 class="m_title">HOW TO SHOP</h4>
<div class="m_content how_to_shop">
<div class="row">
<div class="span3">
<span class="number">1</span> Login or create new account.
</div>
<div class="span3">
<span class="number">2</span> Review your order.
</div>
<div class="span3">
<span class="number">3</span> Payment amp;amp; <strong>FREE</strong> shipment
</div>
</div>
<p>If you still have problems, please let us know, by sending an email to support@website.com . Thank you!</p>
</div><!-- end how to shop steps -->
</div>
<div class="span3">
<h4 class="m_title">SHOWROOM HOURS</h4>
<div class="m_content">
Mon-Fri 9:00AM - 6:00AM<br>
Sat - 9:00AM-5:00PM<br>
Sundays by appointment only!
</div>
</div>Document.getElementById
</div>
</div>
</div><!-- end support panel -->
<div class="login_register_stuff hide"><!-- Login/Register Modal forms - hidded by default to be opened through modal -->
<div id="login_panel">
<div class="inner-container login-panel">
<h3 class="m_title">SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES</h3>
<form id="login_form" name="login_form" method="post" action="<?php echo base_url(); ?>index.php/verifylogin" onSubmit="checkLogin()">
<a href="#" class="create_account" onClick="ppOpen('#register_panel', '280');">Login with google</a>
<input type="text" id="test_user" name="username" class="inputbox" placeholder="Username" onblur="checkEmpty(this.value)" />
<input type="password" id="password" name="password" class="inputbox" placeholder="Password" />
<input type="submit" id="login" name="submit" value="LOG IN">
<a href="#" class="login_facebook">Login with facebook</a>
</form>
<!--
<div class="links"><a href="#" onClick="ppOpen('#forgot_panel', '350');">FORGOT YOUR USERNAME?</a> / <a href="#" onClick="ppOpen('#forgot_panel', '350');">FORGOT YOUR PASSWORD?</a></div>
-->
</div>
</div><!-- end login panel -->
<div id="register_panel">
<div class="inner-container register-panel">
<h3 class="m_title">CREATE ACCOUNT</h3>
<form id="register_form" name="register_form" method="post">
<p>
<input type="text" id="reg-username" name="username" class="inputbox" placeholder="Username">
</p>
<p>
<input type="text" id="fullname" name="fullname" class="inputbox" placeholder="Your full name">
</p>
<p>
<input type="text" id="reg-email" name="email" class="inputbox" placeholder="Your email">
</p>
<p>
<input type="password" id="reg-password" name="password" class="inputbox" placeholder="Desired password">
</p>
<p>
<input type="password" id="confirm_password" name="confirm_password" class="inputbox" placeholder="Confirm password">
</p>
<p>
<input type="submit" id="signup" name="submit" value="CREATE MY ACCOUNT">
</p>
</form>
<div class="links"><a href="#" onClick="ppOpen('#login_panel', '800');">ALREADY HAVE AN ACCOUNT?</a></div>
</div>
</div><!-- end register panel -->
<div id="forgot_panel">
<div class="inner-container forgot-panel">
<h3 class="m_title">FORGOT YOUR DETAILS?</h3>
<form id="forgot_form" name="forgot_form" method="post">
<p>
<input type="text" id="forgot-email" name="email" class="inputbox" placeholder="Email Address">
</p>
<p>
<input type="submit" id="recover" name="submit" value="SEND MY DETAILS!">
</p>
</form>
<div class="links"><a href="#" onClick="ppOpen('#login_panel', '800');">AAH, WAIT, I REMEMBER NOW!</a></div>
</div>
</div><!-- end register panel -->
</div><!-- end login register stuff -->
<div id="page_wrapper">
<header id="header" class="style2">
<div class="container">
<!-- logo -->
<h1 id="logo"><a href="<?php echo base_url(); ?>" style="color:#fff">App Contest
</a></h1>
<ul class="topnav navRight">
<li><a href="#" id="open_sliding_panel">
<span class="icon-remove-circle icon-white"></span>
</a>
</li>
<?php if(isset($username))
{
echo'<li><a href="userhome/logout">LOGOUT</a></li>';
}
else
{
echo '<li><a href="#login_panel" data-rel="prettyPhoto[login_panel]">LOGIN</a></li>';
}?>
</ul><!-- end topnav // right aligned -->
<!-- end topnav // left aligned -->
<script type="text/javascript">
// THIS SCRIPT DETECTS THE ACTIVE ELEMENT AND ADDS ACTIVE CLASS
(function($){
$(document).ready(function(){
var pathname = window.location.pathname,
page = pathname.split(/[/ ] /).pop(),
menuItems = $('#main_menu a');
menuItems.each(function(){
var mi = $(this),
miHrefs = mi.attr("href"),
miParents = mi.parents('li');
if(page == miHrefs) {
miParents.addClass("active").siblings().removeClass('active');
}
});
});
})(jQuery);
</script>
</div>
</header>
Функция checkLogin() находится в файле common_functions.js который я включил в строку: 33, а форма входа находится в строке: 129.
Комментарии:
1. Есть значение в
test_user?2. Можете ли вы опубликовать остальную часть своего js-кода?
3. Вы уверены, что идентификатор не появляется дважды на странице? Например, иметь две формы входа в систему?
4. ваш код правильный и он работает, проверьте, появляется ли идентификатор дважды на вашей странице
5. Я скопировал код на своей тестовой странице, и он работает нормально. Похоже, проблема находится за пределами опубликованного вами кода.
Ответ №1:
попробуйте эту скрипку, она работает для меня http://jsfiddle.net/WR2en /
как вы можете видеть, ошибка была
onSubmit="javascript:checkLogin();">
Комментарии:
1. Да, он работает в скрипке, и если мы выполним его в отдельном HTML-файле, но с моим кодом, это вызовет ту же проблему.
2. Обновил вопрос.
3. Тогда это определенно какой-то JS или CSS, который конфликтует. Можете ли вы предложить мне способ преодоления?
Ответ №2:
попробуйте это
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
function checkLogin()
{
var uname = jQuery('#test_user').val();
if(uname=='')
alert('Enter Username');
else
alert(uname);
//return true; // checklogin true
return false; // checklogin fail
}
</script>
</head>
<body>
<form id="login_form" name="login_form" method="post" action="verifylogin.php" onSubmit="return checkLogin()">
<input type="text" id="test_user" name="username" class="inputbox" placeholder="Username" value=""/>
<input type="password" id="password" name="password" class="inputbox" placeholder="Password" />
<input type="submit" id="login" name="submit" value="LOG IN">
<a href="#" class="login_facebook">Login with facebook</a>
</form>
</body>
</html>
Комментарии:
1. В первом случае предупреждение не отображается, а во втором снова отображается пустое предупреждение.