Form Validation Not working

Question

ehpratah 48 Posting Whiz in Training

12 Years Ago

Hi im having a nerve wrecking problem with my script, i'm trying to make a form validation that when a field is empty it will prompt a message that needs fo fill up the missing fields..and i made it already the problem is when i put a separate script for selectbox that dynamically change when the user try to select a category the validation code stop working..and i've already try everything that i can think of to solve it and with no avail..heres the code..

     <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">


      <script type='text/javascript' src='jscript/jquery.min.js'></script>



      <style type='text/css'>

      </style>

<!------------------------SCRIPT FOR THE DYNAMICALLY CHANGE SELECTBOX--------------------------------------> 

    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $(document).ready(function() {
            $('#txtarea').change(function() {
            $("#txtorigin").empty();
            $("#txtdestination").empty();
            $("#txtvehicle").empty();
            $("<option value='0'>Select</option>").appendTo("#txtorigin");
            $("<option value='0'>Select</option>").appendTo("#txtdestination");
            $("<option value='0'>Select</option>").appendTo("#txtvehicle");
            if ($(this).val() == "1") { 
                $("<option value='1'>NAIA 1</option>").appendTo("#txtorigin");
                $("<option value='2'>NAIA 2</option>").appendTo("#txtorigin");
                $("<option value='3'>NAIA 3</option>").appendTo("#txtorigin");
                $("<option value='4'>Hotel Intercontinental Manila</option>").appendTo("#txtorigin");
                $("<option value='5'>New World Hotel</option>").appendTo("#txtorigin");
                $("<option value='6'>Best Western F1 Hotel</option>").appendTo("#txtorigin");
                $("<option value='7'>Go Hotels Mandaluyong</option>").appendTo("#txtorigin");
                $("<option value='8'>Tune Hotel-Malate</option>").appendTo("#txtorigin");

                $("<option value='9'>Toyota VIOS 1.3 MT</option>").appendTo("#txtvehicle");
                $("<option value='10'>Toyota VIOS 1300 E AT</option>").appendTo("#txtvehicle");
                $("<option value='11'>Toyota VIOS 1500 G AT</option>").appendTo("#txtvehicle");
                $("<option value='12'>Toyota ALTIS 1600 E MT</option>").appendTo("#txtvehicle");
                $("<option value='13'>Toyota INNOVA 2.0 J GAS MT</option>").appendTo("#txtvehicle");
                $("<option value='14'>Toyota INNOVA J Dsl MT</option>").appendTo("#txtvehicle");

                 $("<option value='15'>NAIA 1</option>").appendTo("#txtdestination");
                $("<option value='16'>NAIA 2</option>").appendTo("#txtdestination");
                $("<option value='17'>NAIA 3</option>").appendTo("#txtdestination");
                $("<option value='18'>Hotel Intercontinental Manila</option>").appendTo("#txtdestination");
                $("<option value='19'>New World Hotel</option>").appendTo("#txtdestination");
                $("<option value='20'>Best Western F1 Hotel</option>").appendTo("#txtdestination");
                $("<option value='21'>Go Hotels Mandaluyong</option>").appendTo("#txtdestination");
                $("<option value='22'>Tune Hotel-Malate</option>").appendTo("#txtdestination");

            }
            else if ($(this).val() == "2") {
                $("<option value='1'>Holiday Inn Clark Pampanga</option>").appendTo("#txtorigin");
                $("<option value='2'>Tune Hotel - Clark</option>").appendTo("#txtorigin");

                $("<option value='3'>Toyota VIOS 1.3 MT</option>").appendTo("#txtvehicle");
                $("<option value='4'>Toyota INNOVA 2.0 J GAS MT</option>").appendTo("#txtvehicle");
                $("<option value='5'>Toyota INNOVA J Dsl MT</option>").appendTo("#txtvehicle");
            }
            else if ($(this).val() == "3") {

                $("<option value='1'>Summit Circle Hotel</option>").appendTo("#txtorigin");
                $("<option value='2'>Mactan Cebu International Airport</option>").appendTo("#txtorigin");
                $("<option value='3'>Cebu Regional Office</option>").appendTo("#txtorigin");

                $("<option value='4'>Toyota VIOS 1300 E AT</option>").appendTo("#txtvehicle");
                $("<option value='5'>Toyota VIOS 1500 G AT</option>").appendTo("#txtvehicle");
                $("<option value='6'>Toyota INNOVA J Dsl MT</option>").appendTo("#txtvehicle");
            }

            else if ($(this).val() == "4") {


                $("<option value='1'>Davao International Airport</option>").appendTo("#txtorigin");
                $("<option value='2'>Airport View Hotel</option>").appendTo("#txtorigin");
                $("<option value='4'>Marco Polo Hotel</option>").appendTo("#txtorigin");
                $("<option value='5'>Pearl Farm Beach Resort</option>").appendTo("#txtorigin");
                $("<option value='6'>3 Star Hotel (The Royal Mandala Hotel )</option>").appendTo("#txtorigin");

                $("<option value='7'>Toyota VIOS 1.3 MT</option>").appendTo("#txtvehicle");
                $("<option value='8'>Toyota VIOS 1500 G AT</option>").appendTo("#txtvehicle");
                $("<option value='9'>Toyota INNOVA 2.0 J GAS MT</option>").appendTo("#txtvehicle");
                $("<option value='10'>Toyota INNOVA J Dsl MT</option>").appendTo("#txtvehicle");

             }

            else if ($(this).val() == "5") {


                $("<option value='1'>Gen Santos International Airport</option>").appendTo("#txtorigin");
                $("<option value='2'>Suncity Suites</option>").appendTo("#txtorigin");


                $("<option value='7'>Toyota VIOS 1.3 MT</option>").appendTo("#txtvehicle");
                $("<option value='9'>Toyota INNOVA 2.0 J GAS MT</option>").appendTo("#txtvehicle");
                $("<option value='10'>Toyota INNOVA J Dsl MT</option>").appendTo("#txtvehicle");

            }
        });
    });
    });//]]>  

    </script>


    <script language="javascript">
    function validate()
    {

    var x=document.forms["form2"]["txtarea"].value;
    if (x==null || x=="Select")
      {
      alert("Please select area");
      return false;
      }  
    var x=document.forms["form2"]["txtorigin"].value;
    if (x==null || x=="Select")
      {
      alert("Please select origin");
      return false;
      }
    var x=document.forms["form2"]["txtdestination"].value;
    if (x==null || x=="Select")
      {
      alert("Please select destination");
      return false;
      }   
      var x=document.forms["form2"]["txtvehicle"].value;
    if (x==null || x=="Select")
      {
      alert("Please select vehicle");
      return false;
      }               


    }


    // -->
    </script>


    </head>
    <body>
      <form name="form2" method="post" action="a.html" onSubmit="return validate()">
      <p>
      <select id='txtarea' name="txtarea">
        <option value="0">Select</option> 
        <option value="1">Metro Manila</option>
        <option value="2">Pampanga</option>
        <option value="3">Cebu</option>
        <option value="4">Davao</option>
        <option value="5">Gen. Santos</option>
      </select>
      <br/>
      <br/>
      <select id='txtorigin' name="txtorigin">
        <option value="Select">Select</option>
      </select>
      <select id='txtdestination' name="txtdestination">
        <option value="Select">Select</option>
      </select>
      <select  id='txtvehicle' name="txtvehicle">
        <option value="Select">Select</option>
      </select>
    </p>

        <label>
          <input type="submit" name="Submit" value="Submit">
        </label>
      </form>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p></p>
      <p>&nbsp;  </p>
    </body>


    </html>

