如果未选中该复选框,则提交默认值

时间:2017-03-25 14:25:06

标签: javascript java html forms checkbox

我有一个html表单提交给我的spring java控制器。我这里有一个小问题。

 <table id="example1" class="table table-bordered table-striped">
                            <thead>

                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Age</th>
                                <th>Sex</th>
                                <th>District</th>
                                <th>VDC/MUNICIPAL</th>
                                <th>Ward No.</th>
                                <th>Camp Visited?</th>
                                <th>Consent</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="persons : ${part}">
                                <form method="post" th:action="@{/addParticipant}" enctype="multipart/form-data">
                                    <input type="hidden" th:value="${persons.id}" name="id">
                                    <td>
                                        <span class="hidden" th:text="${persons.name}"></span>
                                        <input type="text" name="name" th:value="${persons.name}">
                                    </td>
                                    <td>
                                        <span class="hidden" th:text="${persons.lastName}"></span>
                                        <input name="lastName" type="text" th:value="${persons.lastName}">
                                    </td >
                                    <td>
                                        <span class="hidden" th:text="${persons.age}"></span>
                                        <input name="age" type="text" th:value="${persons.age}">
                                    </td>
                                    <td>
                                        <span class="hidden" th:text="${persons.sex}"></span>
                                        <input name="sex" type="text" th:value="${persons.sex}">
                                    </td>
                                    <td>
                                        <span class="hidden" th:text="${persons.district}"></span>
                                        <input name="district"  type="text" th:value="${persons.district}">
                                    </td>
                                    <td>
                                        <span class="hidden" th:text="${persons.vdcMun}"></span>
                                        <input name="vdcMun"  type="text" th:value="${persons.vdcMun}">
                                    </td>
                                    <td>
                                        <span class="hidden" th:text="${persons.wardNo}"></span>
                                        <input name="wardNo" type="text" th:value="${persons.wardNo}">
                                    </td>
                                    <td>
                                        <div class="checkbox">
                                            <input type='hidden' value='no' name='attendStatus' id="attendStatusHidden">
                                            <input type="checkbox" value="yes" name="attendStatus" id="attendStatus">
                                        </div>

                                    </td>
                                    <td>
                                        <div class="form-control">
                                            <input type="hidden" name="file" value="null">
                                            <input id="file" type="file" name="file" accept="image/*">
                                        </div>
                                    </td>
                                    <td>
                                        <button type="submit" class="btn btn-success" id="submitButton">Submit</button>
                                    </td>
                                </form>
                            </tr>
                            </tbody>
                        </table>

所以我想要做的就是每当我的复选框被选中时它应该发送值为yes no no。

我试图将两个输入字段与一个隐藏。但每当我提交表格时,它都会在我的桌子上张贴是和否。

我试过像这样的javascript。

   window.onload = function(){
    if(document.getElementById("attendStatus").checked) {
        document.getElementById('attendStatusHidden').disabled = true;
    }
};

我试图在检查复选框时禁用隐藏字段,但仍然会在我的桌子上发布是,否。

我怎么能用javascript或HTML本身解决这个问题,如果有的话?

2 个答案:

答案 0 :(得分:0)

您可以为隐藏字段使用单独的输入名称:

<input type='hidden' value='no' name='_attendStatus' id="attendStatusHidden">

然后,如果您的参数attendStatus不存在,则可以使用_attendStatus值。

例如,在Spring中使用此约定。 有关详细信息,请参阅this answer


在客户端处理此问题的另一个选项如下:

<input type='hidden' value='false' name='attendStatus' id="attendStatusHidden">
<input type="checkbox" onchange="document.getElementById('attendStatusHidden').value = this.checked">

答案 1 :(得分:0)

您可以轻松地进行管理。

<input type='hidden' value='false' name='attendStatus' ">
<input type="checkbox" name="attendStatus" value="true" >

如果未选中此复选框,则发送到表单的值将为false。 如果选中此复选框,则发送到表单的值将为true。 您应该为他们两个拥有相同的“名称”属性,并且顺序也很重要,隐藏的输入位于复选框的前面和后面。