I've come here looking for help with learning to code a few site but have spent half an hour having to log in EVERYTIME I click any link! Is this normal?

 

Whinge over....

 

Hi,

 

I'm a newbie to forums and only have a basic understanding of web design but hope to learn as much as possible as quickly as possible by building practical everyday web sites.

 

Is it too early to ask for help? I'll ask anyway and hope I won't get told off ?

 

I'm attempting to build a page which involves user input of numbers to be calculated up on the fly without the user needing to press submit. For example a user could pick 4 items out of 8 (say 1,3,4 & 7 = 15) with the total being added up as they go along (1 + 3 = 4 then 1 + 3 + 4 = 8 then 1 + 3 + 4 + 7 = 15) with the option to then remove or add (say remove 4 and add another 3 (1 + 3 + 3 + 7 = 14)) and so on... I'm presuming I'd need to use JavaScript but am completely new to it having only coded in html and cccs in the past.

Any ideas where I could get help to learn this? I've used w3schools a lot but would love some more direct advice.

 

Cheerski in advance ?

Hi bud, and welcome to WDF.

 

 

I'm a newbie to forums and only have a basic understanding of web design

 

Not a problem. With WDF it makes life easier if you include some example code or screen shot to help explain what you're trying to do. I'm not great with classic javascript, I use jquery but I will try and hazard a guess here.

 

 

I'm attempting to build a page which involves user input of numbers to be calculated up on the fly without the user needing to press submit.

 

For this look into the .change() function. Essentially you can create functions that happen when an input, textarea etc changes its content.

 

 

For example a user could pick 4 items out of 8 (say 1,3,4 & 7 = 15) with the total being added up as they go along

 

What are these 'items', are they check boxes with a number beside them?

<ul>
<li><input name="" type="checkbox" value="1"> 1</li>
<li><input name="" type="checkbox" value="2"> 2</li>
<li><input name="" type="checkbox" value="3"> 3</li>
<li><input name="answer" type="text"></li>
</ul>

Or more free fields for numbers...

<div>
<input name="" type="text"> + <input name="" type="text"> = <input name="answer" type="text">
</div>

Or are the 'items' hypethetical and you want to add up the value of quantity?

<ul>
<li><label>Chicken</label> x <input name="chicken" type="text"></li>
<li><label>Ham</label> x <input name="ham" type="text"></li>
<li><label>Beef</label> x <input name="beef" type="text"></li>
<li><label>Total Sandwiches</label> = <input name="answer" type="text"></li>
</ul>

The more we know the easier it is to help

 

Thanks

Edited February 14, 201511 yr by BrowserBugs

Hi Warlord,

 

Thanks for the reply, most informative. That .change() function thing sounds like what I need, I shall have a look into it tonight and post the code I come up with.

Those last to forms are the sort of thing I'm looking at. Basically im doing weight watchers and all the foods are assigned point value so im looking to make an input for recipes which will calculate the points for me so I don't have to add them up myself (lazy I know but useful to learn for making web sites). For example if I know that 1-5g of chicken is 1 point, bacon is 1 point, sausage is 3 points and a pizza base is 5 points I can play about with adjusting the amount of topping I can have while it calculates the points used.

In which case you will need some sort of array for the values of each item so you can use the number of them to calculate the total points. Here's a little snip as an example ...

<script>
var foods = ["Chicken", "Bacon", "Sausage", "Base"];
var points = [1, 1, 3, 5];
for($i = 0; $i < foods.length; $i++) {
    document.write(foods[$i] + " " + points[$i] + " points <br>");
}
</script>

Just had a quick look on w3schools at these array things... Would I be right in thinking I need to use an array to define the weights of food and then points like this:

<script>

var chicken = ["0-5g", "5-10g", "10-15", "15-20g"];

var chickenPoints = [1, 2, 3, 4];

</script>

would this then create 4 chicken weights and assign them points that could be added together later?

 

The user input would be a drop down list of weights on different items which would be automatically added up:

 

<!DOCTYPE html>

<html>

