Jump to content

Newbie in Javascript, how to start an ordering form?


NielsjeNL
 Share

Recommended Posts

Hey guys, I'm a school student and we've recently been introduced to javascript. Now we need to make a website which contains a page where you can order stuff, but I have no idea how/where to start.There are 3 categories (which don't have to be used, just text).You should be able to give your own number of wares in the first category.It looks like this: Foodproducts: (1st category)- Flour + 1 kilogram + 5 kilogram + etc.- Yeast + same as above- Confectionery + Sugar 1 kilogram + Sugar 5 kilogram + etc Baking means (2nd)- Containers + width 5cm x length 10cm x height 5cm + width 5cm x length 20cm x height 5cm + etc- Jumpforms (bad translation, I know :P) + diameter 10cm x height 5cm + diameter 20cm x height 5cm + etc Packaging (3rd)- Cardboard box with looking-through window + For foodproduct from container (width 5cm x length 10cm x height 5cm) + For foodproduct from container (width 5cm x length 20cm x height 5cm_ + etc + For foodproduct from jumpform (diameter 20cm x height 5cm) + etc I really have no idea how I should start, as I have a very tiny bit of knowledge about javascript. It's just to hard for me. Any help would be really appeciated ;)

Edited by NielsjeNL
Link to comment
Share on other sites

I hope you already made the html part of the page. What do you want to do with submited data after subiting a form?

Link to comment
Share on other sites

It doesn't need to be submitted, there will be just a button that does nothing. We're busy with the HTML part, I'll post it in an hour if it's done.EDIT: Oh sorry, the things you chose have to be viewed in a post or pop-up message.

Edited by NielsjeNL
Link to comment
Share on other sites

you can have a hidden div in html page.assign a function on onclick event for the button. In that function access the form element using DOM.http://w3schools.com/jsref/dom_obj_form.asp you can the use elemnts array http://w3schools.com/jsref/coll_form_elements.asp and loop through it on each elemnt. when you will loop get the value property and name property of given elemnt. using those you can manipulate a structure of element in that hidden div. once the div is populated with data. change the div object style property to make it visible.

Link to comment
Share on other sites

you can have a hidden div in html page.assign a function on onclick event for the button. In that function access the form element using DOM.http://w3schools.com/jsref/dom_obj_form.asp you can the use elemnts array http://w3schools.com...rm_elements.asp and loop through it on each elemnt. when you will loop get the value property and name property of given elemnt. using those you can manipulate a structure of element in that hidden div. once the div is populated with data. change the div object style property to make it visible.
Thank you for your help, but we need to have the code in the HTML page itself. And I don't understand anything you said ;) Something went wrong and I only have the first part of the code yet:
<center>	<table id="besteltabel">			<tr><th>Voedingsmiddelen</th></tr>			<tr>				<td>Meel</td>				<td><input type="text" name="meel" />kilogram</td>			</tr>			<tr>				<td>Gist</td>				<td><input type="text" name="gist" />kilogram</td>			</tr>			<tr><td>Zoetwaren</td>				<td><input type="text" name="zoetwaren" />kilogram</td>			</tr>	  	  		</table>	</center>

It's in dutch, if you want it converted to english gimme a shout.

Edited by NielsjeNL
Link to comment
Share on other sites

what parts don't you understand? What have you tried and what part are you stuck on? If you aren't going to use a form tag and the native submit event handler, then you need to create a button or element or something that fires an event (click, for example) that you can assign a function to, which can get all the user submitted values and do something with them, based on your requirements.

Link to comment
Share on other sites

