www.webdeveloper.com
Results 1 to 10 of 10

Thread: HTML Form

  1. #1
    Join Date
    Oct 2010
    Posts
    11

    HTML Form

    Hi,
    I'm trying to create a form with two boxes for an insurance site. I want that in the first box the user will select the type of insurance and in the second box type the zip code. For every insurance type, the surfer will be directed to a different URL.

    This is the code that I have, but of course that it doesn't work:
    HTML Code:
    <form name="mainform">
            <tr>
                <td colspan="2">
                    <select name="src" id="type">
                        <option value="http://www.mysite.com/results-car.html">Auto</option>
                        <option value="http://www.mysite.com/results-home.html">Home</option>
                        <option value="http://www.mysite.com/results-life.html">Life</option>
                        <option value="http://www.mysite.com/results-health.html">Health</option>
                        <option value="http://www.mysite.com/results-motorcycle.html">Motorcycle</option>
                        <option value="http://www.mysite.com/results-business.html">Business</option>
                    </select>
                </td>
                <input type="hidden" name="source" value="google" />
            <tr>
                <td><input type="text" name="zipcode" maxlength="5" id="zip" />
    </td>
    
            </tr>
            <tr>
                <td colspan="2" style="text-align:center;"><input type="submit" id="button" value="Go"/></td>
    
            </tr>
    
        </table>
    </form>
    For example, for auto insurance the URL should be:
    HTML Code:
    http://www.mysite.com/results-car.html?zipcode=10001&source=google
    Thanks!!

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Could do something like this:

    Code:
    <form name="mainform" method="get">
    	<table>
    		<tr>
    			<td colspan="2">
    				<select id="type" onchange="this.form.action = this.value;">
    					<option value="http://www.mysite.com/results-car.html">Auto</option>
    					<option value="http://www.mysite.com/results-home.html">Home</option>
    					<option value="http://www.mysite.com/results-life.html">Life</option>
    					<option value="http://www.mysite.com/results-health.html">Health</option>
    					<option value="http://www.mysite.com/results-motorcycle.html">Motorcycle</option>
    					<option value="http://www.mysite.com/results-business.html">Business</option>
    				</select>
    				<script type="text/javascript">document.getElementById('type').onchange();</script>
    			</td>
    		</tr>
    		<tr>
    			<td><input type="text" name="zipcode" maxlength="5" id="zip" /></td>
    		</tr>
    		<tr>
    			<td colspan="2" style="text-align:center;"><input type="submit" id="button" value="Go"/></td>
    		</tr>
    	</table>
    	<input type="hidden" name="source" value="google" />
    </form>
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    1) That JavaScript will not work. The select object doesn't have a value, each option does and the select object has a selectedIndex property.

    2) DO NOT RELY ON JAVASCRIPT FOR THIS. It fails for vast numbers of users and because some of them are disabled persons using adaptive browsers that cannot support JavaScript doing so is sometimes and in some places against the law. Commercial web sites are particularly vulnerable to this legal requirement.

    3) That does not mean, however, that you can't use JavaScript only that you can't rely on it. Make that a real FORM that submits itself to a server side script that returns a redirect. Then, and only then, you can use something more like:
    HTML Code:
    <form action="send-me.php" onsubmit="self.location = this.src.options[this.src.selectedIndex].value; return false">
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Quote Originally Posted by Charles View Post
    1) That JavaScript will not work. The select object doesn't have a value, each option does and the select object has a selectedIndex property.
    Really Charles, I gather you didn't try it then?
    <select> elements DO have value members.
    JavaScript: Learn | Validate | Compact | bionoid

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    That is, however, a non-standard extension. Support will be spotty at best.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  6. #6
    Join Date
    Oct 2010
    Posts
    11
    Actually, it works. Thank you bionoid.
    Charles - if it works, I don't see the problem. I'll be glad if you tell me what is the problem.

    Thanks.

  7. #7
    Join Date
    Nov 2002
    Posts
    2,632
    Non-standard extension means not all browsers might support it.

  8. #8
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Quote Originally Posted by SteveJo View Post
    Actually, it works. Thank you bionoid.
    Charles - if it works, I don't see the problem. I'll be glad if you tell me what is the problem.

    Thanks.
    That's kind of the whole problem with JavaScript. Quite often it'll work on your browser but not on others. Your users will be laughing at your incompetence and you'll never realize it. Mentioning that, however, will get you banned from the JavaScript forum around here.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  9. #9
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Regardless of it working in this situation or not, I have learnt something new. That is the point of participating on the forum after all.
    After hours of looking around I understand why now. It's mainly due to the multiple selection part of its capabilities.
    One does think they know better, so if I came across rude then I apologise Charles.
    JavaScript: Learn | Validate | Compact | bionoid

  10. #10
    Join Date
    Jan 2012
    Posts
    1

    someb tips

    hi friends i am new member at this forum site ....
    Today HTML- 5 in the market, which is very advance in the HTML 5 the viedo files... the html five is the best your code is good i want to share HTML 5 code with you.....
    <!DOCTYPE HTML>
    <html>
    <body>

    <video width="320" height="240" controls="controls">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
    </video>

    </body>
    </html>

    it is an example of HtML 5 code

    friends i want to share some health tips
    When eating out, always choose the smallest portion size available.
    When we choose larger meals, most of us tend to eat past the point of hunger and in doing so consume more kilojoules than we need which contributes to weight gain.Remember that if you are still hungry after choosing a smaller meal, you can always fill up with something else and enjoy a wider variety of tastes in the process
    for more information visit ...
    knee pain arthritis
    natural cholesterol lowering
    best protein shakes for women

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