CODEWITHSUNDEEP
javascriptjavahtmlformscheckbox
sagar limbu
sagar limbu

Reputation: 1262

submit default value if the checkbox is unchecked

i have a html form submitting to my spring java controller. i have a small problem here. 

 <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>

so what i am trying to do is whenever my checkbox is checked it should send the value yes else no.

i tried to put the two input fields with one being hidden. but whenever i submit the form it posts both yes and no on my table.

i tried javascript like this.

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

i am trying to disable hidden field whenever i check the checkbox but still it posts both yes,no on my table.

how can i solve this with javascript or HTML itself, if there's any?

Upvotes: 0

Views: 2680

Answers (3)

eastmael
eastmael

Reputation: 421

I was able to solve this issue by adding a hidden item whose field name starts with an exclamation mark (!).

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

This is described in Spring's WebDataBinder API as DEFAULT_FIELD_DEFAULT_PREFIX.

Upvotes: 2

user3359189
user3359189

Reputation: 21

You can easily manage like that.

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

if the checkbox is not checked, the value send to the form will be false. If the checkbox is checked, the value send to the form will be true. you should have the same 'name' property for both of them, and the order is also important, the hidden input come first and after the checkbox.

Upvotes: 2

rptmat57
rptmat57

Reputation: 3787

You can use a separate input name for your hidden field:

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

Then if your parameter attendStatus isn't present you can use the _attendStatus value.

This convention is used in Spring for example. See this answer for more information about it.


another option to handle this on the client side like this:

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

Upvotes: 0

Related Questions