如何通过单击提交按钮将单个动态创建的元素的 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 事件。如果这不是您想要的或有其他问题，请告诉我。

Answer 2

您有一个带有日期的隐藏输入，一旦您提交了表单，您就可以获取该输入的值并使用它来创建 id：

//this is window
//this.event.currentTarget is the button
//this.event.currentTarget.parentElement.event_date is the hidden field

function checkForm() {
    var id='#seltimeslot-'+this.event.currentTarget.parentElement.event_date.value;
    console.log (id);
    console.log($(id).val());
    if ($(id).val() == "null") {
        alert("Please select your available event time slot.");
        return false;
    } else {
        return true;
    }
}

当然这只是回答你的问题，但你可以直接使用 直接检查所选元素的方法：

function checkForm() {

    if (this.event.currentTarget.parentElement.seltimeslot.value == "null") {
        alert("Please select your available event time slot.");
        return false;
    } else {
        return true;
    }
}

更新： 你不能使用

<input type="submit" onclick="return checkForm(this.id);" value="Book Slot" name="btnbook">

因为this在运行时是window