Develop Reference

Computed Properties to update variable in Vanilla JavaScript

Hey everyone, i need help with something.
I've divided the picture into sections so it's easier to look at.
This is really bugging me and i don't know if i can solve it this way.
Thanks to anyone that can help me... Here i go:
So in section 1 i've created a basic input with a name property, actually i've made 4 of them but this one is the example (the name property is important)
In section 2 , those are the inputs on the page and i need to change the variable depending if the inputs is checked or not
The variable in JS file is called requireInteraction and it's set to false
So im doing a forEach on those 4 inputs (each one has a name property that matches the variable name in JS) and i want to change the variable in JS if the checkbox with that name is Checked. I tried using Computed Properties.
So when silent is checked (with the silent name property) i want the variable "silent" in JS to switch to true.
How can i extract the input name (which has the same name of the JS variable) and make it so it's like i actually typed "silent = true" and changed the JS variable.

I don't really know why you can't use
requireInteraction = true;
but here, in case that you have some reason you can't just use the variable directly, you could use an object to serve as a target to index into:
const context = {
requireInteraction: false,
};
Then later on, you can use something similar to your original code:
context[el.name] = true;

How to copy the value of a yform to an other field

In our (hybris) shop some products have a yform to summarize the parts of the product. Is there an easy way to copy the value of the sum field into an other field (automaticly) like the productquantity (no yForm)?
I guess I need javascript, but the id of the sumfield is generatad, so I don't know how to get the sum. Also my Javascript abilities are quite limited...
UPDATE:
To get the value I use this part of code:
copyYFormValueToProductQuantity : function() {
var copyText = document.querySelector('input[id*="sum"]').value
if (copyText > 0 && copyText != null)
{
//do stuff
}
console.log("Copied value: " + copyText)
},
But this line
document.querySelector('input[id*="sum"]').value
returns null. If I use it in the browserconsole, it also returns null. But after I inspected the element it works and returns the value I want to. So I guess I am missing some JS-basics here and the object isn't ready before?
Btw.: I call this function with a keydown-eventlistener.

This can most likely be done from the jsp files. There you have all the data that is needed, so you most likely need to only copy that field where you need it.
We can also help you more if you add some code examples here (what exactly is that yform?). If you struggle to find where in code is that specific yform created/added, it's always worth giving a try to search for the applied classes of the html (search the entire project and see what you find).

As I understand your question, you are saying that you want to copy the value of a yForm field named sum into a non-yForm field named productquantity, and you are asking specifically about how to access the value of a yForm field from JavaScript. If I understand this correctly, you can do so by calling the following JavaScript API:
ORBEON.xforms.Document.getValue("sum");
You can find more about this and other related API on Client-side JavaScript API.

Different results for %%GLOBAL_ProductID%% and 'actual' product ID - Bigcommerce - why?

I am working on a project where I need to reference an unchanging attribute of a product (an item on the site). In the past I have referenced them using the value of an attribute called "data-product". This value is the ID of the product that has been assigned to it by Bigcommerce, so it will never change. Yesterday I discovered the global product_id variable (%%GLOBAL_ProductID%%) so I did a few tests.
When I take the value of the product ID variable and print it to the console:
<span id="the-id-of-the-product">%%GLOBAL_ProductId%%</span>
<script>
var theProductIdNumber = $.trim($('span#the-id-of-the-product').text());
console.log(theProductIdNumber);
</script>
I get a different number then when I inspect the same product and look at the value of the 'data-product' attribute:
Even more confusing, I found one case where the value for %%GLOBAL_ProductID%% what the same number (string) for two different products.
Can you tell me why this is happening? I assumed that using the BC defined global variable would be a more solid method of referencing the product, since thats kind of what it seems like it's for.
As always, your time and help is much appreciated, and I hope you all have a nice day.

I realize this is an old post but I had the same problem today and believe I understand what is going on.
My JavaScript was referencing GLOBAL_ProductId at the bottom of the product.html template. The value was never correct and was also unchanging. Looking deeper, I noticed that it always seemed to be the ID for the last product shown in the Related Products region.
I took the JavaScript variable initialization out of product.html and moved it to ProductDetails.html and the problem was solved. It looks like when the Related Products region is generated, someone decided to recycle the Global_ProductID variable. Or...something like that, yuk.
Your theme may not even include a ProductDetails.html, but if you tinker around with where you initialize variables that reference GLOBAL_ProductID, that might square you away.

Cannot insert HTML value into another

I'm trying to have the value of an HTML element equal the value of another. Sounds simple enough but when I try various options, it doesn't work
Here's what I'm trying to do:
I tried a few things. First, I made a javascript function that when they info button is pressed, it simply sets the value of the newname textbox to the title and then I was going to use javascript to trim off the extension. As you can see on the page, it simply outputs {{modal_header}}. I believe this is because when the function is being called, the value hasn't been set yet and that's why it's outputting this. I couldn't find out where else to call the function in order for it to work.
To get around that issue, I tried using PHP to retrieve the name. The only thing I could find related to the name was which in stuck in the value property of newname, but this output only the last file in the directory, no matter what file you selected.
I tried a bunch of different little things, but without any luck. You guys have any ideas?
Website: http://box.endurehosting.com/
HTML: http://pastebin.com/dZ5rKGUY

try this code
$(function(){
var title = $("#title").html();
title = title.substr(0, title.indexOf('.'));
$("#newname").val(title);
})

Javascript/HTML assigning a value

I am having a problem with some Javascript/HTML/CSS code. I am fairly new to creating websites, so please bear with me.
what I am ultimately trying to do is pull a dynamic value from javascript and use that to sort some divs (in a container). What I am thinking is I will assign the value to the Id and then pull those into an array to be sorted by tinysort. If there's a faster way to do this, let me know.
However, my first problem is putting the data into the id so it can be sorted. Would I do something like
document.getElementById(namesort).value = iterator;
or would I use something like myData?
Note: I don't want to display the value, I just want to use it to sort.
Please ask for clarification if needed! Thanks in advance. :)
Here is the applicable code to this problem. http://jsfiddle.net/dw77hLyp/1/
It just basically shows a very basic outline of some of my code.

Without JQuery. You can create your attribute :
document.getElementById(namesort).createAttribute('myData');
document.getElementById(namesort).setAttribute("myData","hello Im in");

Pure JS Solution:
for( i = 0 ; i < iterator.length ; i++ ) {
document.getElementsByName('namesort')[i].setAttribute('data-sort',iterator[i]);
}
That way you add each of those elements an attribute called data-sort where the iterator as a value, then could create an array insert all the namesort elements to it, use the sorting algorithm and you're done.

document.getElementById("divID").innerHTML="someContent";