<body>

<select>

<option value="0-5">0-5g</option>

<option value="5-10">5-10g</option>

<option value="10-15">10-15g</option>

<option value="15-20">15-20g</option>

</select>

</body>

</html>

 

so I need to make each option have a value of points and then add up all the options chosen from multiple selections

I have no idea what this line means "for($i = 0; $i < foods.length; $i++)"

I have no idea what this line means "for($i = 0; $i < foods.length; $i++)"

 

It's a way of cycling over an array. In an array to position is defined by the index, so in your example chicken[0] would be '0-5g' as arrays don't count from 1, they count from 0. To explain what the code here does.

 

for() this creates a loop, e.g. for each

$i = 0; - This defines $i as 0

$i < foods.length; - this limits the loop to the length of the array. In the your var chicken example the chicken.length would be 4 as there are 4 items in the chicken array. So in this case this would repeat 4 times.

$i++; This increases the number for $i by 1 each pass.

 

This method helps identify which in the array you want. The long version would be ...

<script>
var foods = ["Chicken", "Bacon", "Sausage", "Base"];
var points = [1, 1, 3, 5];
document.write(foods[0] + " " + points[0] + " points <br>");
document.write(foods[1] + " " + points[1] + " points <br>");
document.write(foods[2] + " " + points[2] + " points <br>");
document.write(foods[3] + " " + points[3] + " points <br>");
</script>

But if you wanted to add another you would need to make the code ...

<script>
var foods = ["Chicken", "Bacon", "Sausage", "Base", "Cheese"];
var points = [1, 1, 3, 5, 2];
document.write(foods[0] + " " + points[0] + " points <br>");
document.write(foods[1] + " " + points[1] + " points <br>");
document.write(foods[2] + " " + points[2] + " points <br>");
document.write(foods[3] + " " + points[3] + " points <br>");
document.write(foods[4] + " " + points[4] + " points <br>");
</script>

Whereas the for() method would make the same code simpler ...

<script>
var foods = ["Chicken", "Bacon", "Sausage", "Base", "Cheese"];
var points = [1, 1, 3, 5, 2];
for($i = 0; $i < foods.length; $i++) {
    document.write(foods[$i] + " " + points[$i] + " points <br>");
}
</script>

This helps when keeping things up to date or combining js with php or similar.

Sorry about the late reply, been trying to get php/mysql and apache installed and working on both my mac and windows.... (shudder!)

 

I'm still no closer to understanding how I need to do what I need to do (I'm sure the above is right i just not understanding it(yet)) so thought I'd post the basic layout here in the hope someone can suggest the best method of working it out (php, database(mysql), javascript or some other way?) and point us in the direction of how to learn how to do it. I've scoured w3schools but don't think I understand the basics of what I want in order to research it.

 

<body>

<div id="header">

<h1>CHICKEN</h1>

</div>

<!--The links on the left of the page-->

<div id="nav">

<a href="index.html">HOME</a><br />

<a href="chicken.html">CHICKEN</a><br />

<a href="beef.html">BEEF</a><br />

<a href="pizza.html">PIZZA</a><br />

</div>

<div id="Recipie">

<?php

print("hello like");

?>

<br /><br />

<!-- this changes the meat(or other) point value to calculate-->

<select>

<option value="chicken">Chicken</option>

<option value="beef">Beef</option>

<option value="other">Other</option>

</select>

<!--then we choose the weight so we can calculate the points -->

<select>

<option value="chicken0">0g</option>

<option value="chicken1">0-5g</option> <!--once picked these need to be added to the ones picked below -->

<option value="chicken2">5-10g</option>

</select>

<br />

Potatoes:

<select>

<option value="potatoes0">0g</option>

<option value="potatoes1">0-5g</option> <!--these need adding up with the ones above-->

<option value="potatoes2">5-10g</option>

</select>

<br /><br /><br /><br />

Total points: <!--this is where the above weights will shown as points value-->

</div>

<div id="footer">

footer text

</div>

</body>

Hope this makes sense