使用JavaScript將值設置為表單字段

Question

我有一個包含多個字段的Web表單。 其中三個是ano_evento，mes_evento和dia_evento（年，月和日）。 我想從這些字段中獲取值，將其轉換為日期格式，然后在另一個名為fecha_evento的字段中顯示格式化的日期。 用戶設置ano_evento的值（例如2014），mes_evento的值（例如11）和dia_evento的值（例如25）。 fecha_evento的值應為2014-11-25。 這三個字段中都有一個onchange方法：

對於ano_evento：

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

對於mes_evento：

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

對於dia_evento：

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

fecha_evento的字段：

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

這是腳本：

<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>

當用戶更改三個字段值中的任何一個時，將顯示腳本內的警報，但是來自fecha_evento字段的值不會更改。

歡迎任何幫助

Answer 1

而不是內聯javascript，我只需要使用querySelectorAll

演示

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;
}

Answer 2

你好嗎？

試試這個代碼：

<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>

建議：-將元素保存在變量中以優化執行，避免不斷進行DOM訪問。 -從JS設置事件處理程序。 -使用瀏覽器控制台查看是否存在JS錯誤。

問候。