FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

HTML form, list of options or text input

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


snowboardalliance
How can I make an html form have a list of countrys and then a textbox under that can be used instead? Like a radio option to either select from the list or type your own.

And I need it so no matter what it sends the same variable to my php script. Thanks.
LukeakaDanish
You'll need some javascript...i would write it for you, but im sure it would be faster for you to search google...

If you cant figure it...i will write it for you tomorrow...just PM me...

(its almost 1AM here...so i need to sleep)
cafefort
Hi Smile

Hope this will help.

Say the SELECT name is county_select and the INPUT name's country_name
the processing script is process.php

the idea is to change with javascript the value of country_name when you select a value from country_select.

You can do that with a fucntion like this:

Code:

<script language="javascript">
function set_country()
{
 document.forms["myform"].country_name.value=  document.forms["myform"].country_select.value;
}
</script>


and then in your HTML put something like this:

<SELECT name="country_select" onchange="javascript:set_country()">

That will set the selected value in the INPUT, and of course let the user set
his own choice if not listed in the SELECT and any way process.php will use the only value found in $_POST["country_name"].

Hope this will help Smile
LukeakaDanish
ooh...clever...i was going to suggest something much longer and much more stupid...which was gonna involve changing the name of the fields with javascript...nvm...this is a brilliant approach...use it!
cafefort
Thanks Smile

Actually, that's not the end, because process.php SHOULD do an extra
verification of the country_name variable. Who knows? Some hackers
can do bad things with almost nothing.

But in overall usability point of view, yeah ... you can say that's clever Wink

Nice too see that it helped
snowboardalliance
Ok, before you posted that, I made my own using some parts of scripts I could find on google

Code:
                  <form action="register.php" method="post" name="register" class="register">
                     
                     <div class="register-field">
                        <input type="radio" name="type" value="list" onclick="enable_list()" checked="checked">Country:</input>
                        <select name="country" class="register">
                           <option value="1" selected="selected"></option>
                           <option value="2">United States</option>
                           <option value="3">Canada</option>
                           <option value="4">United Kingdom</option>
                           <option value="5">Mexico</option>
                        </select>
                        <br />
                        <input type="radio" name="type" value="text" onclick="enable_text()">Other Country:</input>
                        <input type="text" name="country2" value="{$post_country}" maxlength="32" class="register" disabled="true" />
                        <span class="red">*</span>
                     </div>
                     
                     <script language="javascript">
                     
                     function enable_list()
                     {
                        document.register.country.disabled=false;
                        document.register.country2.disabled=true;
                     }
                     
                     function enable_text()
                     {
                        document.register.country.disabled=true;
                        document.register.country2.disabled=false;
                     }
                     
                     </script>
                     
                     <input type="hidden" name="sent" value="true" />
                     
                     <div class="register-field">
                        <input type="submit" value="{$l_register}" />
                     </div>
                     
                  </form>


Is there anyway to add what you said to that? So that I still only get one variable? (The one of the currently selected radio). Right now all it does is disables the opposite field through javascript.

Also, I have it so if they come back to the page, the template parser makes {$post_country} whatever thier input was. Can I do something like this for the select list? Like have the input from before already selected if they have an error.
cafefort
Yes I see what you mean:

Lets do it this way:

Code:

<form action="register.php" method="post" name="register" class="register">
                     
                     <div class="register-field">
                        <input type="radio" name="type" value="list" onclick="enable_list()" checked="checked">Country:</input>
                        <select name="country" class="register">
                           <option value="1" selected="selected"></option>
                           <option value="2">United States</option>
                           <option value="3">Canada</option>
                           <option value="4">United Kingdom</option>
                           <option value="5">Mexico</option>
                        </select>
                        <br />
                        <input type="radio" name="type" value="text" onclick="enable_text()">Other Country:</input>
                        <input type="text" name="country2" value="{$post_country}" maxlength="32" class="register" disabled="true" />
                        <span class="red">*</span>
                     </div>
                     
                     <script language="javascript">
                     
                     function enable_list()
                     {
                        document.register.country.disabled=false;
                        //------------------------------
                        //add the affectaion here
                   document.register.country2.value= Document.register.country.value;
                        //------------------------------
                        document.register.country2.disabled=true;
                     }
                     
                     function enable_text()
                     {
                        document.register.country.disabled=true;
                        document.register.country2.disabled=false;
                     }
                     
                     </script>
                     
                     <input type="hidden" name="sent" value="true" />
                     
                     <div class="register-field">
                        <input type="submit" value="{$l_register}" />
                     </div>
                     
                  </form>


This way, the only variable you have to process is $_POST["country2"]

Consider the variable (SELECT) "country "as inexisting, an usability
facility for the user that will prevent him from typing a country you've heard about Smile
snowboardalliance
Thanks that should work (don't have time to test now)
Related topics

Help needed with getting table to auto update via html form
Which is the best Mobile phone
Send Mail HTML Form
Password change
I need a complex php/flash form... 250FRIH$
$_Post Variable for Options from Select Types?
Just uploaded. Shouldn't be jibberish.
anyone know of a good php form processer script
Assign unique rank in html form using javascript possibly?
[ java scripts ] email service
Basic HTML Introduction
html form help needed
Help with PhpBB
Link to DirectAdmin?
How to upload a file via html-form and php?
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.