what parts don't you understand? What have you tried and what part are you stuck on? If you aren't going to use a form tag and the native submit event handler, then you need to create a button or element or something that fires an event (click, for example) that you can assign a function to, which can get all the user submitted values and do something with them, based on your requirements.
Oops, I totally forgot to make it a form. There will be a button that takes care of posting the message, I can figure out how to do this myself.Here is the full code, I will include the form tag tomorrow:
<center>    <table id="besteltabel">		    <tr><th>Voedingsmiddelen</th></tr>		    <tr>			    <td>Meel</td>			    <td></td>			    <td><input type="text" name="meel" />kilogram</td>			    <td><input type="text" name="totaalmeel" /></td>		    </tr>		    <tr>			    <td>Gist</td>			    <td></td>			    <td><input type="text" name="gist" />kilogram</td>			    <td><input type="text" name="totaalgist" /></td>		    </tr>		    <tr>			    <td class="tdborder">Zoetwaren</td>			    <td class="tdborder"></td>			    <td class="tdborder"><input type="text" name="zoetwaren" />kilogram</td>			    <td class="tdborder"><input type="text" name="totaalzoetwaren" /></td>		    </tr>		    <tr><th>Bakmiddelen</th></tr>		    <tr>			    <td>Bakblikken</td>			    <td>breedte 5cm x lengte 10cm x<br /> hoogte 5cm</td>			    <td><input type="text" name="bakblikkenklein" /></td>			    <td><input type="text" name="totaalbakblikkenklein" /></td>		    </tr>		    <tr>			    <td></td>			    <td>breedte 5cm x lengte 20cm x<br /> hoogte 5cm</td>			    <td><input type="text" name="bakblikkengroot" /></td>			    <td><input type="text" name="totaalbakblikkengroot" /></td>		    </tr>		    <tr>			    <td>Springvormen</td>			    <td>diameter 10cm x hoogte 5cm</td>			    <td><input type="text" name="springvormklein" /></td>			    <td><input type="text" name="springvormkleintotaal" /></td>		    </tr>		    <tr>			    <td class="tdborder"></td>			    <td class="tdborder">diameter 20cm x hoogte 5cm</td>			    <td class="tdborder"><input type="text" name="springvormgroot" /></td>			    <td class="tdborder"><input type="text" name="totaalspringvormgroot" /></td>		    </tr>		    <tr><th>Verpakkingsmiddelen</th></tr>		    <tr>			    <td>Kartonnen doos met doorkijkvenster</td>			    <td>Voor eetproduct uit bakblik<br />(breedte 5cm x lengte 10cm x hoogte 5cm)</td>			    <td><input type="text" name="vbakblikklein" /></td>			    <td><input type="text" name="totaalvbakblikklein" /></td>		    </tr>		    <tr>			    <td></td>			    <td>Voor eetproduct uit bakblik<br />(breedte 5cm x lengte 20cm x hoogte 5cm)</td>			    <td><input type="text" name="vbakblikgroot" /></td>			    <td><input type="text" name="totaalvbakblikgroot" /></td>		    </tr>             <tr>                <td>Totaal</td>                <td></td>                <td></td>                <td><input type="readonly" name="totaal"</td>            </tr>	   	   	    </table>    </center>

The last td in every subcategory displays the total amount of euro's that need to be paid per product, and the last category displays the total amount of euro's.

Link to comment
Share on other sites

so, I'm not sure what you're asking for? You didn't really follow up with any questions or comments, so I'm still not sure what you need help with. Like I said, show some code of what you tried to do or don't understand.

Link to comment
Share on other sites

so, I'm not sure what you're asking for? You didn't really follow up with any questions or comments, so I'm still not sure what you need help with. Like I said, show some code of what you tried to do or don't understand.
Sorry, I was in a bit of a rush yesterday.I have a no idea what I should do to get the amount of euro's displayed in the last field. I don't have any experience with JavaScript (I did try it though, didn't work out so well) and neither do the members of my project group. We did try creating variables but we weren't sure what to do after that. I thought we should create functions after that but we got stuck on that part.Could you give me a start?
Link to comment
Share on other sites

did you check the links i posted? You need to access the DOM. what have you come up so far?

Link to comment
Share on other sites

did you check the links i posted? You need to access the DOM. what have you come up so far?
I don't have anything as explained above. I looked into your links and it doesn't really do what I want to, although I could play with it. What I need is a calculation that calculates how many of the products there are, and the price is counted by the product * price. Like a simple 5 bakblikken (containers) times 5 is 25 sum.Then, it would calculate the total price of every field and display it in the last field.I'm sorry if everything I say is unclear, this whole thing has been a pain in the arse and I'm getting tired of the stress. Edited by NielsjeNL
Link to comment
Share on other sites

We are not here to do the work for you. If you can't be bothered to learn basic programming, then it will be harder for you to solicite help from us. We've been trying to hammer home the basics. think of the steps and attempt each one in order, and debug and test each step.1) bind a function to run on a event (event handler), like when a button or image is clicked2) use basic DOM methods, like getElmementById, to get reference to the elements that have the values you need to do the calculations with3) do the math4) again, use basic DOM methods to assign the answer to an element so it can be seen on the screen

Link to comment
Share on other sites

