Question

我有一个包含三个字段的HTML表单：

状态
部门和
送货方式

我想显示或隐藏字段，具体取决于用户的浏览器是否支持JavaScript。

我也试图根据另一个的值设置一个字段。如果status设置为 DE ，那么我也想将delivery method的值设置为 DE 。

我将如何实现此功能？

Answer 1

您使用的字段是否未使用html标记创建？我不确定如何使用JAVA来禁用它们，但你肯定可以使用简单的javascript语句。

说状态字段的id为'fStatus'。然后您可以简单地执行以下操作：

<script type="text/javascript>
document.getElementById('fStatus').type = 'hidden'; //to hide it and
document.getElementById('fStatus').type = 'text';   //to un-hide it
</script>

现在要执行状态更改时执行函数，您需要稍微修改html。像这样：

<input type="text" id="fStatus" onChange="validate()" />

并在页面加载时执行相同的功能，修改体如下：

<body onLoad="validate()">

适当的javascript函数是：

<script type="text/javascript">
function validate()
{
  if(document.getElementById('fStatus').value == "DE")
  {
    document.getElementById('fDelivery').value = "DE"; // Assuming that the id of the delivery field is 'fDelivery'
  }
}
</script>

Answer 2

如果你想在不支持JS的情况下隐藏表单，为什么不默认隐藏它然后用javascript显示呢？

jQuery会让这很容易：

jQuery(function() {
  $("form#formID").show();
});

jQuery还可以轻松检查表单字段的值：

$("input#user_email").val() //=> 'user@email.com'

如果可以，我会使用jQuery;）

Answer 3

默认使用css隐藏它：

#formID {
    display: none;
}

然后用js你可以显示它：

document.getElementById('formID').style.display = 'block';

Answer 4

一般的想法是将onchange事件监听器绑定到“状态”字段：

document.getElementById("status").onchange = function() {
    var currentValue = this.value;
    document.getElementById("deliveryMethod").value = currentValue;
}

在该函数中，您将获得使用this.value更改的元素的值。然后，您可以使用该值执行任何操作，例如将其分配给另一个字段的value。

使用JavaScript修改表单

4 个答案: