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.
Related
Similar to this question I want to change some text inside a dynamic div. The explanation there didn't work for me so I started a new thread (rep too low to comment). What makes this div "dynamic" is a some script that calculate how much money you need to spend (based on added to cart items) to get free shipping. The statement I want to replace is always there. I guess you could call it erasing the part of the text. :)
My div:
<div class="free-shipping__content">Brakuje Ci 151,00 zł do darmowej dostawy (Paczkomaty InPost).</div>
My code in GTM (loaded on DOM ready):
<script type="text/javascript">
(function(){
var elements = document.querySelectorALL(".free_shipping__content");
for (i = 0; i < elements.length; ++i) {
var str = elements[i].innerHTML;
elements[i].innerHTML = str.replace(" (Paczkomaty InPost)", "");
}
})();
</script>
Thanks!
Image of surrounding divs
Good job on that closure.
document.querySelectorALL is not a function. You meant document.querySelectorAll.
Another problem is your css selector. You're using .free_shipping__content while the actual class name is different. Your selector should be .free-shipping__content
After these fixes, your code works. However, I already rewrote it to test properly, so I might as well offer a more readable and elegant solution:
document.querySelectorAll(".free-shipping__content").forEach(function (el) {
el.innerHTML = el.innerHTML.replace(" (Paczkomaty InPost)", "");
});
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.
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.
We have used jQuery Datatables plugin to save update records in multiple rows.
Also validation is built for all the columns, once validation is failed.
We have the following line of code to focus on element for which validation is failed.
$(this).focus();
However this will not work if validation fails on some other page( $(this) is not on current).
As a workaround to this we thought we will click on the page number hyperlink
$(#identifier).trigger('click');
The problem is
"How to know if an element with id A ( $(#A)) is in which page of jQuery Table ?"
Once we know that problem will be solved.
Here, I've written a js function to move you to the page with a given row (row with class "selectedItem" in this case). It should be possible to rewrite the code to find any elements, not just rows, in case you need to.
function moveToPageWithSelectedItem() {
var numberOfRows = itemsTable.data().length;
var rowsOnOnePage = itemsTable.page.len();
if (rowsOnOnePage < numberOfRows) {
var selectedNode = itemsTable.row(".selectedItem").node();
var nodePosition = itemsTable.rows({order: 'current'}).nodes().indexOf(selectedNode);
var pageNumber = Math.floor(nodePosition / rowsOnOnePage);
itemsTable.page(pageNumber).draw(false); //move to page with the element
}
}
I want to be able to click on a specific element, and have it send a value to a textarea. However, I want it to append to a specific row/line of the textarea.
What I am trying to build is very similar to what happens when you click the notes of the fret board on this site: http://www.guitartabcreator.com/version2/ In fact, i want it almost exactly the same as this.
But right now I am really just trying to see how I can target the specific row, as it seems doable based on this website.
Currently I am using javascript to send a value based on clicking a specific element.
Here is the js:
<script type="text/javascript">
function addNote0(text,element_id) {
document.getElementById(element_id).value += text;
}
</script>
This is the HTML that represents the clickable element:
<td> x </td>
This is the textarea:
<textarea rows="6" cols="24" id="tabText" name="text">-
-
-
-
-
-</textarea>
This works fine for sending the value. But it obviously just goes to the next available space. I am a total newb when it comes to javascript, so I am just not sure where to begin with trying to target a specific line.
What I have currently can be viewed here: http://aldentec.com/tab/
Working code:
After some help, here is the final code that made this work:
<script>
function addNote0(text,element_id) {
document.getElementById(element_id).value += text;
var tabTextRows = ['','','','','',''];
$('td').click(function(){
var fret = $(this).index() - 1;
var line = $(this).parent().index() -1;
updateNote(fret, line);
});
function updateNote(fret, line){
var i;
for(i=0;i<tabTextRows.length;i++){
if(i == line) tabTextRows[i]+='-'+fret+'-';
else tabTextRows[i]+='---';
$('#tabText').val(tabTextRows.join('\n'));
}
}}
window.onload = function() {
addNote0('', 'tabText');
};
</script>
Tried to solve this only in JS.
What I did here is use an array to model each row of the textfield (note the array length is 6).
Then I used a jQuery selector to trigger any time a <td> element is clicked which calculates the fret and string that was clicked relative to the HTML tree then calls the updateNote function. (If you change the table, the solution will probably break).
In the update note function, I iterate through the tabTextRows array, adding the appropriate note. Finally, I set the value of the <textarea> to the array joined by '\n' (newline char).
Works for me on the site you linked.
This solution is dependant on jQuery however, so make sure that's included.
Also you should consider using a monospaced font so the spacing doesn't get messed up.
var tabTextRows = ['','','','','',''];
$('td').click(function(){
var fret = $(this).index() - 1;
var line = $(this).parent().index() -1;
updateNote(fret, line);
});
function updateNote(fret, line){
var i;
for(i=0;i<tabTextRows.length;i++){
if(i == line) tabTextRows[i]+='-'+fret+'-';
else tabTextRows[i]+='---';
$('#tabText').val(tabTextRows.join('\n'));
}
}
I wrote the guitartabcreator website. Jacob Mattison is correct - I am using the text area for display purposes. Managing the data occurs in the backend. After seeing your site, it looks like you've got the basics of my idea down.