CODEWITHSUNDEEP
javascriptselectif-statementinput
user3199576
user3199576

Reputation:

How to set value of the input when I use select option? Java script with if

I have following scripts:

<!DOCTYPE html>
<HTML>
    <HEAD>
        <META charset="UTF-8">
        <SCRIPT src="scripts2.js"></SCRIPT>
    </HEAD>
    <BODY>
        <FORM>
            <SELECT name="receipt" onchange="set_input_value()">
                <OPTION id="P" value="P">P / </OPTION>
                <OPTION id="b" value="b">b / </OPTION>
            </SELECT>
            <INPUT type='text' id='id1' />
        </FORM>
    </BODY>
</HTML>

and

function set_input_value(){
    if(document.getElementById('P').value=='P'){
        document.getElementById('id1').value='1';
    }
    if(document.getElementById('b').value=='b'){
        document.getElementById('id1').value='2';
    }
}

I want to make something like. If I choose option 'P' set the value of the input on 1. If I choose option 'b' set the value of the input on 2.

Sorry, if it has been solved somewhere, but I didn't find it. Thanks for help.

Upvotes: 2

Views: 3277

Answers (3)

Vinicius Lima
Vinicius Lima

Reputation: 544

Follow the suggest using jQuery.
I put all code.

HTML + JQuery:

<!DOCTYPE html>
<html>
    <head>
        <title>StackTest</title>        
    </head>
    <script src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script>
        function changeValue(valor) {
            if(valor == 'P') {
                $('#text1').val('1');
            } else if (valor == 'b') {
                $('#text1').val('2');
            } else {
                $('#text1').val('');
            }
        }
    </script>
    <body>
        <select id="combo" onchange="changeValue(this.value)">
            <option value=""></option>
            <option value="P">P /</option>
            <option value="b">b /</option>
        </select>
        <input type="text" id="text1" />
    </body>
</html>

Upvotes: 1

tymeJV
tymeJV

Reputation: 104785

You can keep your markup cleaner by creating event handlers completely in JavaScript, you can also make use of this to find the currently selected value. You should be giving an ID to your select element and not the option children:

<select id="receipt">

document.getElementById("receipt").onchange = function() {
    var input = document.getElementById('id1');
    // You could do this.  The select box will take on the selected option's value:
    // var value = document.getElementById("receipt").value;
    // but since `this` already is the select box, you can just do it this way:
    var value = this.value;

    if (value == "b")
        input.value = 2;
}

Upvotes: 1

shadowfox
shadowfox

Reputation: 505

You need to check the value of the SELECT element. You are getting the OPTION element by id and checking its value. Change it to this:

<!DOCTYPE html>
<HTML>
    <HEAD>
        <META charset="UTF-8">
        <SCRIPT src="scripts2.js"></SCRIPT>
    <SCRIPT type='text/javascript'>
    function set_input_value(){
        if(document.getElementById('receipt').value=='P'){
            document.getElementById('id1').value='1';
        }
        if(document.getElementById('receipt').value=='b'){
            document.getElementById('id1').value='2';
        }
    }
    </SCRIPT>
    </HEAD>
    <BODY>
        <FORM>
            <SELECT id='receipt' name="receipt" onchange="set_input_value()">
                <OPTION id="P" value="P">P / </OPTION>
                <OPTION id="b" value="b">b / </OPTION>
            </SELECT>
        <INPUT type='text' id='id1' />
        </FORM>
    </BODY>
</HTML>

Upvotes: 1

Related Questions