0

我有一个简单的小 javascript，我以不同的形式多次使用它。它与两个日期选择器一起使用，以便将第一个日期选择器中的选定日期复制到第二个日期选择器。它看起来像这样：

MouseOver = true;

function date_copy_set() {
    FirstMouseOver = true;
}

function date_copy() {
    if (FirstMouseOver && MouseOver) {
        frames.booking.DepartureDate.value=frames.booking.ArrivalDate.value;
        FirstMouseOver = false;
        MouseOver = false;
    } else {
    }
}

现在我有一个新的脚本应用程序，页面上有几个非常相似的表单版本，但我无法让脚本工作。该表格将有 2 到 8 个版本，简化形式为：

<form action="/book/book1.php" method="post" target="_blank"
 id="booking_<?php echo $row_season['season_id'] ?>" name="booking">

<input name="ArrivalDate" id="ArrivalDate" class="datebox"
 size="10" onBlur="date_copy_set()" type="date">

<input name="DepartureDate" id="DepartureDate" class="datebox"
 size="10" onFocus="date_copy()" type="date"> 

<a href="javascript:void()" 
 onclick="frames.booking_<?php echo $row_season['season_id'] ?>.submit()"
 class="buttonPriceBook">Enquire or Book</a></td>

</form>

在 id 中包含 season_id 可确保所有 id 都是唯一的，因此提交按钮有效。但是，我看不到用复制日期的脚本做同样事情的巧妙方法。我尝试了 getElementsByName 和 getElementsByClassName 的各种排列，但没有任何成功。

4

1 回答 1

0

如果表单中的输入都具有相同的名称，即 ArrivalDate 和 DepartureDate，那么您可以通过使用this传递对调用侦听器的元素的引用来将值从一个复制到另一个：

<input name="ArrivalDate" ... onblur="date_copy_set(this)" ...>
<input name="DepartureDate" ... onblur="date_copy_set(this)" ...>

现在在方法中：

function date_copy_set(element) {
  if (element.name == 'ArrivalDate') {
    element.form.DepartureDate.value = element.value;
  } else if (element.name == 'DepartureDate') {
    element.form.ArrivalDate.value = element.value;
  }
}

因此，如果到达日期发生更改，它会设置出发日期，反之亦然。

请注意，每个输入对必须采用不同的形式，并且不需要 ID 属性。

其他一些东西——总是声明变量：

var FirstMouseOver, MouseOver = true;

使用以下方式提交表单：

<a href="javascript:void()" 
 onclick="frames.booking_<?php echo $row_season['season_id'] ?>.submit()"
 class="buttonPriceBook">Enquire or Book</a>

对我没有任何意义，只需使用提交按钮。至少，不要使用带有 munged href 属性的 A 元素，使用样式化 span 或其他更合适的元素。

于 2014-07-03T13:50:36.500 回答