使用Java验证单选按钮

Question

我正在创建一个薪资请求表，用户将在其中选择他们希望如何支付加班费。 两种选择是“支付”（用户在薪水中获得额外的薪水）或“时间”（用户获得补偿性的休假，以待日后进行）。

我创建了一个单选按钮输入，供用户选择一个或另一个。 我编写了一个验证以确保选择了一个按钮，并且该按钮在我的测试程序中可以正常工作，但是当我将其放入该项目的代码中时，该代码不会运行。 据我所知，我的测试程序与项目之间没有任何区别。

我正在尝试使用一个更简单的布尔值，并希望坚持使用此选项，而不是使用for循环或尽可能使用JQuery。

这是html的相关部分：

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post">
<div>
    <label>
        <span>request</span>
            <div style="display:block">
                <input class="radio" type="radio" id="timePay" name="timePay" value="0" ><span>time</span>
                <input class="radio" type="radio" id="timePay" name="timePay" value="1"><span>pay</span>
            </div>
     </label>
</div>
<input type="submit" id="submit" value="submit">
</form>

这是javascript的相关部分：

function submitCard (form) {
    errorString = "";
    if((form.timePay[0].checked == false) && (form.timePay[1].checked == false)) {
        alert("please choose either time or pay");
        timePay[0].focus();
        return false;
    }
    if(errorString = "") {
        form.submit()
    }
}

编辑以添加以下内容：

西里尔·DD的回答为我指明了正确的方向。 我将单选按钮的ID更改为每个按钮唯一。 HTML现在显示为：

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post">
<div>
    <label>
        <span>request</span>
            <div>
                <input class="radio" type="radio" id="selectTime" name="timePay" value="0"><span>time</span>
                <input class="radio" type="radio" id="selectPay" name="timePay" value="1"><span>pay</span>
            </div>
     </label>
</div>
<input type="submit" id="submit" value="submit">
</form>

然后，我将每个按钮定义为一个单独的变量，而不是像以前一样将其统称为“ timePay”，并按如下所示更改了javascript：

if((selectTime.checked == false) && (selectPay.checked == false)) {
    alert("please choose either time or pay");
    selectTime.focus();
    return false;
}

Answer 1

您没有将表单的引用传递给submitCard()函数。

更改

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post">

至

<form class="oTcard" name="otCard" onSubmit="return submitCard(this)" method="post">

其他一些注意事项：

1. 您不应在表单上timePay使用id timePay 。
2. 您不应该将div标签放在span标签内。

这里的工作示例

Answer 2

<form class="oTcard" name="otCard" onSubmit="return submitCard(this)" method="post">

必须将参数传递给函数，这就是为什么JS验证失败的原因。

Answer 3

在HTML中首先：您应使用相同的“名称”属性，但应使用不同的ID（ demo ）

某些浏览器可能与您要执行的操作不兼容。 您应该只具有函数function submitCard() ，然后使用其ID在网页中查找所需的元素，而不是在function submitCard (form)中使用“表单”参数

function submitCard () {
    checkbox1 = document.getElementById("timeCheckBox").checked
    checkbox2 = document.getElementById("payCheckBox").checked
    if(!checkbox1 && !checkbox2)
        alert("nothing checked !");
        return false;
    }
    else{
        return true
    }
}

HTML看起来像

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post">
<div>
    <label>
        <span>request</span>
            <div style="display:block">
                <input class="radio" type="radio" id="timeCheckBox" name="timePay" value="0" ><span>time</span>
                <input class="radio" type="radio" id="payCheckBox" name="timePay" value="1"><span>pay</span>
            </div>
     </label>
</div>
<input type="submit" id="submit" value="submit">
</form>