How to use list value in input value?

HTML & CSS
1

Hi,
It’s a very simple code, but I’m not professional in HTML so please help.
I have this simple code which maybe wrong or missing things, I want the value of the input to be the value of the option I select from the drop down menu, how do I do that? Please fix my code.

<form>
<input id="SFCountry" name="SFCountry" type="text" value="">

And I have a list of countries with values such as:

<select>
<option value="US">Unites States</option>
<option value="CA">Canada</option>
<option value="AL">Albania</option>
</select>
</form>
1 Like
2

Hi there kasperkyd,

and a warm welcome to these forums. :winky:

Can you explain the purpose of transfering a selected value to an input vale?

coothead

3

Hi coothead,
Thanks for your prompt reply.
This is a UPS return form, it’s difficult for people to figure out the country codes, I want them to choose from a list, where those country codes.

4

Hi there Hi there kasperkyd,

When the form user selects a country, what is wrong with just submitting that value…

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body> 

 <form action="#">
  <label for="SFCountry">Select your Country</label>
   <select id="SFCountry" name="SFCountry">
    <option value="US">Unites States</option>
    <option value="CA">Canada</option>
    <option value="AL">Albania</option>
   </select>
  <input type="submit" value="submit">
 </form>

</body>
</html>

coothead

2 Likes
5

Wow that’s awesome and prompt. So if I do it this way, it will act exactly like input id=“SFCountry” name=“SFCountry” type=“text” value=“”>?

6

Hi there kasperkid,

test it for youself with this…

 <form action="https://example.com" method="get">
  <label for="SFCountry">Select your Country</label>
   <select id="SFCountry" name="SFCountry">
    <option value="US">Unites States</option>
    <option value="CA">Canada</option>
    <option value="AL">Albania</option>
   </select>
  <input type="submit" value="submit">
 </form>

coothead

3 Likes
7

Thank you Sir, that works.

I would like to ask another question about how to make any field mandatory for people to fill, shall I open another post or you’re able to help me :wink:

8

Hi there kasperkyd,

you can use the required attribute for this…

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body> 

 <form action="https://example.com" method="get">
 <fieldset>
   <label for="fname">First name:</label>
    <input  id="fname" name="Fname"type="text" required>
   <label for="sname">Surname:</label>
    <input  id="sname" name="Surname"type="text" required>	
 </fieldset><fieldset>
  <label for="SFCountry">Select your Country</label>
   <select id="SFCountry" name="SFCountry">
    <option value="US">Unites States</option>
    <option value="CA">Canada</option>
    <option value="AL">Albania</option>
   </select>
 </fieldset><fieldset>
  <input type="submit" value="submit">
  </fieldset>
 </form>
<script>

</body>
</html>

coothead

2 Likes
9

I don’t know how to thank you today, you were so helpful. Thank you

10

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

11

Hi there kasperkyd,

I forgot to mention that if you wanted to make sure that a
country was actually selected, you would do it like this…

  <label for="SFCountry">Select your Country</label>
   <select id="SFCountry" name="SFCountry" required>
    <option value="">Countries</option>
    <option value="US">Unites States</option>
    <option value="CA">Canada</option>
    <option value="AL">Albania</option>
   </select>

coothead

3 Likes
12

That’s so kind of you, yes I would require that too, at least I can understand the way you write html, I can’t figure things out when others do :smile:

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.