javascript - getElementById().value gives blank for a text box -
i trying show value entered in text box javascript alert(). have form on onsubmit(), calling function checklogin() in alerting value entered in #test_user text box. below html code:
<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 facebook</a> </form> and below checklogin() function in js:
function checklogin() { var uname = document.getelementbyid('test_user').value; alert(uname); } i need show text entered in text box id #test_user in alert alert not show anything. blank alert displayed. know can done passing value parameter function wanted know why way isn't working. please help.
update: work when use code separately when doing in website developing, issue arises. not able understand why happening.
update: below html code:
<!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 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" /> <!-- stylesheet adds 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,900&v1∓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,700&v1∓subset=latin,latin-ext" type="text/css" media="screen" id="google_font_body" /> <!-- grab google cdn's jquery, protocol relative url; fall 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, 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 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 own app id - errors if don't use 1 --> <meta property="og:description" content="welcome kallyas template, wonderful , premium product multipurpose websites"/> <!-- end facebook opengraph tags --> <!-- dark theme styleseet // remove comments enable --> <!-- <link rel="stylesheet" href="css/dark-theme.css" type="text/css" /> --> <!-- end dark theme --> </head> <body class=""> <!-- add application id !! if want know how find out app id, either search on google for: facebook appid, either go 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=1&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 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 order. </div> <div class="span3"> <span class="number">3</span> payment & <strong>free</strong> shipment </div> </div> <p>if still have problems, please let know, sending email support@website.com . thank you!</p> </div><!-- end how 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 appointment only! </div> </div>document.getelementbyid </div> </div> </div><!-- end support panel --> <div class="login_register_stuff hide"><!-- login/register modal forms - hidded default opened through modal --> <div id="login_panel"> <div class="inner-container login-panel"> <h3 class="m_title">sign in account have access 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 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 facebook</a> </form> <!-- <div class="links"><a href="#" onclick="ppopen('#forgot_panel', '350');">forgot username?</a> / <a href="#" onclick="ppopen('#forgot_panel', '350');">forgot 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 account"> </p> </form> <div class="links"><a href="#" onclick="ppopen('#login_panel', '800');">already have account?</a></div> </div> </div><!-- end register panel --> <div id="forgot_panel"> <div class="inner-container forgot-panel"> <h3 class="m_title">forgot 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 details!"> </p> </form> <div class="links"><a href="#" onclick="ppopen('#login_panel', '800');">aah, wait, 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"> // script detects active element , 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> the function checklogin() in file common_functions.js have included on line:33 , login form @ line:129.
try fiddle, works me http://jsfiddle.net/wr2en/
as can see error
onsubmit="javascript:checklogin();">
Comments
Post a Comment