javascript

Edited 12 Years Ago by peter_budo because: Make sure you post in correct section, JSP (Java Server Pages) is not JavaScript. Post moved

3 Contributors
5 Replies
331 Views
1 Week Discussion Span
Latest Post 12 Years Ago Latest Post by AleMonteiro

AleMonteiro 238 Can I pick my title?

12 Years Ago

Hi, I didn't look for the problem in your code, but I made an example in my way:

     <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>

      <style type='text/css'>

      </style>

    <script language="javascript">

    $(document).ready(function() {
        $('#txtarea').change(function() {

            // Create options for origin
            var optionsOrigin = [
                [0, 'Select'],
                [1, 'NAIA 1'],
                [2, 'NAIA 2'],
                [3, 'NAIA 3']
            ];

            // Create options for destination
            var optionsDestination = [
                [0, 'Select'],
                [15, 'NAIA 1'],
                [16, 'NAIA 2'],
                [18, 'NAIA 3']
            ];

            // Create options for vehicle
            var optionsVehicle = [
                [0, 'Select'],
                [9, 'Toyota VIOS 1.3 MT'],
                [10, 'Toyota VIOS 1300 E AT'],
                [11, 'Toyota VIOS 1500 G AT']
            ];


            /*

            if ($(this).val() == "1") { 
                optionsOrigin = ...
                optionsDestination = ...
            }
            else if ...

            */

            // Set the options to the selects
            $("#txtorigin").setOptions(optionsOrigin);
            $("#txtdestination").setOptions(optionsDestination);
            $("#txtvehicle").setOptions(optionsVehicle);
        });
    });

    // Validate Form
    function validate()
    {
        if ($("#txtarea").selectedIndex() < 1)
        {
          alert("Please select area");
          return false;
        }  

        if ($("#txtorigin").selectedIndex() < 1)
        {
          alert("Please select origin");
          return false;
        }

        if ($("#txtdestination").selectedIndex() < 1)
        {
          alert("Please select destination");
          return false;
         }   


        if ($("#txtvehicle").selectedIndex() < 1)
          {
          alert("Please select vehicle");
          return false;
          }               
    }

    // Extends JQuery
    (function ($)
    {
        $.fn.extend({

            // Set array de options to select
            setOptions: function (options)
            {
                $(this).each(function ()
                {
                    $(this).empty();

                    if (options != undefined && options != null)
                    {
                        var tmpHtml = "";
                        for (var i = 0; i < options.length; i++)
                        {
                            var item = options[i];
                            tmpHtml += '<option value="' + item[0] + '">'+ item[1] + '</option>';
                        }
                        $(this).append(tmpHtml);
                    }
                });
            },

            // Return Index of the selected option
            selectedIndex: function() 
            {
                return $(this).children(":selected").index();
            }   
        });
    })(jQuery);



    </script>


    </head>
    <body>
      <form name="form2" method="post" action="a.html" onSubmit="return validate()">
      <p>
      <select id='txtarea' name="txtarea">
        <option value="0">Select</option> 
        <option value="1">Metro Manila</option>
        <option value="2">Pampanga</option>
        <option value="3">Cebu</option>
        <option value="4">Davao</option>
        <option value="5">Gen. Santos</option>
      </select>
      <br/>
      <br/>
      <select id='txtorigin' name="txtorigin">
        <option value="Select">Select</option>
      </select>
      <select id='txtdestination' name="txtdestination">
        <option value="Select">Select</option>
      </select>
      <select  id='txtvehicle' name="txtvehicle">
        <option value="Select">Select</option>
      </select>
    </p>

        <label>
          <input type="submit" name="Submit" value="Submit">
        </label>
      </form>
      <p> </p>
      <p> </p>
      <p> </p>
      <p></p>
      <p>   </p>
    </body>


    </html>

Hope it helps.

AleMonteiro 238 Can I pick my title?

12 Years Ago

But did it solve your problem?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ehpratah 48 Posting Whiz in Training · Answer 1 · 2012-08-09T01:05:26+00:00

hi thanks for the reply even though its not really what im looking for i appriciate your effort..thanks dude

Taywin 312 Posting Virtuoso · Answer 2 · 2012-08-13T17:37:55+00:00

Actually, the code contains duplicate declaration. JavaScript will stop working if you attempt to declare the same variable in the same scope (line 112, 118, 124, ...).

AleMonteiro 238 Can I pick my title? · Answer 3 · 2012-08-13T18:14:15+00:00

That's right, but I didn't even try to correct the code because was simpler to just remake it, a little more sophisticated.

I can't stand a lot more of code than it's actually needed.