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>
Related
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 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">
Newbie in jquery, need some help with this description.
Suppose, I have 1 textbox that contain the result of Addition of another 2 textbox's.
<input type="text class="tb1">
<input type="text class="tb2">
<input type="text class="result" id="result1">
like this.
Suppose I have 5 textbox's that contain their individual 2 textbox's addition results.
Each Result textbox generate result automatically using jquery script.
So, I have 5 result textbox's with their respective addition result.
Now, I want to sum of the values in all 5 result texbox's again in another textbox when i click on checkbox automatically by using jquery or javascript script.
How can I achive this task ?
refer image for understanding of question.
http://i.stack.imgur.com/iFF46.jpg
Assuming that the number 5 of the text boxes remains the same here is a solution for your problem. ( Without validations )
$("#add").click(function() {
$("#result1").val(parseInt($("#box1").val()) + parseInt($("#box2").val()));
$("#result2").val(parseInt($("#box3").val()) + parseInt($("#box4").val()));
$("#result3").val(parseInt($("#box5").val()) + parseInt($("#box6").val()));
$("#result4").val(parseInt($("#box7").val()) + parseInt($("#box8").val()));
$("#result5").val(parseInt($("#box9").val()) + parseInt($("#box10").val()));
});
$( "#final-check" ).change(function() {
var finalResult = 0;
for (var i = 1; i <= 5; i++) {
finalResult = finalResult + parseInt($("#result" + i).val());
}
$("#final-result").val(finalResult);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" id="box1">
</td>
<td>+</td>
<td>
<input type="text" id="box2">
</td>
<td>=</td>
<td>
<input type="text" id="result1">
</td>
</tr>
<tr>
<td>
<input type="text" id="box3">
</td>
<td>+</td>
<td>
<input type="text" id="box4">
</td>
<td>=</td>
<td>
<input type="text" id="result2">
</td>
</tr>
<tr>
<td>
<input type="text" id="box5">
</td>
<td>+</td>
<td>
<input type="text" id="box6">
</td>
<td>=</td>
<td>
<input type="text" id="result3">
</td>
</tr>
<tr>
<td>
<input type="text" id="box7">
</td>
<td>+</td>
<td>
<input type="text" id="box8">
</td>
<td>=</td>
<td>
<input type="text" id="result4">
</td>
</tr>
<tr>
<td>
<input type="text" id="box9">
</td>
<td>+</td>
<td>
<input type="text" id="box10">
</td>
<td>=</td>
<td>
<input type="text" id="result5">
</td>
</tr>
</table>
<button id="add">add</button>
<input type="text" id="final-result">
<input type="checkbox" id="final-check">
You can add any number of text boxes and get your results.
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" id="mainTotBox" value="0">
</div>
$(".textBox").on("change", function(){
var total = 0;
var thisInput = this;
$(this).closest("div").find("input[class='textBox']").each(function(index, inputEle){
total += window.parseInt($(inputEle).val());
$(thisInput).closest("div").find(".resultBox").val(total);
});
var mainTot = 0;
$(".resultBox").each(function(index, inputEle){
mainTot += window.parseInt($(inputEle).val());
});
$("#mainTotBox").val(mainTot);
});
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="result" id="result">
<script>
var result=0;
// Loop thru each input field that has class tb, take its numeric value
// and add it to result
function AddEmUp()
{
$("input.tb").each(
function()
{
result=result+Number( $(this).val() );
});
// Display the result in input box with id=result
$("#result").val( result);
}
// Execute AddEmUp when any one of the input fields with class tb is clicked
$("input.tb").click( AddEmUp );
</result>
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>
I have some HTML shown below, which is generated dynamically in an ASP Classic form.
There can be any amount of groups/tables (Size/Color) with any amount of rows/options.
Each group/table has an img tag, and each row/option has a hidden field with its corresponding image URL.
On the hover of each row, I need to change the src attribute of the image of that group to that row's image URL, using JS or jQuery (something that works in ASP classic).
The HTML can be changed if needed for it to work.
Thank you.
<table>
<tr>
<td style="font-weight: 700" colspan="2">
Color<input id="colorSortOrder" type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input id="radioRed" type="radio" name="Color" value="R-" />
<label for="radioRed">
Red</label>
<input type="hidden" value="Image1.jpg" />
</td>
<td rowspan="3">
<img />
</td>
</tr>
<tr>
<td>
<input id="radioOrange" type="radio" name="Color" value="O-" />
<label for="radioOrange">
Orange</label>
<input type="hidden" value="Image2.jpg" />
</td>
</tr>
<tr>
<td>
<input id="radioBlue" type="radio" name="Color" value="B-" />
<label for="radioBlue">
Blue</label>
<input type="hidden" value="Image3.jpg" />
</td>
</tr>
</table>
<table>
<tr>
<td style="font-weight: 700" colspan="2">
Size<input id="sizeSortOrder" type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input id="radioLarge" type="radio" name="Color" value="LA-" />
<label for="radioLarge">
Large</label>
<input type="hidden" value="Image4.jpg" />
</td>
<td rowspan="3">
<img />
</td>
</tr>
<tr>
<td>
<input id="radioMedium" type="radio" name="Color" value="ME-" />
<label for="radioMedium">
Medium</label>
<input type="hidden" value="Image5.jpg" />
</td>
</tr>
<tr>
<td>
<input id="radioSmall" type="radio" name="Color" value="SM-" />
<label for="radioSmall">
Small</label>
<input type="hidden" value="Image6.jpg" />
</td>
</tr>
</table>
...which looks something like:
I would change the HTML just a little bit to reduce the JavaScript parsing needed by adding data attributes for the image src like this
http://jsfiddle.net/muDJ9/
and with the use of JavaScript replace you can edit out extensions for the alt tags
EDIT: This also runs the fastest I just ran tests on the others submitted using the console.time() profiler
FINAL: http://jsfiddle.net/FV9cw/
You can do it as under
Live Demo
$('label[for]').closest('tr').mouseenter(function(){
$(this).siblings().find('img').hide();
$(this).find('img').attr('src', $(this).find('input[type=hidden]').attr('value')).show();
});
$("input[type='radio']").hover(function(){
var src = $(this).parent().find("input[type='hidden']").val();
$(this).parent().parent().parent().find("img").attr("src",src);
});
Line 1 detects hover.
Line 2 go up to td and looks for the hidden input inside td and takes the value
Line 3 go up three times td > tr > table and looks for img and sets his attribute src with the image.