www.webdeveloper.com
Results 1 to 15 of 18

Thread: HELP: Simple HTML submit code

Threaded View

  1. #1
    Join Date
    Nov 2010
    Posts
    20

    HELP: Simple HTML submit code

    Hi guys i need some help with my html code. Here's exactly what i want the button to do . I would like visitors to input a valid location and then click the "check locations" button , when that button is clicked , a result would display inside the box below . The problem i am having is that whenever i click the check location button , the result is displayed outside the box . Please i would really appreciate if someone could help me out with this.

    Here is a screen shot explaining how it should work :

    example.jpg


    http://i.imgur.com/2BKgOpP.jpg



    Here is the code below :

    HTML Code:
    <!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>Find A Location in Canada</title>
    <meta http-equiv="expires" content="-1" />
    <meta name="resource-type" content="document" />
    <meta name="distribution" content="global" />
    <meta name="robots" content="INDEX, FOLLOW" />
    <meta name="revisit-after" content="1 days" />
    <meta name="rating" content="general" />
    <meta name="author" content="GC Web Studio - www.gcwebstudio.com" />
    <link href="../../style/global.css" rel="stylesheet" type="text/css" />
    <link href="../../style/default/layout.css" rel="stylesheet" type="text/css" />
    <link href="../../style/default/dxmap.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript" src="../../js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../../js/gcws.js"></script>
    <script src="some_script_name.js"></script>
    
    </head>
    
    
    <body onLoad="load()" onUnload="GUnload()">
    <div id="enclosure">
            <div id="header">
        	
            <div class="navs">
            	<div class="nav-top">
                	<dl>
                    	<dd class="nav-top-op nav-top-op-location"><Find a Location</dd>
                    	<dd class="nav-top-op">English</dd>
                        <dd class="nav-top-op">Franšais</dd>
                        <dd class="nav-top-op nav-top-op-last">Site Map</dd>
                    </dl>
                </div>
                <div class="clear"></div>
                <div class="nav-main">
                            	<dl>
                    	<dd class="nav-main-op">HOME</dd>
                        <dd class="nav-main-op">SERVICES</dd>
                        <dd class="nav-main-op">TECHNOLOGY</dd>
                        <dd class="nav-main-op">ABOUT US</dd>
                        <dd class="nav-main-op nav-main-op-last">CONTACT US</dd>
                    </dl>
                            </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>    <div id="wrapper">
        	
        	<div id="main">
            	<div id="left">
                                                    
                    <div class="left-menu">
                    	<h4>Contact Us</h4>
                    	<div class="left-menu-holder">
                        	<ul>
                            		
                            		<li class="left-menu-top-op">
                                    <span>Contact Information</span>
                                    </li>
    						
                            		
                            		<li class="left-menu-top-op">
                                    <span>Find a Location</span>
                                    </li>
    						
                                                    		<li>
                                        <ul>
                                                    
                                                <li class="left-menu-top-sub left-menu-op-active">
                                                Canada
                                                </li>
                                                
                                                                        
                                                <li class="left-menu-top-sub">
                                                United States
                                                </li>
                                                
                                                                                    </ul>
                                    </li>
                                                    </ul>
                        </div>
                    </div>            </div>
            	<div id="content">
                			        
            <div class="breadcrumb">Home&raquo; </div>                <div class="content-inner">
                    	<h1>Find Location</h1>
                        
                                            <script type="text/javascript"> 
    							<!--//--><![CDATA[//><!--
    								var imagePath = "../../images/dx_map/index.html";
    								var searchPath = "ajax18a5.html?action=dx_map";
    								var baseURL = "../../index.html";
    								var centerpoint = 60;
    							//--><!]]>
    							</script>                    <div>
                            City, Province -or- Postal Code:  <input id="cityName" type="text" /> <input type="button" value="Check Locations" onclick="_CheckLocation()" />
    <div id="cityInformation"></div>
                         
                                <input type="hidden" name="country" value="canada" id="country" />
                            <!--<input type="button" onclick="searchLocations()" value="Search Locations"/>-->
                            &nbsp;&nbsp;<br />
                          <br />
                          
                        </div>
                        
                        <div id="search-locator">
    
                            <table cellpadding="0" cellspacing="0">                     
                              <tbody>                     
                                <tr>                   
                                  <td width="200" valign="top" bgcolor="white">                     
                                    <div id="sidebar"></div>                    
                                  </td>                    
                                </tr>                     
                              </tbody>                    
                            </table>
                        
                          </div>    
                     				 <script type="text/javascript">
    				 	$j(document).ready(function() {
    						load();
    					});
    				 </script>
                        
                    </div>
            	</div>
               
                <div class="clear"></div>
    		</div>
                </div>
            <div id="footer">
        	<div class="footer-cities">
            	
            <div class="footer-holder">
                
                <div class="footer-links-copyright">
                    <div class="footer-links">
                        <dl>
                            <dd class="footer-link-op">Home</dd>
                            <dd class="footer-link-op">Contact Us</dd>
                            <dd class="footer-link-op">Career Opportunities</dd>
                            <dd class="footer-link-op">Resources</dd>
                            <dd class="footer-link-op footer-link-op-last">Privacy Policy</dd>
                        </dl>
                        <div class="clear"></div>
                    </div>
                   <a href="https://plus.google.com/114299192543146794735" rel="publisher"><img src="../../images/GooglePlusIcon.png" style="width: 20px; height: 20px; float: left; margin-top: 10px;"/></a>
                    <div class="footer-copyright">
                    	<div style="float:right">&copy; 2014 Demo Inc. All Rights Reserved.</div>                                                           
                    </div>
                    <div class="clear"></div> 
                </div>           
                <div class="clear"></div>                                 
            </div>
            
            <div class="transforce" style="display:none"><a href="http://www.transforce.ca/" target="_blank"><img src="../../images/transforce_logo.jpg" border="0" alt="TransForce" /></a></div>
        </div></div>
    
    </body>
    
    
    </html>

    SOME_SCRIPT_NAME.JS

    var $locations = {
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345",
    "city_name": "123 Address St<br>Some City, ST 12345"
    };
    function _CitySearch($a, $b) {
    for(var $c in $b) {
    if($a.toLowerCase() == $c.toLowerCase()) return $b[$c];
    }
    return "The city you entered was not valid!";
    }

    function _CheckLocation() {
    var $cityName = document.getElementById('cityName').value;
    document.getElementById('cityInformation').innerHTML = _CitySearch($cityName, $locations);
    }
    Attached Images Attached Images

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles