CODEWITHSUNDEEP
javascripthtml
Eddie
Eddie

Reputation: 337

How to add a onblur and onfocus into to a input box that's values are determined by a select box

I'm trying to make it so you can click to make a value disappear and reappear from a text box, (that's simple enough), but the value of the text box is determined by what's selected from the select box.

Here is the javascript:

function changeValue(){
    var option=document.getElementById('filter').value;

    if(option=="1"){
            document.getElementById('field').value="Option 1";
    }
        else if(option=="2"){
            document.getElementById('field').value="Option 2";
        }

        else if(option=="3"){
            document.getElementById('field').value="Option 3";
        }

}

And here is the HTML:

<input class="input" type ='text' name="key" id ="field" value ="Option 1" />
<select name="filter" id="filter" onchange="changeValue();">
<option id="1" value="1">Option 1</option>
<option id="2" value="2">Option 2</option>
<option id="3" value="3">Option 3</option>
</select>

The problem I'm facing is once the input box is clicked, it goes to the number 1 value instead of back to its javascript determined value. Any help with this would be massively appreciated.

Upvotes: 3

Views: 1728

Answers (2)

Vivek S
Vivek S

Reputation: 5550

Its working for me, take a look at the below code and demo,May be you have'nt included your scripts within script tag

<html>   
   <head>
        <script>
            function changeValue(){
            var option=document.getElementById('filter').value;

            if(option=="1"){
                    document.getElementById('field').value="Option 1";
            }
                else if(option=="2"){
                    document.getElementById('field').value="Option 2";
                }

                else if(option=="3"){
                    document.getElementById('field').value="Option 3";
                }

             }
           </script>
   </head>
   <body>

      <input class="input" type ='text' name="key" id ="field" value ="Option 1" />
      <select name="filter" id="filter" onchange="changeValue();">
        <option id="1" value="1">Option 1</option>
        <option id="2" value="2">Option 2</option>
        <option id="3" value="3">Option 3</option>
     </select>
  </body>
</html>

​ http://jsfiddle.net/d4uAh/

Upvotes: 0

Hat
Hat

Reputation: 1731

declar a global var x at the start of your js file, set a value for this var in each instance.

var x = 0;

function changeValue(){
var option=document.getElementById('filter').value;

if(option=="1"){
        document.getElementById('field').value="Option 1";
        x = 'option 1';
}
    else if(option=="2"){
        document.getElementById('field').value="Option 2";
        x = 'option 2';
    }

    else if(option=="3"){
        document.getElementById('field').value="Option 3";
        x = 'option 3';
    }

}

create a new function to be called onblur

function inputOnBlur() {
    document.getElementById('field').value = x;
}

html

<input onblur="inputOnBlur()" class="input" type ='text' name="key" id ="field" value ="Option 1" />

if you want an onfocus function to clear the text, you can do something similar

function inputOnFocus() {
     document.getElementById('field').value = '';
}

Hope this helps!

Upvotes: 1

Related Questions