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>

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.

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

But did it solve your problem?

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, ...).

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.

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.