Javascript Issue changing a form input

Question

Thanks in advance.

I want to change the value of input text "total" in a form depending the value of the select "opciones". I tried with onchange(), with document.getElementById("").value but it doesn't works.

I dont know what is failing, but I cannot change the input value.

    <form name="formulario">

        <select name="opciones" id="opciones">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                    </select>
                  <input type="text" name="suma" id="total">
</form>

Javascript:

    function formtotal() {

    if (document.formulario.opciones.value = "1") {

        document.formulario.suma.value = "1000";
    }

    else if (document.formulario.opciones.value = "2") {

        document.formulario.suma.value = "1250";
    }

    else if (document.formulario.opciones.value = "3") {

        document.formulario.suma.value = "1500";
    }

}

Kevin · Accepted Answer · 2016-09-25 21:38:31Z

2

I think you should try to work with

let e = document.getElementById("opciones");
let total = document.getElementById("total");

switch(e.selectedIndex) {
case 0:
    total.value = 1000;
    break;
case 1:
    total.value = 1250;
    break;
case 2:
    total.value = 1500;
    break;
default:
    total.value = 0;
}

edited Sep 25, 2016 at 21:38

answered Sep 25, 2016 at 20:36

Kevin

1,3872 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Basic Over a year ago

+1 for using a switch statement, it's a much cleaner approach and allows you to handle the default case for when some idiot goes and edits the drop-down without updating the Javascript.

Sneh Saluja · Accepted Answer · 2016-09-25 20:54:46Z

0

I think instead of document.formulario.suma.value it should be document.formulario.total.value.

However, below code is working fine. Tested in jsfiddle (link below).

function formtotal() {
    var x = document.getElementById("opciones").value;
    if (x == "1") {
        document.getElementById("total").value = "1000";
    }
    else if (x == "2") {
        document.getElementById("total").value = "1250";
    }
    else if (x == "3") {
        document.getElementById("total").value = "1500";
    }
}

Add onchange to the select tag as per below snippet:

<select name="opciones" id="opciones" onchange="formtotal()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

https://jsfiddle.net/fghxhtmk/ - Working fine. Please check.

EDIT: Added "value" to each option tag.

edited Sep 25, 2016 at 20:54

answered Sep 25, 2016 at 20:32

Sneh Saluja

631 silver badge7 bronze badges

4 Comments

Sneh Saluja Over a year ago

Could you please visit the link provided : jsfiddle.net/fghxhtmk

Sneh Saluja Over a year ago

Hi @PabloBarrios , I missed out "value" attribute in <option> tag. Please check my answer again. It will work fine this time. :)

Pablo Barrios Over a year ago

Thanks, now its working. I tried to refresh cache with all of your recommendations. ;)

Sneh Saluja Over a year ago

You're welcome :) and thanks for marking my answer correct. :)

monokh · Accepted Answer · 2016-09-25 20:35:42Z

0

One clear mistake I can see is your use of the equality operator document.formulario.opciones.value = "1"

Should be

document.formulario.opciones.value == "1"

Due to this, your first if statement is always going to be evaluated as true.

answered Sep 25, 2016 at 20:35

monokh

1,9903 gold badges22 silver badges32 bronze badges

1 Comment

Pablo Barrios Over a year ago

I tried it changing = for == and it doesnt works too

Collectives™ on Stack Overflow

Javascript Issue changing a form input

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related