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?
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.
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.
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">
Related
I have been searching solutions for this and found that the most effective way is through a hacky workaround like this, but none of them has posted a working way to catching every tick and untick box for a dynamic input row using a lot of checkbox arrays.
I looked around and saw a script way -- let hidden inputs be the POST source and change value according to their adjacent checkbox upon submit. However the jquery doesn't seem to work -- it always submits a value of 0 (whatever the value attribute inside hidden inputs.
$(document).ready(function() {
$('#frm').submit(function() {
$('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->
Your code works
I will delete this answer once we have discussed it
I have changed hidden to text and added preventDefault to show it works
$(document).ready(function() {
$('#frm').on("submit",function(e) {
e.preventDefault(); //while testing
$('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<input type="text" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="text" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->
<input type="submit"/>
</form>
Consider the following example.
$(function() {
function getTableData(table) {
var results = [];
$("tbody > tr", table).each(function(i, row) {
results.push({
id: $(row).data("uid"),
isHeadofHousehold: $("input", row).eq(0).prop("checked"),
isEmployed: $("input", row).eq(1).prop("checked")
});
});
return results;
}
$('#frm').on("submit", function(e) {
e.preventDefault();
var formData = getTableData($("#myTable"));
console.log(formData);
});
});
.checkbox {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Head of Household</th>
<th>Employed</th>
</tr>
</thead>
<tbody>
<tr data-uid="1001">
<td>Homer Simpson</td>
<td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]" checked></td>
<td class="checkbox"><input type="checkbox" name="isEmployed[]" checked></td>
</tr>
<tr data-uid="1002">
<td>Marge Simpson</td>
<td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]"></td>
<td class="checkbox"><input type="checkbox" name="isEmployed[]"></td>
</tr>
</tbody>
</table>
<input type="submit" value="Save" />
</form>
You now have:
[
{
"id": 1001,
"isHeadofHousehold": true,
"isEmployed": true
},
{
"id": 1002,
"isHeadofHousehold": false,
"isEmployed": false
}
]
You can then use AJAX to POST this data back to PHP so the changes can be saved to SQL. As mentioned, you can switch them to 1 and 0 respectively if you choose.
Update
Returning to OP's desired method, consider the following.
$(function() {
$("#frm").on("change", "input[type='checkbox']", function(event) {
$(this).prev(".checkboxHandler").val($(this).prop("checked") ? 1 : 0);
});
});
.checkbox {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Head of Household</th>
<th>Employed</th>
</tr>
</thead>
<tbody>
<tr data-uid="1001">
<td>Homer Simpson</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="1" />
<input type="checkbox" checked />
</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="1" />
<input type="checkbox" checked />
</td>
</tr>
<tr data-uid="1002">
<td>Marge Simpson</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0" />
<input type="checkbox" />
</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0" />
<input type="checkbox" />
</td>
</tr>
</tbody>
</table>
<input type="submit" value="Save" />
</form>
This updates the hidden text box value when a User makes a change.
If you are insistent on using the original code, use the following:
$('input[type="checkbox"]:checked').prevAll('.checkboxHandler').val(1);
I strongly advise not using this, as it's a one way logic and if the User unchecks a box before the form is submitted, the change will not be captured.
Update 2
Based on the Top rated answer here, you could also do this:
<td>
<input type="hidden" name="isHeadOfFamily[]" value="0">
<input type="checkbox" name="isHeadOfFamily[]" value="1">
</td>
<td>
<input type="hidden" name="isEmployed[]" value="0">
<input type="checkbox" name="isEmployed[]" value="1">
</td>
The only caveat is that if the User checks a box, both values would get sent. So as suggested, disable the hidden upon submit if unchecked.
$("#frm").submit(function(){
$('input[type="checkbox"]:checked').prevAll().prop("disabled", true);
});
I am trying to confirm a confirmation box in Javascript for a school project. The confirmation box comes up asking if you want to submit, and I would like to submit programmatically. Here is the HTML for the form:
<form action="https://weekend.lps.wels.net/lpswp/index.php" method="post" id="form_wp_entry" onsubmit="return lpswp_confirm_submission('3,4','Friday,Saturday','Sunday')" style="display: inline;">
<table class="em_table" width="100%" style="margin-bottom: 5px;">
<tbody><tr>
<th align="left" id="lpswp_night_label_title_3">
Friday
</th>
</tr>
<tr>
<td>
Location: <input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_dorm_3" value="dorm" checked="checked" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_dorm_3">Dorm</label> |
<input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_home_3" value="home" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_home_3">Home</label><br>
<input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_other_3" value="other" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_other_3" id="lpswp_night_label_text_3">Other</label>:
<input type="text" size="60" name="lpswp_nights[3][other]" id="lpswp_nights_other_3"><br>
Phone Number (if known): <input type="text" size="20" name="lpswp_nights[3][phone]" id="lpswp_nights_phone_3"> (999-999-9999)
</td>
</tr>
<tr>
<th align="left" id="lpswp_night_label_title_4">
Saturday
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="lpswp_nights[4][same]" id="lpswp_nights_same_4" value="1" checked="checked" onclick="lpswp_toggle_same(4)"> <label for="lpswp_nights_same_%temp_night%">Same as Friday night.</label><br>
Location: <input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_dorm_4" value="dorm" checked="checked" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_dorm_4">Dorm</label> |
<input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_home_4" value="home" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_home_4">Home</label><br>
<input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_other_4" value="other" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_other_4" id="lpswp_night_label_text_4">Other</label>:
<input disabled="disabled" type="text" size="60" name="lpswp_nights[4][other]" id="lpswp_nights_other_4"><br>
Phone Number (if known): <input disabled="disabled" type="text" size="20" name="lpswp_nights[4][phone]" id="lpswp_nights_phone_4"> (999-999-9999)
</td>
</tr>
<tr>
<th align="left" id="lpswp_final_dinner_label_title">
Sunday Dinner
</th>
</tr>
<tr>
<td id="lpswp_final_dinner_label_text" style="border: 0px;">
I WILL be eating in the cafeteria: <input type="radio" name="lpswp_final_dinner" id="lpswp_final_dinner_1" value="1"><br>
I will NOT be eating in the cafeteria: <input type="radio" name="lpswp_final_dinner" id="lpswp_final_dinner_0" value="0"><br>
<input type="hidden" name="lpswp_final_dinner_night" value="5">
</td>
</tr>
</tbody></table>
<input type="submit" value="Submit Weekend Plans">
<!--input type="reset" value="Cancel" /-->
</form>
Here is my current code that does not do anything to the confirmation box:
mWebView.loadUrl("javascript:(function(){" +
"document.getElementById('form_wp_entry').setAttribute('onsubmit','return true;');" +
";})()");
Please help me, I am new to javascript... and coding in general.
You're looking for .submit().Note that this won't trigger any functionality that's hooked up to the onsubmit of the form:
function output() {
console.log('Submitted');
return false;
}
// Forcibly submit the form
function customSubmit() {
document.getElementsByTagName('form')[0].submit();
}
<form name="a_form" onsubmit="return output()">
<button type="submit">Submit</button>
</form>
<br />
<button onclick="customSubmit()">Submit Programmatically</button>
Hope this helps!
I am trying to insert input field in my div onclick of check box. and it is working but when i submit the form the value is not received to me of that input box
check box
<form action="{{ url('product_uplo') }}" method="get" enctype="multipart/form-data" accept-charset="utf-8">
<tr>
<table class="table">
<tr>
<td>
<label><input type="checkbox" id="ELarge" name="pro_size[]" onclick="a('ELarge')" value="ELarge"> Extra Large</label>
</td>
<td>
<label><input type="checkbox" id="Large" name="pro_size[]" onclick="a('Large')" value="Large"> Large</label>
</td>
<td>
<label><input type="checkbox" id="Medium" name="pro_size[]" onclick="a('Medium')" value="Medium"> Medium</label>
</td>
<td>
<label><input type="checkbox" id="Small" name="pro_size[]" onclick="a('Small')" value="Small"> Small</label>
</td>
<td>
<label><input type="checkbox" id="ESmall" name="pro_size[]" onclick="a('ESmall')" value="ESmall"> Extra Small</label>
</td>
</tr>
</table>
</tr>
<tr>
<td>Price</td>
<td>
<div id="set"></div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="form-control btn btn-primary">
</td>
</tr>
</form>
JQuery code
<script type="text/javascript">
function a(extra){
if($('#'+extra+'').is(":checked")){
$('#set').append("<div id="+"price"+extra+"><label>"+extra+"</label><input type='text' name='pro_price["+extra+"]' class='form-control' placeholder="+extra+" /></div>");
}else{
$('#price'+extra).remove();
}
}
</script>
When I submit the form the url is like this
http://www.asggas.com/product_uplo?dat=pro_type=Girls+Cloth&pro_name=asadsfd&brand=sadf&Material=sadf&pro_color=sdf&pro_des=sadf&pro_size%5B%5D=ELarge&pro_size%5B%5D=Large&pro_quantity=5446&galary%5B%5D=
it doesn't pass pro_price[Elarge] ...
Please help
after searching to much i got the answer. because of i am using table tag it's now sending the data. so remove the table tag and it will work
I'm trying to get form in table with enabling and disabling inputs by checkbox.
When I realized, that <form> is not working in tables I put form argument in inputs, but now disabling/enabling doesn't working (my js skill is kinda poor)
My checkbox to disable/enable inputs look like:
<td>
<input type="checkbox" onclick="this.form.elements['bleh'].disabled = this.form.elements['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj"/>
</td>
And my input boxes for now are:
<td><input type="text" name="bleh" form="id7" value="default" disabled=disabled></td>
<td><input type="text" name="bleh2" form="id7" value="admin" disabled=disabled></td>
if you give your form a name you can reach the elements like this:
document.FORM_NAME.ELEMENT_NAME.disable
Eg
document.id7.bleh.disabled
So you can change your onclick to
<input type="checkbox" onclick="document.id7.bleh.disabled = document.id7.bleh2.disabled = !this.checked" />
Example
Using form attribute to external form
Demo Fiddle
When you have your table within the form
<form action="#">
<table>
<tr>
<td>
<input type="text" name="bleh" value="default" disabled="disabled" />
</td>
<td>
<input type="text" name="bleh2" value="admin" disabled="disabled" />
</td>
<td>
<input type="checkbox" onclick="this.form['bleh'].disabled = this.form['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj" />
</td>
</tr>
</table>
</form>
When you declare your form elements outside the form
<table>
<tr>
<td>
<input type="text" name="bleh" form="id7" value="default" disabled="disabled" />
</td>
<td>
<input type="text" name="bleh2" form="id7" value="admin" disabled="disabled" />
</td>
<td>
<input type="checkbox" onclick="document.forms['id7']['bleh'].disabled = document.forms['id7']['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj" />
</td>
</tr>
</table>
<form name="id7" id="id7" action="#"></form>
I have code which will dynamically create elements which works great.
But I have two forms on my page .. one to load an image and the other to input data which is ordered as follows
<form name=image>
</form>
<form name=data>
<div id="p_scents">
JavaScript elements are inserted here
</div>
</form>
Now if I have the image form and I submit the form, the javascript created elements are not submitted and do NOT appear in _POST.
But without the image form, these javascript created elements do appear in _POST
Any reason why?
See code below...
<table border=1 cellpadding="1" cellspacing="0" width=80%>
<tr>
<td>
Select image for new banner
</td>
<td>
<form method="post" action="/index.php/dashboard/create/" enctype="multipart/form-data" name=LoadImage>
<input type="file" name="image"/>
<input type="submit" value="upload"/>
</form>
</td>
</tr>
<tr><td colspan=2 align=center>
<form action="index.php/create" method="post" accept-charset="utf-8" name="CreateBanner">
Add Another Input Box
</td>
</tr>
<tr><td>
Give your banner a unique name</td>
<td>
<input type="text" name="name" value="" id="name" autofocus /></td></tr>
<tr><td>Specify email address or domain to brand</td>
<td>
<input type="text" name="domainName" value="" id="domain" /></td></tr>
<tr><td>Status</td>
<td>
<select name="status">
<option value="enabled">Enabled</option>
<option value="disabled">Disabled</option>
</select>
</td></tr>
<tr><td>Give you banner a default URL</td>
<td>
<input type="text" name="url" value="" id="url" /></td></tr>
<tr><td valign=top>Alternate Urls
</td>
<td>
<div id="p_scents">
</div>
<input type=submit>
</form>
</td>
</tr>
</table>