SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem in (PHP, MySQL) AJAX Dropdown-checkbox

    I have dropdown down boxes with checkboxes; I'm using jguery to display Dropdown with checkboxes; I'm populating Select Locality with Select City dropdown. Now, when I select a city from dropdown It should display its locality in dropdown with checkboxes but showing localities in dropdown only.

    Please refer attached image to view my problem.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Paying Guests/PG/Hostels Accomodations for Students/Girls/Males/Professionals</title>
    <META name="description" content="Find Single/Sharing PG/Hostels Accommodation within budget for Boys, Men, Girls, Ladies, Women all over India." />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen">
    <link href="css/pagination.css" rel="stylesheet" type="text/css" />
    <link href="css/A_red.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="divgetcity.js"></script>
    <style>
    form .outer-submit {
        margin : 0 auto;
        background:transparent url("images/search.png") no-repeat top left;
    }
    form input[type=submit] {
        border : none;
        background:transparent url("images/search.png") no-repeat top right;
        width:90px;
        height:29px;
    }
    </style>
    <script language="JavaScript1.2">
    function openwindow(pg_id)
    {
        window.open("view_album.php?pg_id="+pg_id,"mywindow","menubar=1,resizable=1,width=1000,height=800");
    }
    </script>
    <script>
    function limitText(limitField, limitCount, limitNum) 
    {
        if (limitField.value.length > limitNum) 
        { limitField.value = limitField.value.substring(0, limitNum);} 
        else
        { limitCount.value = limitNum - limitField.value.length; }
    }
    function validate(theform)
    {
        if(theform.name.value=="")
        {
            alert('Please Enter Name');
            theform.name.focus();
            return false;
        }
        if(theform.email.value=="")
        {
            alert('Please Enter E Mail');
            theform.email.focus();
            return false;
        }   
        if(theform.email.value.length>0)
        {
            if(theform.email.value.indexOf(" ") >= 0)
            {
                alert("Please enter your email-id without any white space character.");
                theform.email.focus();
                return (false);
            }
            if ( (theform.email.value.indexOf("@") == -1) || (theform.email.value.indexOf(".") == -1) )
            {
                alert("Please enter a valid email-id"); 
                theform.email.focus();
                return (false);
            }
            BeforeAtRate = theform.email.value.substring(0,theform.email.value.indexOf("@"));
            AfterAtRate = theform.email.value.substring(theform.email.value.indexOf("@")+1,theform.email.value.length);
            if (AfterAtRate.indexOf(".") == -1)
            {
                alert("Please enter a valid email-id"); 
                theform.email.focus();
                return (false);
            }
            middle = AfterAtRate.substring(0, AfterAtRate.indexOf("."));
            last = AfterAtRate.substring(AfterAtRate.indexOf(".") + 1,AfterAtRate.length);
            if (BeforeAtRate.length == 0 || middle.length == 0 || last.length == 0)
            {
                alert("Please enter a valid email-id"); 
                theform.email.focus();
                return (false);
            }
        }
        if(theform.contactno.value=="")
        {
            alert('Please Enter Contact Number');
            theform.contactno.focus();
            return false;
        }
        if(isNaN(theform.contactno.value))
        {
            alert('Please Enter Valid Contact Number; Only Digits');
            theform.contactno.focus();
            return false;
        }
        if(theform.city.value=="")
        {
            alert('Please Enter City');
            theform.city.focus();
            return false;
        }
        if(theform.locality.value=="")
        {
            alert('Please Enter Locality');
            theform.locality.focus();
            return false;
        }   
        if(theform.from.value=="" && theform.to.value=="")
        {
            alert('Please Choose FROM and TO Price');
            theform.from.focus();
            return false;
        }
        if((theform.from.value > theform.to.value) || (theform.from.value == theform.to.value))
        {
            alert('Please Choose Valid Price Range');
            theform.from.focus();
            return false;   
        }
        return true;
    }
    </script>
    <link rel="stylesheet" type="text/css" href="assets/jquery.multiselect.css" />
    <link rel="stylesheet" type="text/css" href="assets/style.css" />
    <link rel="stylesheet" type="text/css" href="assets/prettify.css" />
    <link rel="stylesheet" type="text/css" href="assets/jquery-ui.css" />
    <script type="text/javascript" src="assets/jquery.js"></script>
    <script type="text/javascript" src="assets/jquery-ui.min.js"></script>
    <script type="text/javascript" src="assets/prettify.js"></script>
    <script type="text/javascript" src="assets/jquery.multiselect.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       $("#pgfor").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"100", height:"50"});
       $("#city").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"100", height:"150", multiple:false, header:false});
       $("#locality").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"100", height:"150", header:false}); 
       $("#roomtype").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"100", height:"50"});    
       $("#pricetype").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"100", height:"50"});   
       $("#price_value").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"130", height:"100"}); 
    });
    </script>
    </head>
    <link rel="stylesheet" type="text/css" href="src/common.min.css" media="screen">
    <link rel="stylesheet" type="text/css" href="src/destinations.min.css" media="screen">
    <link rel="stylesheet" type="text/css" href="src/destinationsdynamic.min.css" media="screen">
    <body style="background-image:url(images/bg123.jpg); background-repeat:repeat-x; background-attachment:fixed; background-color:#E9E9E9;">
        <div id="main_container">
            <div id="header">
                <style>
    .register
    { background:transparent url('images/register.png') no-repeat top; width: 90px; height: 29px; color:white; border:none; }
    .login
    { background:transparent url('images/register.png') no-repeat top; width: 90px; height: 29px; color:white; border:none; }
    </style>
    <table style="width:100%;">
        <tr>
            <td>
                <div id="logo">
                    <a href="index.php"><img src="images/logo3.jpg" alt="" title="" border="0"></a>
                </div>
            </td>
            <td>
                <div align="right" style="padding-top:5px; font-size:11px; padding-right:10px;">
                <span style="padding-right:5px;"><strong>Welcome 
                Guest !         </strong></span>
            <span style="padding-right:10px;">
                    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <style>
    .register
    { background:transparent url('images/register.png') no-repeat top; width: 90px; height: 29px; color:white; border:none; }
    .login
    { background:transparent url('images/register.png') no-repeat top; width: 90px; height: 29px; color:white; border:none; }
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#login").click(function() {
            var action = $("#form1").attr('action');
            var form_data = {
                username: $("#username").val(),
                password: $("#password").val(),
                is_ajax: 1
            };
            $.ajax({
                type: "POST",
                url: action,
                data: form_data,
                success: function(response)
                {
                    if(response == 'success')
                            window.location='index.php';
                    else
                        $("#message").html("<p class='error'>Invalid username and/or password.</p>"); 
                }
            });
            return false;
        });
        /********************************/
        /*     Forget E Mail            */
        /*******************************/                   
        $("#forget").click(function() {
            var action = $("#form2").attr('action');
            var form_data = {
                forgetemail: $("#forgetemail").val(),
                is_ajax: 2
            };
            $.ajax({
                type: "POST",
                url: action,
                data: form_data,
                success: function(response)
                {
                    if(response == 'success')
                        {
                        $("#message").html("<p class='error'>Link E Mail has been sent.</p>");
                        $("#forgetemail").val('');
                        }
                    else
                        $("#message").html("<p class='error'>Invalid E Mail.</p>");   
                }
            });
            return false;
        });
    });
    </script>
        <html>
        <head>
            <title>LIGHTBOX EXAMPLE</title>
            <style>
            .black_overlay{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content {
                display: none;
                position: absolute;
                top: 25%;
                left: 25%;
                width: 50%;
                height: 40%;
                padding: 4px;
                border: 5px solid #999999;
                background-color: white;
                z-index:1002;
                overflow: auto;
            }
        </style>
        </head>
        <body>
            <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Login</a>
            <div id="light" class="white_content" align="left">
                <table width="100%;" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="95%" style="background-color:#7AC7FB; height:30px; color:#333333; padding-left:10px; font:bold 14px Arial" colspan="3">Sign-In to www.pghostels.co.in</td>
                        <td style="background-color:#7AC7FB;" align="right" width="3%" colspan="3"><a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='none';document.getElementById('fade')
                        .style.display='none'">
    <img src="images/close.gif">
    </a></td>
                    </tr>
                    <tr>
                        <td style="height:30px; border-right:1px #CCCCCC dashed; text-align:center; color:#0000FF; padding-top:5px">
                        <div id="message" align="center" style="text-align:center"></div>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px; border-right:1px #CCCCCC dashed; vertical-align:top" width="30%">
                            <div id="">
                              <form id="form1" name="form1" action="doLogin.php" method="post">
                                <table>
                                    <tr>
                                        <td colspan="3" style="font:bold 14px Verdana; color:black; padding-bottom:10px">Login</td>
                                    </tr>
                                    <tr>
                                        <td style="font:normal 12px Verdana; vertical-align:top; padding-top:3px;">E Mail</td>
                                        <td style="padding:0 2px 0 2px; vertical-align:top; padding-top:3px;"></td>
                                        <td style="padding-bottom:5px;"><input type="text" name="username" id="username" style="width:120px;"  /></td>
                                    </tr>
                                    <tr>
                                        <td style="font:normal 12px Verdana;">Password</td>
                                        <td style="padding:0 2px 0 2px;"></td>
                                        <td><input type="password" name="password" id="password" style="width:120px;"  /></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td style="padding-top:10px;">
                                        <input type="submit" id="login" name="login" value="" style="background:transparent url('images/login.png') no-repeat top; width: 90px; height: 29px; color:white; border:none;" /></td>
                                    </tr>
                                </table>
                              </form>
                            </div>
                            <div id="" style="border-top:  #CCCCCC dashed 1px; padding-top:8px;">
                              <form id="form2" name="form2" action="doForget.php" method="post">
                                <table>
                                    <tr>
                                        <td colspan="3" style="font:bold 14px Verdana; color:black; padding-bottom:10px; ">
                                        Forget Password
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="font:normal 12px Verdana; vertical-align:top; padding-top:2px;">E Mail</td>
                                        <td style="padding:0 2px 0 2px; vertical-align:top; padding-top:2px;"></td>
                                        <td style="padding-bottom:5px;">
                                        <input type="text" name="forgetemail" id="forgetemail" style="width:140px;"  /></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td style="padding-top:10px;">
                                        <input type="submit" id="forget" name="forget" value="" style="background:transparent url('images/sendpassword.png') no-repeat top; width: 130px; height: 29px; color:white; border:none;" /></td>
                                    </tr>
                                </table>
                              </form>
                            </div>                   
                    </td>
                        <td style="padding:10px;width:auto; vertical-align:top;">
                            <table>
                                <tr>
                                    <td colspan="2" style="padding-bottom:10px; color:#000000; font-size:14px; font-weight:bold;">
                                    Benefits of Registered User</td>
                                </tr>
                                <tr>
                                    <td style="padding-left:10px; padding-bottom:5px; font-size:12px;" valign="top">
                                        <div style="line-height:20px; padding-left:20px;">
                                            <ul>
                                                <li>Get accessed by over 1 Lakh buyers</li>
                                                <li>Showcase your property as Rental, PG or for Sale</li>
                                                <li>Get instant queries over Phone, Email and SMS</li>
                                                <li>Add detailed property information & multiple photos per listing</li>
                                                <li>Preference in search & Track queries & views online</li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <td style="padding-left:10px; padding-bottom:5px; font-size:12px;">
                                        <input type="button" value="" class="register" onClick="window.location='login-register.php'">
                                </td>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="fade" class="black_overlay"></div>
        </body>
    </html> |
            <a href="login-register.php"> Register</a> 
                    </span><img src="images/phone1.png" style="padding-right:5px;" />
                    <span style="padding-right:103px;">+91-11-25088735 | +91-11-65780120</span>
            </div>
    <div align="right" style="padding-top:5px; font-size:11px; padding-right:122px;">
        <img src="images/phone1.png" style="padding-right:10px;" />+91-9873448316 &nbsp;| +91-9999316331
    </div>
    <div align="right" style="padding-top:5px; font-size:11px; padding-right:182px;">
        <img src="images/email_contact.png" style="padding-right:10px;" />
    </div>
    <div align="right" style="padding-top:5px; font-size:11px; padding-top:10px; padding-right:100px;">
        <img src="images/fb.jpg" style="padding-right:10px;" />
        <img src="images/tw.jpg" style="padding-right:10px;" />
        <img src="images/g+.jpg" style="padding-right:10px;" />
    </div>
            </td>
        </tr>
    </table>
    <div style="text-align:center; padding-bottom:3px;"><a href="book-pg-at-rs-199.php"><img border="none" src="images/strip2.gif" /></a></div>      </div>
            <div id="menu">
                <link href="megamenu.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src='src/jquery.hoverIntent.minified.js'></script>
    <script type='text/javascript' src='src/jquery.dcmegamenu.1.2.js'></script>
    <script type="text/javascript">
    $(document).ready(function($){
        $('#mega-menu-tut').dcMegaMenu({
            rowItems: '3',
            speed: 'fast'
        });
    });
    </script>
    </head>
    <body>
    <div class="dcjq-mega-menu">
    <ul id="mega-menu-tut" class="menu">
    <li><a href="pg-hostels-in-ahmedabad.php">Ahemdabad</a></li>
    <li><a href="pg-hostels-in-bangalore.php">Bangalore</a></li>
    <li><a href="pg-hostels-in-chennai.php">Chennai</a></li>
    <li><a href="pg-hostels-in-delhi-ncr.php">Delhi-NCR</a></li>
    <li><a href="pg-hostels-in-hyderabad.php">Hyderabad</a></li>
    <li><a href="pg-hostels-in-noida.php">NOIDA</a></li>
    <li><a href="pg-hostels-in-jaipur.php">Jaipur</a>
    <li><a href="pg-hostels-in-kolkata.php">Kolkata</a>
    <li><a href="pg-hostels-in-mumbai.php">Mumbai</a>
    <li><a href="#"> More... </a>
            <ul>
                <li>
                    <ul>
                        <li><a href="pg-hostels-in-gurgaon.php">Gurgaon</a></li>
                        <li><a href="pg-hostels-in-chandigarh.php">Chandigarh</a></li>
                        <li><a href="pg-hostels-in-faridabad.php">Faridabad</a></li>
                        <li><a href="pg-hostels-in-jammu.php">Jammu</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="pg-hostels-in-pune.php">Pune</a></li>
                        <li><a href="pg-hostels-in-agra.php">Agra</a></li>
                        <li><a href="pg-hostels-in-panchkula.php">Panchkula</a></li>
                        <li><a href="pg-hostels-in-surat.php">Surat</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="pg-hostels-in-ghaziabad.php">Ghaziabad</a></li>
                        <li><a href="pg-hostels-in-ludhiana.php">Ludhiana</a></li>
                        <li><a href="pg-hostels-in-jalandhar.php">Jalandhar</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    </div>
    </body>
    </html>
            </div>
          <div class="green_box" style="margin:0 auto">
                <table cellpadding="0" cellspacing="0">      
                    <tr>
                        <td><div style=" padding-left:5px;" >
    <form method="post" action="index.php">
    <table style="color:#FFFFFF;">
        <tr>
            <td width="137" style="padding-bottom:5px; font-size:12px; padding-left:5px;"><strong>Pg For</strong></td>
            <td width="145" style="padding-bottom:5px; font-size:12px;"><strong>Select City</strong></td>
            <td width="205" style="padding-bottom:5px; font-size:12px;"><strong>Select Locality</strong></td>
            <td width="145" style="padding-bottom:5px; font-size:12px;"><strong>Room Type</strong></td>
            <td width="109" style="padding-bottom:5px; font-size:12px;"><strong>Price Type</strong></td>
            <td width="132" style="padding-bottom:5px; font-size:12px;"><strong>Price Range (Rs)</strong></td>
            <td width="116" style="padding-bottom:5px; font-size:12px;"></td>
        </tr>
        <tr>
            <td style="width:125px; padding-left:5px; vertical-align:top;">
                  <select name="pgfor" id="pgfor" style="width:100px;">
                    <option value="">-- Select --</option>
                    <option value="1">Male </option>
                    <option value="0">Female</option>
                  </select>
            </td>
            <td style="width:145px; vertical-align:top;">
            <!-- <select name="city" id="city" onchange="searchshowlocality(this.value)"> -->
    <select name="city" id="city" style="width:120px;" onchange="searchshowlocality(this.value)">
    <option value="502">Agra</option> 
    <option value="129">Ahmedabad</option> 
    <option value="641">Bangalore</option> 
    <option value="272">Bhopal</option> 
    <option value="98">Chandigarh</option> 
    <option value="469">Chennai</option> 
    <option value="576">Dehradun</option> 
    <option value="617">Delhi</option> 
    <option value="156">Faridabad</option> 
    <option value="532">Ghaziabad</option> 
    <option value="651">Gurgaon</option> 
    <option value="8">Hyderabad</option> 
    <option value="453">Jaipur</option> 
    <option value="422">Jalandhar</option> 
    <option value="190">Jammu</option> 
    <option value="594">Kolkata</option> 
    <option value="457">Kota</option> 
    <option value="547">Lucknow</option> 
    <option value="424">Ludhiana</option> 
    <option value="661">Mangalore</option> 
    <option value="431">Mohali</option> 
    <option value="616">Mumbai</option> 
    <option value="335">Nashik</option> 
    <option value="620">Noida</option> 
    <option value="166">Panchkula</option> 
    <option value="167">Panipat</option> 
    <option value="85">Patna</option> 
    <option value="338">Pune</option> 
    <option value="184">Solan</option> 
    <option value="151">Surat</option> 
    <option value="464">Udaipur</option> 
    <option value="152">Vadodara</option> 
    </select>        </td>
            <td style="width:205px; vertical-align:top" id="slocalitydiv" >
                    <select id="locality" style="width:180px; vertical-align:top;">
                    <option value="1"> City 1 </option>
                    <option value="0"> City 2</option>
                    <option value="1"> City 3 </option>
                    <option value="0"> City 4</option>                
                    </select>
            </td>
            <td style="width:145px; vertical-align:top;">
                    <select id="roomtype" name="roomtype" style="width:125px;" >
                    <option value="">-- Select --</option>
                    <option value="1">Single Sharing</option>
                    <option value="2">Sharing Basis</option>
                    </select>
            </td>
            <td style="width:105px; vertical-align:top">
                    <select id="pricetype" name="pricetype" style="width:95px; vertical-align:top;">
                    <option value="">-- Select --</option>
                    <option value="m">Monthly</option>
                    <option value="d">Daily</option>
                    </select>
            </td>
            <td style="width:125px; vertical-align:top">
                    <select style="width:115px" name="price_value[]" multiple="multiple" id="price_value" >
                       <option value="" selected="selected"> -- Select --</option>    
                       <option value=" (price>=1 and price<=2000) "> Below 2000</option>
                       <option value=" (price>=2001 and price<=4000)"> 2001 - 4000</option>
                       <option value=" (price>=4001 and price<=6000)"> 4001 - 6000</option>
                       <option value=" (price>=6001 and price<=8000)"> 6001 - 8000</option>
                       <option value=" (price>=8001 and price<=10000)"> 8001 - 10000</option>
                       <option value=" (price>=10001)"> Above 10001</option>
                    </select>
            </td>
            <td width="116" style="vertical-align:top">
                <input type="submit" name="submit" value="" style="background:transparent url('images/search (1).png') no-repeat top; width: 90px; height: 29px; color:white; border:none;" />
            </td>
        </tr>
    </table>
    </form>
    </div></td>
                    </tr>
                </table>         
            </div>
    Attached Images Attached Images
    Last edited by guido2004; Mar 11, 2013 at 01:48. Reason: added code tags


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •