javascript - 如何通过单击提交按钮将各个动态创建的元素的 id 传递给函数 - javascript

Question

首先看我的代码，然后在底部我问了问题。

这是我的 HTML -

<form action="confirm_booking.php" method="get">
<input type="hidden" value="26-March-2014" name="event_date">
<select id="seltimeslot-26-March-2014" class="seltime" name="seltimeslot">
<option value="null">Select a Time</option>
<option disabled="disabled" value="1">9am-10am - Taken</option>
<option value="2">10am-11am - Available</option>
<option disabled="disabled" value="3">11am-12pm - Taken</option>
<option value="4">12pm-1pm - Available</option>
<option value="5">1pm-2pm - Available</option>
<option value="6">2pm-3pm - Available</option>
<option value="7">3pm-4pm - Available</option>
<option value="8">4pm-5pm - Available</option>
</select>
<br>
<br>
<input type="submit" onclick="return checkForm();" value="Book Slot" name="btnbook">
</form>



<form action="confirm_booking.php" method="get">
<input type="hidden" value="27-March-2014" name="event_date">
<select id="seltimeslot-27-March-2014" class="seltime" name="seltimeslot">
<option value="null">Select a Time</option>
<option value="1">9am-10am - Available</option>
<option value="2">10am-11am - Available</option>
<option value="3">11am-12pm - Available</option>
<option value="4">12pm-1pm - Available</option>
<option disabled="disabled" value="5">1pm-2pm - Taken</option>
<option value="6">2pm-3pm - Available</option>
<option value="7">3pm-4pm - Available</option>
<option value="8">4pm-5pm - Available</option>
</select>
<br>
<br>
<input type="submit" onclick="return checkForm();" value="Book Slot" name="btnbook">
</form>

请注意，上面的 HTML 是通过 mysql 查询和 PHP 循环动态生成的。它适用于一个月中的每一天。

现在，为了验证用户是否在单击相应的提交按钮时从选择列表框中选择了一个值，我有以下 JavaScript 函数 -

<script type="text/javascript">
function checkForm(id)
{
    var time_slot = document.getElementById(id);
    if(time_slot.value == "null")
    {
        alert("Please select your available event time slot.");
        return false;
    }
    else
    {
        return true;
    }
}
</script>

现在请告诉我如何通过单击相应的提交按钮将单个选择列表框元素 ID 传递给此函数？假设如果按下 ID 为 seltimeslot-26-March-2014 的选择列表框的提交按钮，那么它将仅检查 ID 为 seltimeslot-26-March-2014 的相应选择列表框的验证，而不检查其他选择列表框的验证。如果用户选择了 ID 为 seltimeslot-27-March-2014 的选择列表框的值，并按下 seltimeslot-26-March-2014 的提交按钮，则警报必须显示 -“请选择您可用的事件时间段”，因为他是对于已选择值的选择列表框，不按提交按钮。

Answer 1

你能看一下这个:jsFiddle

我稍微更新了 HTML 并使用了 jQuery。作为按钮单击的一部分，我将发送 Select 元素的 ID

function checkForm(id) {
    var time_slot = $('#'+id).val();
    if (time_slot == "null") {
        alert("Please select your available event time slot.");
        return false;
    } else {
        return true;
    }
}

还有另一种方法可以做到这一点，但这是我能想到的最少的改变。

以下 fiddle 是我谈论的另一种方式:jsFiddle

$(function () {
    $('input[name="btnbook"]').on('click', function (ev) {
        ev.stopPropagation();
        ev.preventDefault();
        $event = $(ev.target);
        $closestSelect = $event.parent().children('select');
        var time_slot = $closestSelect.val();
        if (time_slot == "null") {
            alert("Please select your available event time slot.");
            return false;
        } else {
            alert("You selected a value: " + time_slot);
            return true;
        } 
    });
});

我更新了 html 以删除 onclick 事件。如果这不是您想要的或有其他问题，请告诉我。