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()
    }
}

编辑以添加以下内容：

Cyril DD的回答指出了我正确的方向。我将单选按钮的ID更改为每个按钮的唯一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">

其他一些说明：

您不应在表单上多次使用ID timePay。
您不应将div标记放在span标记内。

工作示例here

Answer 2

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

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

Answer 3

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

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

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>

使用Javascript验证单选按钮

3 个答案: