Adding HTML using JS
I'm struggling with a college assignment and was wondering if anyone was willing to help.
The assignment is relatively simple, create a website and compare it to a professionally made one. I'm struggling with a bit of code I want to put in to make my website a little fancier.
I'm making an order form where the user selects a flavour from a select box and then enters a quantity and the price is displayed.
I want a button which, when clicked, adds another row to the table with cells containing code.
This is what I have so far:
This works fine but when trying to add code instead of "Cell#" it ceases to work. If anyone could help that would be greatly appreciated but if possible I'd rather avoid anything overly complicated as I would like to be able to understand it fully.
quite possibly not getting it, but do you mean that instead of this:
because that would just be weird and nonsensical.
just guessing, but are you trying to do something like
Originally Posted by xelawho
I have a table which has a row containing a select box and 2 text boxes.
I want the button to add another row to the table almost identical to that one. The only difference being the name of the text box so that I can calculate the prices seperately.
The reason I have the code from my original post in there is because I wasn't really sure how to go about doing this so I started by finding out how to add a new row to the table and then went from there to adding text.
I was hoping that it would be as simple as changing the words to code and viola! Alas, I was mistaken. Hope that clears up any confusion :)
innerHTML as the name suggests is for inserting HTML into that spot in the page.
Perhaps if you include what you tried replacing Cell# with we might have a better idea of just what it is you are trying to do.
you can't use innerHTML to insert <script> tags. Well, you can, but they won't fire. jQuery has a command/option for this, I don't remember what.
you can loop through the <script> tags once added, and send the text of each tag to window.eval(text), which does basically the same thing as hard-coding the <script> tags in the original content would have done. jQuery et al simply do that for you.
Originally Posted by rnd me
So if the OP is trying to insert script tags there then they are going about things completely the wrong way as even if it did work it would be an extremely poor way to code it.
Sorry, post #3 was in the moderation queue and apparently I’m the only one that occasionally comes by and takes care of this.
So the best thing to do would be to show us what the static HTML for that existing row looks like. Then we can show you how to (effectively) clone the row.
IMPORTANT: You need to also show us the <form> tag. So we know where the info is being submitted to. Yes, it matters.
Originally Posted by Old Pedant
Wasn't entirely sure which bits to leave out and which to put in so I just left everything in from the form.
<form name="OrderForm" action="mailto:RD136723@ghs.truropenwith.ac.uk" method="POST">
<option value="None">Please choose a flavour</option>
<option value="RC&O">Red Cherry & Orange</option>
<option value="BR&GO">Blue Raspberry & Green Apple</option>
<option value="P&RC">Pineapple & Red Cherry</option>
<option value="GA&RC">Green Apple & Red Cherry</option>
<option value="O&BR">Orange & Blue Raspberry</option>
<option value="P&O">Pineapple & Orange</option>
<option value="BR&RC">Blue Raspberry & Red Cherry</option>
<input type="text" name="Quantity" value="1" size="1"></input>
<input type="text" name="Price" size="6" readonly></input>
<button type="button" onClick="add()"/>
Here's the HTML for the entire page if you wanted to look at it as a whole.
Well, first of all a huge warning:
action="mailto:..." is not only obsolete, it (a) isn't supported unless a mail client has been linked to the browser *BY THE USER* and (b) doesn't support form element submission in all browsers and (c) even when supported will likely ask the user if he/she really wants to submit the data to you and warns of possible bad effects, thus scaring off half your users.
SO... You *REALLY* need to abandon that and find a server-side form mailer instead. PHP or ASP or CGI or whatever, but one that will simply take the form contents and then send them to you, so that it works in all browser and doesn't scare off customers.
You also have a horrible mistake there: You don't have any name= for your <select>, so that field won't be sent to you *NO MATTER WHAT*. Only form fields with names are processed by HTML and sent on.
One way to do this, is to simply clone the entire row contents.
Suppose you changed your current row to add an id: Then your addRow code could be as simple as:
That should work in most browsers. Older MSIE might choke.
row.innerHTML = document.getElementById("firstRow").innerHTML;
The correct way is, of course, to use tons and tons of JS code to create all the <td>s and all the <form> fields using document.createElement(), et al.
As a first stab, try the above simple innerHTML copy.
FAIR WARNING: If you give all the "Quantity" fields (just to pick the one example) the same name, then you have to really careful in your form-sending code to be sure that all the fields are picked up in the same order they appear on tha page. I don't know how to do that with PHP (it may even come naturally). I can do it with ASP. No idea about CGI. About all you can do is try it out.
Another alternative, of course, is to give each row a number and each <form> field a name that has the row number as a suffix. Not hard to do. Just a little more JS tedium.
Wow, that's a lot of stuff :p
I should mention that my lecturer insists on the use of action="mailto" and is actually urging everyone to use Expressions Web for this assignment. To be honest I think it is down to his incompetency. He couldn't even explain to us how cookies worked, he just said "copy and paste the code from here and it will work fine"
Thanks for pointing out the select name thing, I'll add those in :)
I'll give that code a shot and let you know how it goes.
Thanks for all the help :)
I think Microsoft declared Expression Web to be dead last year. They have now moved on to yet another web editor that is a part of a complete development suite.
Originally Posted by MrRob
Microsoft's web editor offerings have never produced anything that could be considered to be acceptably written HTML though - somewhere between poor and garbage is how it can usually be described - unless you ignore the WYSIWYWYG part and simply use it to code by hand - which is the only way to produce really good quality HTML anyway since only you know what the parts of the content mean and that's what the HTML tags are intended to define.
I would advise you to avoid all these code generators such as Frontpage and Dreamweaver like the plague. They invariably produce poor quality, excessivly verbose and outdated code. You should code by hand. Use Notepad++.
Originally Posted by felgall
We see examples of incompetent teachers/lecturers here almost every week. Why do you not complain and ask for your money back? Would you accept incompetent lecturers who barely know their subject in Maths, Physics, Law, Medicine or French?
Originally Posted by Philip M
Haha, I appreciate the advice.
College is free here in England as long as you're under 18 so I'm not actually paying for the course otherwise I would've quit months ago.
I've always avoided those programs. I was forced to use FrontPage 2000 a few years ago in school and I hated it so much that I spent a little while learning the basics of HTML in Notepad to avoid ever having to use it again.
The code that Old Pedant provided worked great in Chrome but did nothing in Firefox and added an empty row in IE.
Again I'd like to thank everyone who gave me advice or helped in any way.
I handed in the assignment earlier today with the button omitted as I was unable to get it fully working in time.