Interlinking of dropdown option

JavaScript
1

Hello All,

I have a field on my form which ask for the phone number. Phone number has two parts,one for country code and other phone number. I want that when a user selects his country from one dropdown, that country code should appear automatically in first section of phone number. How can i do that, please some guide on that.

Thanks
Shail

2

Hi,

Set the country code as the value of the option tag, then attach an onchange handler to the select element.
When the handler fires, get the value of the selected option and set that as the value of the text area.

3

Hello,
I am learning all this. can you give me a little example for this. Whatever you told me to do has gone over my head. :frowning:

4

Sure thing :slight_smile:

You need a dropdown. Here’s one I made earlier.

<select id="countryCode">
  <option value="">Country code</option>
  <option value="+30">Greece</option>
  <option value="+31">Netherlands</option>
  <option value="+32">Belgium</option>
  <option value="+33">France</option>
  <option value="+34">Spain</option>
</select>

and a text input field:

<input type=“text” id=“phoneNumber” />

Then in our script we need to get a reference to both:

var countryCodeSelect = document.getElementById("countryCode"),
    phoneNumberInput = document.getElementById("phoneNumber");

Then attach an onchange event handler to the select, which executes a function every time the value of the select changes:

countryCodeSelect.addEventListener("change", addCountryCodeToPhoneNumber);

Now all that remains to do is write the function to insert the country code into the input field, based on what the user has selected:

function addCountryCodeToPhoneNumber(){
  phoneNumberInput.value = countryCodeSelect.options[countryCodeSelect.selectedIndex].value;
}

Here’s everything:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Add country code to phone number</title>
</head>

  <body>
    <select id="countryCode">
      <option value="">Country code</option>
      <option value="+30">Greece</option>
      <option value="+31">Netherlands</option>
      <option value="+32">Belgium</option>
      <option value="+33">France</option>
      <option value="+34">Spain</option>
    </select>

    <input type="text" id="phoneNumber" />

    <script>
      function addCountryCodeToPhoneNumber(){
        phoneNumberInput.value = countryCodeSelect.options[countryCodeSelect.selectedIndex].value;
      }

      var countryCodeSelect = document.getElementById("countryCode"),
          phoneNumberInput = document.getElementById("phoneNumber");

      countryCodeSelect.addEventListener("change", addCountryCodeToPhoneNumber);
    </script>
  </body>
</html>

Please note that my example sets the value of the text field to whatever the user has selected in the drop down.
This isn’t ideal if the user enters a phone number, then changes the country code, as whatever the user has entered will get overwritten.
You might want to think about using separators and just swapping out the first bit.

5

Hello Pullo,

I changed a little bit in your code and now it is the code that i want. Thanks for this great help like always…

 <body>
    <select id="countryCode">
      <option value="">Country code</option>
      <option value="+30">Greece</option>
      <option value="+31">Netherlands</option>
      <option value="+32">Belgium</option>
      <option value="+33">France</option>
      <option value="+34">Spain</option>
    </select>

    <input type="text" id="code" disabled/>
    <input type="text" id="phoneNumber" />


    <script>
      function addCountryCodeToPhoneNumber(){
        phoneNumberInput.value = countryCodeSelect.options[countryCodeSelect.selectedIndex].value;
      }

      var countryCodeSelect = document.getElementById("countryCode"),
          phoneNumberInput = document.getElementById("code");

      countryCodeSelect.addEventListener("change", addCountryCodeToPhoneNumber);
    </script>
  </body>

…

One more question please. I am taking birthday input as below code. Is it possible to calculate age from it:

<label for="dob">Birthdate</label> 
<select id="date" onFocus="emptyElement('status')">
      <?php include_once("php_includes/date.php"); ?>
          </select>
<select id="month" onFocus="emptyElement('status')">
      <?php include_once("php_includes/month.php"); ?>
          </select>
<select id="year" onFocus="emptyElement('status')">
      <?php include_once("php_includes/year.php"); ?>
          </select>

Thanks
alot

Shail

6

No probs :slight_smile:

Probably.
Can you post the HTML?
PHP doesn’t help very much.

7

I dont know how to calculate age from these inputs, so i havent written any code for that. Till now i am only taking the inputs for birthdate.

8

Well what kind of input do you fancy using?
Did you consider using a datepicker?

9

That is something new to me… I opened your link but, it is showing years from 2004, how i can change it from earlier? is it works with all browsers? What i need to use to sanitize it before entering into my database?

10

You can set the year to start at to be whatever you wish. That link is just a demo.

Use PDO and parametrized queries:

11