We are not here to do the work for you. If you can't be bothered to learn basic programming, then it will be harder for you to solicite help from us. We've been trying to hammer home the basics. think of the steps and attempt each one in order, and debug and test each step.1) bind a function to run on a event (event handler), like when a button or image is clicked2) use basic DOM methods, like getElmementById, to get reference to the elements that have the values you need to do the calculations with3) do the math4) again, use basic DOM methods to assign the answer to an element so it can be seen on the screen
I never said I don't want to learn it, but it's too hard for me to do all by myself. I also never said to do all the work for me, I asked if you guys could help me get started.A friend helped me now, but now it's not going past the 5th thing. What am I doing wrong? As far as we can tell everything is correct.
				    // Variabelen				    var a = form.meel.value				    var b = form.gist.value				    var c = form.zoetwaren.value				    var d = form.bakblikkenklein.value				    var e = form.bakblikkengroot.value				    var f = form.springvormklein.value				    var g = form.springvormgroot.value				    var h = form.vbakblikklein.value				  				    // If/Else Constructies //   ! staat voor niet				    if (a != null && a != "") {					    prijs = parseFloat("2.50");					    uitkomst = parseInt(a) * parseFloat(prijs);					    form.totaalmeel.value = parseFloat(uitkomst).toFixed(2);				    } else {					    form.totaalmeel.value = "";				    }				    // Nieuwe If/Else				    if (b != null && b != "") {					    prijs = parseFloat("3.40");					    uitkomst = parseInt( * parseFloat(prijs);					    form.totaalgist.value = parseFloat(uitkomst).toFixed(2);				    } else {					    form.totaalgist.value = "";				    }				    // Nieuwe If/else				    if (c != null && c != "") {					    prijs = parseFloat("3.50");					    uitkomst = parseInt(c) * parseFloat(prijs);					    form.totaalzoetwaren.value = parseFloat(uitkomst).toFixed(2);				    } else {					    form.totaalzoetwaren.value = "";				    }				    // Nieuwe If/else				    if (d != null && d != "") {					    prijs = parseFloat("2.50");					    uitkomst = parseInt(d) * parseFloat(prijs);					    form.totaalbakblikkenklein.value = parseInt(d).toFixed(2);				    } else {					    form.totaalbakblikkenklein.value = "";				    }				    //Nieuwe if/else				    if (e != null && e != "") {					    prijs = parseFloat("3");					    uitkomst = parseInt(e) * parseFloat(prijs);					    form.totaalbakblikkengroot.value = parseInt(e) * parseFloat(prijs);				    } else {					    form.totaalbakblikkengroot.value = "";				    }				  				    //Nieuwe if/else				    if (f != null && f != "") {					    prijs = parseFloat("2.5");					    uitkomst = parseInt(f) * parseFloat(prijs);					    form.totaalspringvormklein.value = parseInt(f) * parseFloat(prijs);				    } else {					    form.totaalspringvormklein.value = "";				    }				    //Nieuwe if/else				    if (g != null && g != "") {					    prijs = parseFloat("3");					    uitkomst = parseInt(g) * parseFloat(prijs);					    form.totaalspringvormgroot.value = parseInt(g) * parseFloat(prijs);				    } else {					    form.totaalspringvormgroot.value = "";				    }				    //Nieuwe if/else				    if (h != null && h != "") {					    prijs = parsefloat("4");					    uitkomst = parseInt(h) * parseFloat(prijs);					    form.totaalvbakblikklein.value = parseInt(h) * parseFloat(prijs);				    } else {					    form.totaalvbakblikklein.value = "";				    }			    }		    </script>

Edited by NielsjeNL
Link to comment
Share on other sites

are you checking for errors in the console? what debugging are you doing to try and figure out where the problem is? Do that, check all your variable and input names? The fact that it stopped on the fifth one should be the clue. (and I see the issue, fwiw) As we've suggested, DOM methods are the preferred way to get references to an element however. there's a lot of duplication in that code, too.

Edited by thescientist
Link to comment
Share on other sites

are you checking for errors in the console? what debugging are you doing to try and figure out where the problem is? Do that, check all your variable and input names. As we've suggested, DOM methods are the preferred way to get references to an element however.
Yes, I noticed I went wrong with the last lines of the f,g,h variable scripts.
                  //Nieuwe if/else                   if (h != null && h != "") {                       prijs = parsefloat("4");                        uitkomst = parseInt(h) * parseFloat(prijs);                        form.totaalvbakblikklein.value = parseInt(h) * parseFloat(prijs);                         } else {                              form.totaalvbakblikklein.value = "";                          }

should have been

	//Nieuwe if/else 					if (h != null && h != "") {						prijs = parseFloat("4");						uitkomst = parseInt(h) * parseFloat(prijs);						form.totaalverpakbakblikklein.value = parseFloat(uitkomst).toFixed(2);					} else {						form.totaalverpakbakblikklein.value = "";					} 

Edited by NielsjeNL
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...