Develop Reference

Computations using Javascript in Processmaker

I'm new to ProcessMaker and we were tasked to practice on computational processing using Javascript in ProcessMaker.
So I looked up the documentation, and I tried creating a dynaform that computes the total when you input a price and quantity.
I pasted the code I had in the "javascript" section, but when I try to preview it it just loads forever.
This is the code that I used:
function calculateTotal() {
getField("sTotal").value = parseFloat(getValueById("basePrice")) -
parseFloat(getValueById("Qty"));
}
leimnud.event.add(getField("basePrice"), 'click', calculateTotal);
leimnud.event.add(getField("Qty"), 'click', calculateTotal);
Answers would be really appreciated thanks.

Indeed as Ethan Presberg mentioned, the Leimnud framework is only supported up to ProcessMaker 2.x.
For ProcessMaker 3.x you can use JQuery to trigger the onclick event by adding a button control like this:
$("#button1").find("button").on("click", calculateTotal();
You can find more information about using JQuery with ProcessMaker 3.x's Dynaforms in our Wiki here: http://wiki.processmaker.com/3.2/JavaScript_Functions_and_Methods
Best regards,
Arturo A. Robles

Use below code
In dyna form add two text boxes and button
##quantity
##price
##getTotalPrice
Now paste below code in JavaScript section:
$('#getTotalPrice').find('button').on("click", getTotal());
function getTotal()
{
var quantity = $('#quantity').getValue();
var price = $('#price').getValue();
var total = quantity * price;
}
alert (total);
If you want to assign this value to variable then create another variable totalPrice
$('#totalPrice').setValue(total);
Hope you understand.

Update some fields on change and on load

We have the following script which runs on a change to a drop-down - updates the price based on the currency code chosen. This basically gets the value of the drop-down and updates the priceamm and preicecurr fields within the text on the page.
<script>
function run() {
var f = document.getElementById("dropPrice");
priceamm.innerHTML = f.options[f.selectedIndex].value;
var e = document.getElementById("dropPrice");
pricecurr.innerHTML = e.options[e.selectedIndex].text;
}
HTML
<select id="dropPrice" onchange="run()" class="fa-select">
<option value = "a">aaa</option>
<option value = "b">bbb</option>
Question
Now, we would also like to load the drop-down to one of the options (selected) when loading the page (onload). We are able to populate the variables in the text but not the drop-down to show option bbb. In php this is quite easy but we are a bit lost with javascript. We tried something on these lines onload but does not work:
document.getElementById("dropPrice").value = "<?php echo $geo_price ;?>";
With jQuery this is probably easier but once again no luck:
window.onload = function() {
jQuery(document).ready(function($){
document.getElementById('dropPrice').find('option[value=<?php echo $geo_price ;?>]').attr('selected','selected');
});
}
Any help is appreciated. Thanks

The jQuery selector part is incorrect. You are mixing plain JS with jQuery. When you call document.getElementById('dropPrice') a regular DOM element is returned, but then you call find which is a jQuery method to be used on a jQuery element. So, you either need to wrap the first part to return a jQuery element like so:
$(document.getElementById('dropPrice'))
.find('option[value="b"]').attr('selected', true);
Or, select it via jQuery in the first place like:
$('#dropPrice [value="b"]');
However, your first example:
document.getElementById("dropPrice").value = "b";
should work. That makes me wonder if the value that is being echoed by PHP is correct and/or if there are other JS errors being thrown that would cause that code not to run.

javascript set variable from .text method

I'm new in javascript development and I want to ask how to set variable from text method.
Example: in this code have a text method
$('.phone').text(theRestaurant.phone);
$('.location').text(theRestaurant.location);
$('.info').text(theRestaurant.info);
in the Html file, when I create any class from these will print the value from JSON file.
Example :
<div class='phone'></div>
Output: (000)000-9999
source code:
<div class='phone'>(000)000-9999</div>
I try to set this in variable but it doesn't work.
My try:
var phone = theRestaurant.phone
I want to set it in variable because I need to put it inside href value like so:
<script>
var phone = 'tel:' + phone
document.getElementById("phone").href = phone;
</script>
I hope everything clear. and If have an other solution please tell about it.
Thanks

Have you wrapped your jQuery code in a document.ready() wrapper?
If not, then the javascript might run before the page has had time to create the elements in the DOM, and nothing will work.
<script>
$(document).ready(function(){
//all javascript/jQuery code goes in here
});
</script>
Also, see my comment above about mixing up "ByClassName" and "ByID"

Answer came from #itsgoingdown
this code in main javascript file:
var phone=document.getElementById('phone').innerHTML; document.getElementsByClassName("phone")[0].href = phone;

JavaScript code won't work On My Blogger Site

I have made JavaScript code using the fiddle.com website. But in fiddle I can only make it work by using the
no wrap (body)
option. I'm not sure what this option does. The link for the Fiddle is here. I added this script to my Blogger blog, but it would not work.
Code
function getTotal(){
var form = document.theForm;
var inputs = form.getElementsByTagName('input');
var length = inputs.length;
var total = '0';
for (i = 0; i<length-1; i++){
if(inputs[i].type == 'radio'){
var checked = inputs[i].checked?1:0;
if(checked){
var value = inputs[i].value.split("~~")[0];
total -= -value;
}
}
}
document.getElementById('totalspan').innerHTML="Toplam Fiyat: "+ total + " tl"
total='0';
}
The script is to calculate a total price of the selections. You can see it in the fiddle. Also, I have it on Blogger, but as I said it's not working.
The link to my blog is here.

no wrap (body) means that your script will be inserted in new script tag inside body tag, no wrap (head) means that your script will be inserted in new script tag inside head. You can read about it on jsFiddle help
Other options will wrap your JS code inside particular DOM event handlers (onLoad and onDomReady)
Script errors on your site tells me that calculateTotal is not defined, so please check your naming.
Why do you use string when calculating total? You can safely use native JS parseInt funciton.
Another point that using form click event is wrong, you should use change event of your inputs.
Simplest option for you is to use jQuery like this:
$('[name="CPU"], [name="OperatingSystem"], [name="Case"]').on('change', updateTotal);
function updateTotal {
var total = 0;
// calculate your total here
$('#totalspan').text(total);
}
Please check my 5-min fiddle: http://jsfiddle.net/GDXuS/5/
You could also use data- attributes to store price or any other data (see on jQuery site).
And I'm advice you to study some programming languages.

How to change a label's contents using Javascript?

I have a label that holds a value and a text box into which I will enter a number. I have another label, which should dynamically give the difference between the two as I type the number in the text box. How do I do this using Javascript? I tried:
<script type="text/javascript">
function compute_diff(){
var lbl1 = document.getElementById("<%=label1.ClientID%>").value;
var txtbox = document.getElementById("<%=textbox1.ClientID%>").value;
var lbl2value = lbl1 - txtbox
document.getElementById("<%=label2.ClientID%>").innerText = lbl2value;
return true;
}
</script>
I am calling this function on the OnKeyUp event, but it is not firing it. What is the correct way of going about this? I am developing the site using ASP.Net.

The line
var lbl2value = lbl1 - txtbox
will not work. You will need to use a string diff algorithm such as the one at
http://ejohn.org/projects/javascript-diff-algorithm/
In addition, consider using jQuery to ensure that this works cross browser as the implementation of innerText can differ from browser to browser.