使用JavaScript将值设置为表单字段

使用JavaScript将值设置为表单字段,javascript,Javascript,我有一个包含多个字段的web表单。其中三个事件是ano_evento、mes_evento和dia_evento(年、月和日)。我想从这些字段中获取值,将其转换为日期格式,并在另一个名为fecha_evento的字段中显示格式化的日期。用户设置ano_事件值(如2014年)、mes_事件值(如11)和dia_事件值(如25)。fecha_事件的值应为2014年11月25日。 这三个字段都有一个onchange方法: 对于ano_事件: <select name="ano_evento" i

我有一个包含多个字段的web表单。其中三个事件是ano_evento、mes_evento和dia_evento(年、月和日)。我想从这些字段中获取值,将其转换为日期格式,并在另一个名为fecha_evento的字段中显示格式化的日期。用户设置ano_事件值(如2014年)、mes_事件值(如11)和dia_事件值(如25)。fecha_事件的值应为2014年11月25日。 这三个字段都有一个onchange方法:

对于ano_事件:

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

对于mes_事件:

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

对于dia_evento:

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

fecha_事件的字段:

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

函数cambiar_fecha(){
警报(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;
}
当用户更改三个字段值中的任何一个时,脚本中的警报将显示,但字段fecha_evento中的值不会更改


欢迎提供任何帮助

而不是内联javascript,我只想使用querySelectorAll

HTML:


1.
2.
1.
2.
1.
2.
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;
}
var a=document.querySelectorAll('select');
控制台日志(a);
对于(var i=0;i你好吗

请尝试以下代码:

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

1.
2.
3.
1.
2.
3.
1.
2.
3.
var ano=document.getElementById(“ano_evento”);
var mes=document.getElementById(“mes_evento”);
var dia=document.getElementById(“dia_evento”);
var fecha=document.getElementById(“fecha_evento”);
函数cambiar_fecha(){
警报(fecha.value);
fecha.value=ano.value+“-”+mes.value+“-”+dia.value;
警报(fecha.value);
}
ano.onchange=柬埔寨;
mes.onchange=cambiar_fecha;
dia.onchange=cambiar_fecha;
建议: -将元素保存在变量中以优化执行,避免DOM访问。 -从JS设置事件处理程序。 -使用浏览器控制台查看是否存在JS错误


关于。

如果您在cambiar_fecha函数中控制台.log(ano、mes、dia),输出是什么?@ateich,我现在检查一下,并通知您……它似乎对我有用。我只是删除了一个引号以避免语法错误。@ateich,正如预期的那样,日志是2014 11 25请修复
“dia
复制错误,你会因此得到很多不正确的答案。
<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>