#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    2
    Rep Power
    0

    Small error in form validation


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Restaurant</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="slider/navigation.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="slider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="slider/nivo-slider.css" type="text/css" media="screen" />

    <?php
    require_once('calendar/tc_calendar.php');
    ?>


    <script type="text/javascript" src="slider/jquery.simplyscroll.js"></script>
    <link rel="stylesheet" href="slider/jquery.simplyscroll.css" media="all" type="text/css">
    <script type="text/javascript">
    (function($) {
    $(function() {
    $("#scroller").simplyScroll({orientation:'vertical',customClass:'vert'});
    });
    })(jQuery);
    </script>


    <script type="text/javascript" src="slider/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="slider/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider();
    });
    </script>

    <script type="text/javascript">
    function validateForm()
    {
    var name=document.forms["index_form"]["name_textfield"].value;
    if (name==null || name=="")
    {
    alert("Please enter name");
    return false;
    }

    var country=document.forms["index_form"]["country_textfield"].value;
    if (country==null || country=="")
    {
    alert("Please enter country");
    return false;
    }
    }
    </script>


    <style type="text/css">

    /*=== Main Styles ===*/
    .slider-wrapper
    {
    padding-top:5px;
    padding-bottom:40px;
    }

    /*Jquery CSS Editing*/
    .theme-default #slider {
    width:890px;
    height:400px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    }

    #other_information
    {
    height:300px;
    width:1024px;
    }

    #column1
    {
    height:290px;
    width:120px;
    float:left;
    }

    #column1_nav
    {
    height:288px;
    width:118px;
    }

    #column1_nav ul
    {
    height:288px;
    width:98px;
    }

    #column1_nav li
    {
    height:30px;
    width:98px;
    }

    #column2
    {
    height:290px;
    width:600px;
    float:left;
    }

    #column3
    {
    height:290px;
    width:300px;
    float:left;
    }

    #title
    {
    height:22px;
    width:298px;
    text-align:center;
    color:#990000;
    }

    .textfields
    {
    height:35px;
    width:298px;
    padding-top:20px;
    }

    .text
    {
    height:30px;
    width:70px;
    float:left;
    padding-left:50px;
    }

    .field
    {
    height:30px;
    width:160px;
    float:left;
    }

    #button
    {
    height:30px;
    width:90px;
    padding-left:100px;
    }
    </style>
    </head>

    <body>
    <form name="index_form" action="booking.php" method="post" onsubmit="return validateForm()">
    <div id="wrapper">
    <div id="header">
    <div id="logo">

    </div>

    <div id="navigation">
    <!-- <ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
    <ul>
    <li><a href="#">3.1 jQuery</a>
    <ul>
    <li><a href="#">3.1.1 Download</a></li>
    <li><a href="#">3.1.2 Tutorial</a></li>
    </ul>
    </li>
    <li><a href="#">3.2 Mootools</a></li>
    <li><a href="#">3.3 Prototype</a></li>
    </ul>
    </li>
    </ul> -->

    <ul>
    <li><a href="index.html" class="current_page">Home</a></li>
    <li><a href="#" class="links">About Us</a></li>
    <li><a href="#" class="links">Packages</a></li>
    <li><a href="#" class="links">Virtual Tour</a></li>
    <li><a href="#" class="links">Events</a></li>

    </ul>
    </div><!--navigation-->
    </div><!--header-->

    <div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
    <img src="slider/images/index1.jpg" width="889" height="400" />
    <img src="slider/images/index2.jpg" width="889" height="400" />
    </div>
    </div> <!--slider-wrapper-theme-default-->


    <div id="other_information">
    <div id="column1">
    <div id="column1_nav">
    <ul>
    <li><a href="#">Accomodation</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Dining</a></li>
    <li><a href="#">Location</a></li>
    </ul>
    </div><!--column1_nav"-->
    </div><!--column1-->

    <div id="column2">

    </div><!--column2-->

    <div id="column3">

    <div id="title">
    <u>Book A Room</u>
    </div><!--title-->

    <div class="textfields">
    <div class="text">
    Name
    </div>
    <div class="field">
    <input type="text" name="name_textfield" />
    </div>
    </div><!--textfields-->

    <div class="textfields">
    <div class="text">
    Country
    </div>
    <div class="field">
    <input type="text" name="country_textfield" />
    </div>
    </div><!--textfields-->

    <div class="textfields">
    <div class="text">
    Date
    </div>
    <div class="field">
    <input type="text" name="country_textfield" />
    </div>
    </div><!--textfields-->

    <div id="button">
    <input type="submit" name="submit" value="book a room" />
    </div><!--button-->

    </div><!--column3-->
    </div><!--other_information-->
    </div><!--wrapper-->
    </form>
    </body>
    </html>

    I am using above code, the problem occurring is that, even if I enter the country name in the textfield for it, javascript is throwing error. What can be the reason? I am using this code in internet explorer.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    24
    Rep Power
    0
    Replace this:

    document.forms["index_form"]["name_textfield"].value;

    To this:

    document.forms[NUMBER].TextName.value;

    Don't forget to replace the NUMBER to in example: 3.
    Wich equals to the number of the form in the document.

    Replace TextName to the name of the TextField to validate.

    Léon
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    2
    Rep Power
    0
    Thank you very much.... its worked....

IMN logo majestic logo threadwatch logo seochat tools logo