I would like to add some JavaScript to do the following.
I would have 3 fields like this.
<input type="text" name="a" />
<input type="text" name="b" />
<input type="hidden" name="c" />
say if I entered 100 in the first field and 19 in the second field.
it would divide 100 by 19 and round it up to no decimal places, and then replace the value of the third hidden field by the answer, so in the case it would be (100/19) 5.26... rounded up to 6
however I am not sure how to actually implement this.
Say your form looks like this;
<form id="myForm" method="POST">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="hidden" name="c" />
</form>
You can access the form like this;
function doAction(action)
{
var frm = document.forms.myForm;
frm.c.value = frm.a.value/frm.b.value;
}
You can trigger the action by adding a button that can be clicked, or setting the form's submit action.
Edit: Doesn't round up, not sure how to do that :(
A nice easy method is to pass the form to a function, and allow that function to do the calculation.
The form should look like:
<form>
<input type="text" name="a" />
<input type="text" name="b" />
<input type="hidden" name="c" />
<input type="button" value="Click" onClick="doCalculate(this.form)" />
</form>
and the javascript:
function doCalculate(theForm){
var aVal = parseFloat(theForm.a.value);
var bVal = parseFloat(theForm.b.value);
var cVal = 0;
if(!isNaN(aVal) && !isNaN(bVal)){
cVal = Math.ceil(aVal/bVal);
}
theForm.c.value = cVal;
}
Working example here --> http://jsfiddle.net/azajs/
Edit: This can also be done when the form is submitting by having a similar call in the onsubmit of the form:
<form onsubmit="doCalculate(this);" >
...
</form>
A dumbed-down way, which assumes your form is document.forms[0]:
<input type="text" name="a" onchange="myFunction" />
<input type="text" name="b" onchange="myFunction" />
<input type="hidden" name="c" />
function myFunction() {
var inpA = document.forms[0].a;
var inpB = document.forms[0].b;
var aVal = parseFloat(inpA.value);
var bVal = parseFloat(inpB.value);
if (!isNaN(aVal) && !isNaN(bVal) && bVal !== 0) {
document.forms[0].c.value = Math.ceil(aVal/ bVal);
}
}
EDIT: Math.round => Math.ceil
After the form elements:
<script type="text/javascript">
(function() {
var a= document.getElementsByName('a')[0];
var b= document.getElementsByName('b')[0];
var c= document.getElementsByName('c')[0];
a.onchange=b.onchange=a.onkeyup=b.onkeyup= function() {
c.value= Math.ceil(a.value/b.value);
};
})();
</script>
This recalculates on each key press, remove the keyup binding if you don't want that.
Add a unique id to each input and use document.getElementById to avoid any ambiguity with name. If this form is never going to be submitted you can omit name entirely.
Math.ceil() will return NaN if either value cannot be read as a number, or Infinity if you divide by zero. You may wish to check for these conditions and write a different value.
You do this by binding an eventlistner to the from element. You either create your own (Javascript native event handlers) or use your favorit javascript framework. My example is for using the jQuery jQuery bind method javascript framework.
/* first set and id to your input hidden and form element so you can reach it in fast way */
<form id="myForm"><input type="hidden" id="total" name="c" /></form>
/* Javascript code using jquery */
$('#form').bind('submit', function () {
$('#total').val(function () {
var num = parseFloat($('#form input[name=a]').val()) / parseFloat($('#form input[name=b]').val());
return Math.floor(num) === num ? num : Math.floor(num) + 1;
});
});
Related
I have a form with few predefined textboxes, now in addition to that I have create some dynamic textboxes which I can do it in javascript(I guess). How do I set the value of dynamically generated textboxes to a bean when the form is submitted. In the bean I have string array defined to hold the content of dynamically generated textbox values. I am not using any framework, guide me how to do this ?
You can just give all input fields the same name and use request.getParameterValues() to get all values in order as they appeared in the HTML DOM tree.
E.g. (JavaScript-generated)
<input type="text" name="foo" />
<input type="text" name="foo" />
<input type="text" name="foo" />
...
with
String[] values = request.getParameterValues("foo");
// ...
You can also suffix the name with an incremental digit such as foo1, foo2, foo3, etc and collect the values in a loop with until a null is received.
E.g.
<input type="text" name="foo1" />
<input type="text" name="foo2" />
<input type="text" name="foo3" />
...
with
List<String> foos = new ArrayList<String>();
for (int i = 1; i < Integer.MAX_VALUE; i++) {
String foo = request.getParameter("foo" + i);
if (foo == null) break;
foos.add(foo);
}
// ...
Those are the fields that I have that I want to write a conditional statement for in a PDF form that I am creating in Adobe Acrobat Pro X. In the form if I tick the checkbox I would like FP1 to get the value from QxHxW1. If the checkbox is not ticked I want FP1 to register as "0". I have been trying to do this with different tutorials that I have found online and each time I get some sort of SyntaxError.
is there anything I can do to fix this? Am I way off with the way that this is written?
FrenchPane1 is a checkbox
FP1 is a text box
QxHxW1 is a text box
Using javascript, this would be:
var check = document.getElementsByClassName('check');
for( var i = 0; i < check.length; i++ ){
check[i].onchange = function() {
var isChecked = this.checked;
var target = document.querySelector(this.dataset.target);
var source = document.querySelector(this.dataset.source);
target.value = isChecked ? source.value : '0';
}
}
<div>
<label for="FrenchPane1"><input type="checkbox" id="FrenchPane1" data-target="#FP1" data-source="#QxHxW1" class="check"> FrenchPane1</label>
<input type="text" name="FP1" id="FP1">
<input type="text" name="QxHxW1" id="QxHxW1" value="Some values">
</div>
<div>
<label for="FrenchPane1"><input type="checkbox" id="FrenchPane2" data-target="#FP2" data-source="#QxHxW2" class="check"> FrenchPane1</label>
<input type="text" name="FP2" id="FP2">
<input type="text" name="QxHxW2" id="QxHxW2" value="Some values 2">
</div>
I have written the following code in JSFiddle to able so get the sum of combined values of the checkboxes.
Script
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add
}
}
Code
<input value="33" type="checkbox" class="sum" data-toggle="checkbox">
<input value="50" type="checkbox" class="sum" data-toggle="checkbox">
<input value="62" type="checkbox" class="sum" data-toggle="checkbox">
<span id="payment-total">0</span>
There it works perfect, when I implement this in my system there is no reslut or any error.
The checkboxes in my system are genarated by an MySQL output.
Any suggestions what migh be wrong?
Your code is probably running before the elements are dynamically generated, so the event handlers are not being attached. Try delegating the event handlers using .on() method:
$total = $('#payment-total');
$(document).on("click", ".sum", function() {
var add = this.value * (this.checked ? 1 : -1);
$total.text(function(i, value) {
return parseFloat(value) + add;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="33" type="checkbox" class="sum" data-toggle="checkbox">
<input value="50" type="checkbox" class="sum" data-toggle="checkbox">
<input value="62" type="checkbox" class="sum" data-toggle="checkbox">
<span id="payment-total">0</span>
I prefer to use pure javascript for your solution because you didn't use Jquery on your code. I think problem reason comes from Javascript eventListener. When you create a new element to your document, you should add its events.
In first code i create a checkbox but this is not work as others. link_1
<http://jsfiddle.net/3oweu107/1/>
However in second code i add event as other checkbox so payment-total value calculation done by new event. link_2
<http://jsfiddle.net/3oweu107/2/>
i hope this will help your problem :)
I need to pass my array of dynamically created objects from jsp to java action class , Meanwhile i am tring following code to set array objects as a request parameter for action form . But while fetching in action class it produce null result ,as array object are not passed on to action form. Kindly provide me a right way to pass array list to action class. Thanks in advance ////
<script>
var i;
var arraya = new Array();
var arrayb = new Array();
var arrayc = new Array();
var idCount = 1;
function arr()
{
for (var j=0;j<idCount;j++)
{
arraya[j]= document.getElementsByName("a"+j)[0].value;
arrayb[j]= document.getElementsByName("b"+j)[0].value;
arrayc[j]= document.getElementsByName("c"+j)[0].value;
}
var one=arraya.valueOf();
var two=arrayb.valueOf();
var three=arrayc.valueOf();
}
</script>
<input type="text" name="a0">
<input type="text" name="b0">
<input type="text" name="c0">
<input type="button" onclick="addDiv();" value="Add"/>
<input type="hidden" name="one" value="<%= request.getParameter("one") %>" />
<input type="hidden" name="two" value="<%= request.getParameter("two") %>" />
<input type="hidden" name="three" value="<%= request.getParameter("three") %>" />
You can achieve it by doing this -
Simply have input type like this. Notice no index used.
<input type="text" name="a"/>
<input type="text" name="b"/>
<input type="text" name="c"/>
In your action class you can then do this. The values will be in the order.
String[] a = request.getParameterValues("a");
String[] b = request.getParameterValues("b");
String[] c = request.getParameterValues("c");
Although since you are using Struts you should actually create an object having properties a, b and c. Use the object in array fashion.
I want to place the following form:
<input type="hidden" name="MPK[]" value="x" class="MPK"/>
<input type="hidden" name="MPK[]" value="y" class="MPK"/>
<input type="hidden" name="MPK[]" value="z" class="MPK"/>
...
and POST it to servlet or JSP page.
How to get values of these inputs in one array in servlet?
request.getParameterValues("MPK");
doesn't work even if i remove [] from names.
You have to get the values from array by parsing it.
String[] mpk;
mpk= request.getParameterValues("mpk");
for(int i = 0; i < mpk.length; i++)
{
System.out.println(mpk[i]);
}
Remove "[]" from you parameter name.
e.g.
<input type="hidden" name="MPK" value="x" class="MPK"/>