CODEWITHSUNDEEP
javascript
mvasco
mvasco

Reputation: 5107

Setting value to a form field with JavaScript

I have a web form with several fields. Three of them are ano_evento, mes_evento and dia_evento (year, month and day). I want to get the values from these fields, convert it to a date format and show the formatted date in another field called fecha_evento. The user sets a value for ano_evento (e.g. 2014), a value for mes_evento (e.g. 11) and a value for dia_evento (e.g. 25). The value for fecha_evento should then be 2014-11-25. All three fields have an onchange method in it:

For ano_evento:

<select name="ano_evento" id ="ano_evento" onchange="cambiar_fecha()">

For mes_evento:

<select name="mes_evento" id ="mes_evento" onchange="cambiar_fecha()">

For dia_evento:

<select name="dia_evento" id="dia_evento" onchange ="cambiar_fecha()">

The field for fecha_evento:

<input type="text" name="fecha_evento" id="fecha_evento" value="0" size="32" />

And this is the script:

<script>
function cambiar_fecha(){
alert (document.getElementById("fecha_evento").value);

var ano = document.getElementById("ano_evento").value;

var mes = document.getElementById("mes_evento").value; // 

var dia = document.getElementById("dia_evento").value;

document.getElementById("fecha_evento").value = ano+"-"+mes+"-"+dia;
}

</script>

When the user changes any of the three fields values, the alert inside the script is shown, but the value from the field fecha_evento doesn't change.

Any help is welcome

Upvotes: 0

Views: 39

Answers (2)

Maximiliano Hornes
Maximiliano Hornes

Reputation: 101

how are you?

Try this code:

<select name="ano_evento" id="ano_evento">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select name="mes_evento" id="mes_evento">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select name="dia_evento" id="dia_evento">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<input type="text" name="fecha_evento" id="fecha_evento">

<script>

    var ano = document.getElementById("ano_evento");
    var mes = document.getElementById("mes_evento");
    var dia = document.getElementById("dia_evento");
    var fecha = document.getElementById("fecha_evento");

    function cambiar_fecha() {
        alert(fecha.value);
        fecha.value = ano.value + "-" + mes.value + "-" + dia.value;
        alert(fecha.value);
    }

    ano.onchange = cambiar_fecha;
    mes.onchange = cambiar_fecha;
    dia.onchange = cambiar_fecha;

</script>

Recommendations: - Save the elements in variables to optimize execution avoiding constantly DOM access. - Set events handler from JS. - Use browser console to see if there are JS errors.

Regards.

Upvotes: 1

baao
baao

Reputation: 73211

Instead of the inline javascript, I would just go with a querySelectorAll

DEMO

HTML:

<select name="ano_evento" id ="ano_evento" >
   <option value="1">1</option>
   <option value="2">2</option>
</select>

<select name="mes_evento" id ="mes_evento" >
   <option value="1">1</option>
   <option value="2">2</option>
</select>

<select name="dia_evento" id="dia_evento" >
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<input type="text" name="fecha_evento" id="fecha_evento" value="0" size="32" />

Javascript:

var a = document.querySelectorAll('select');
console.log(a);
for(var i = 0; i<a.length;i++) {
    a[i].addEventListener('change',cambiar_fecha);
}
function cambiar_fecha(){

alert (document.getElementById("fecha_evento").value);

var ano = document.getElementById("ano_evento").value;

var mes = document.getElementById("mes_evento").value; // 

var dia = document.getElementById("dia_evento").value;

document.getElementById("fecha_evento").value = ano+"-"+mes+"-"+dia;
}

Upvotes: 1

Related Questions