I'm making a website with products and a cart system. Basically, all the products' prices are displayed using an id of "price" in an tag, with the price being the text shown to the user. When adding an item to the cart, the code looks for the id="price" inside the tag and subsequently adds the price given in that line.
For example, a normal price line reads <h2 id="price">$8.99</h2> and the function picking it up uses var price = document.getElementById('price') to fetch the information. This works great.
HOWEVER
I am adding a new product with multiple options, and depending on the option the price updates. I have a working system in place to show the viewer the updated price based on their option, but this uses an tag because it is displayed through Javascript and needs to be updated.
The line that displays the price to the viewer looks like this:
<input type="text" id="price" value="24.99" /readonly="">
I'm pretty sure that because the price is displayed inside the tag, inside a value, the cart js doesn't know to look for it and therefore will not return a price.
Is there a way I can make a document.getElementById('price') fetch the value shown inside the <input>?
P.S. I have never really formally learned JS so I have no idea what I'm doing... I've mostly relied on Stack Overflow. Sorry if I seem like an idiot.
Related
I am a newbie and I've been wrecking my brain trying to figure out the solution by trying different ways to get the proper results but nothing that I tried so far has worked. I've also tried searching here on stackoverflow and on google. But none of the solutions that were commented so far, solved the issue.
Here's a link to my codes so far: http://pastebin.com/x05nGQ1Y
What I am trying to achieve is the following:
on the input field I can write for an example a product like banana(s) and an apple(s) etc. Then next to it, I have a drop down list which represents the quantity of the specific product that I want. Then at the end I have a onclick button that will show what I have ordered in the form of a ul list. I also have a button with the function of deleting the current list, if I have misspelled something or have set the wrong quantity for a product.
Now here comes the part that I am not able to solve: I am trying to get an input to show the total quantities of all products at the end.
Say I type in banana with the amount of 5 from the drop down list, then I add apples with the amount of 3 and 1 gallon of milk. This means 5 + 3 + 1 = 9 in total products, which I am trying to get to pop up as a result at the end.
In your onclick handler, you need to add code to total up the items in your list. You haven't provided any information here about how you are storing that data so I am going to assume you only have that data stored in a UL on the page. In this case, you just need to count the LI elements in your UL and output the result.
It would be easier to help you if you posted your code and a codepen so others could view and modify your code.
EDIT: I see you provided a link. Here is what I think. You are storing your data points as LI on the page, instead you should store it in an array of data objects and render the UL from your data array. Then, you can easily grab the appropriate data points for your calculation. It is good practice to avoid storing data in the DOM and instead to store it in a separate data structure in the javascript.
For your case, you can keep a counter variable to track of the number of items in the list, and then reset it when the list is cleared.
All you have to do is..
1) Create an input box to display the total
<input id="total" value="0" />
2) Update the box whenever someone adds an item - Put this is your leggTil function somewhere after antall is defined.
document.getElementById('total').value = parseInt(document.getElementById('total').value) + parseInt(antall);
This just adds the current item's quantity to the value already in the box.
Here's a working demo: https://jsfiddle.net/oh376pLw/
Also, not related to your question, but your really shouldn't put <header> tags in the <head> of the document. You also shouldn't put anything between the <head> and the <body> of the document.
I want to make something really similar as "search" on website http://www.jobs.cz/
What it should do:
Selectbox show on user focus on input
User can type in input and filter result from selectbox
If user pick one of result selectbox hide
If user focus input again selectbox open again and user can pick another option (pick as added to previous not rewrite previous one)
If he start typing to input it still filter no matter what is already picked
(example: He already pick "Administrativa" but if he type Auto it offer him "Auto - Moto", in another words, values picked before should not be use for filter )
Each picked value should be in some "tag" mode (each one is separated inline-block and have class)
Before I will continue i dont want you to make whole code for me it will prolly take too long, And I didnt come here for code but mostly for HOW TO design something like this. I start my self with multiple things just dont know if I think right and I need to help with some ideas how things like this can be made.
So what I did:
Opening / Closing selectbox div:
Input looks like:
<input id="position" placeholder="Position" ng-focus="focus=true" ng-blur="focus=false" ng-model="q">
And then something like
<div class="inputHelper" ng-show="focus">
Filter results:
Based on angular documentation filter in ng-repeat should be done really easy by:
<li ng-repeat="pos in listCtrl.positions | filter:q as results" ng-click="listCtrl.choosePosition(pos)">{{pos.name}}</li>
With ng-model="q" on <input> , however problem start if I push something to that model, like previous pick from user. I am not sure how to handle filter if user already pick something.
Handle multiple picks
For this I create array where I always check if user already pick that, if not push it to array.
choosePosition: function(position) {
if (listCtrl.chosenPosition.indexOf(position) === -1) {
listCtrl.chosenPosition.push(position);
}
}
Show array of objects in input
I search for this a lot in documentation and google a this kind of issue, and I found this what is basicly display array in input. I didnt find anything more usefull. So for this point I dont know how to display array of objects, and how to style each array element as inline block and give it some class.
Summary:
This is kind of long post, but I try to say everything I need to do to avoid some miss understanding, I spend days here I still stuck somewhere. And I am not even sure I design this well. If here is someone who can help me with part of codes which can work or at least try to explain me how to do something like this i will really appreciate it
If your project will allow its use, Angular Material's Autocomplete is pretty much a direct implementation of what you desire.
In the product page I want to create a special div that display itselft with Jquery, in that page the client will find different options that he could add like an accesory, the question is: How I can add a specific price adding up : base price + specific price + combination price.
I was trying to modify product.js but it didn't change anything, I'm not expert in prestashop core, Then as many information you could let me will be very gratefull.
Thank you.
On the product page there are various JS variable for price and combinations are already there.
So you can simply create a module with a hook (hookDisplayLeftColumnProduct, hookDisplayRightColumnProduct etc.) on product page to render your JS code on the product page and through that code you can achieve what you want (also using the price JS variables on product page).
public function hookDisplayLeftColumnProduct()
{
// Render Your tpl here
}
I am building a web-based tool for the role-playing game GURPS. Data is maintained in several XML files that are loaded into arrays. Based on changes the user makes, data is re-populated into various spans, inputs and dropdowns from the arrays. No problem so far.
To give the user more feedback, I have a added an anchor that does a hover pop-up that shows the details of the current weapon. For the initial coding, these values were hard-coded while I worked out the rendering issues. Still no problems yet.
Now I am trying to actually populate the hover pop-up with real data. I can not get it to load the real data into the span! I have debugged the function and am certain that I have extracted the data I want. I have used similar lines of code to populate other parts of the web page.
Specifics: I want to replace the "aa" in the span below:
<span id="weaponName1" name="weaponName1" class="weaponName">aa</span><img src="Images/Firearms/Makarov_Suppressed.jpg">
The code I am using to try to re-populate the span is:
function loadWeaponStats(person, weaponID) {
// Load stats of the current weapon into the "Details" anchor fly-out
for (xx1=0; xx1<WeaponsArray.length; xx1++) {
if (weaponID == WeaponsArray[xx1][0]) {
weaponName = WeaponsArray[xx1][1];
alert("weaponName: "+weaponName+"\nperson: "+person);
$("#weaponName"+person).val(weaponName);
xx1 = WeaponsArray.length; // Kill the loop
}
}
}
The alert() is simply to confirm that I have the correct data. The following line should re-populate the span, but it does not.
All HTML, CSS & JavaScript can be found at GURPS Combat Calculator
Pulling out what little hair I have left.
Thanks
You can also do as below:
$("#weaponName"+person).text(weaponName);
you can't use Val() method here.
I'm trying to create an auto complete field (using the script.aculo.us plugin) in a form for a category select, but I want the auto complete list to display a number next to each category (the number of other things in the same category). This is similar to the Tags field on stack overflow.
Right now I can display the number I want, but when I select any field the extra number gets dumped into the text field with the category. Currently I'm simply appending the number to each item on the array before I display it. How can I make it so when you select something from the list the number (enclosed in parentheses) does not get put into the text field. Thank you.
I finally solved my problem, I just needed to figure out what some of the plugin's options were. It turns out there is an option for the auto_complete_field helper called :select. The value you provide to this tells the JavaScript which part of the <li> element (the HTML tags the results are displayed in) to return to the text box.
The solution was a simple matter of enclosing the name of the category in a span with a special class and leaving the number part I didn't want outside of this class. This was easy since I was already using my own partial to display the results.