CodingForums.com - Adding HTML using JS

Page 1 of 2

Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Adding HTML using JS (http://www.codingforums.com/showthread.php?t=288342)

MrRob

02-26-2013 07:16 PM

Adding HTML using JS

Hi all,
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:

Code:

<script>

        function add(){

                var table=document.getElementById("Table");

                var row=table.insertRow();

                var cell1=row.insertCell(0);

                var cell2=row.insertCell(1);

                var cell3=row.insertCell(2);

                var cell4=row.insertCell(3);

                cell1.innerHTML="Cell1";

                cell2.innerHTML="Cell2";

                cell3.innerHTML="Cell3";

                cell4.innerHTML="Cell4";

                }

</script>

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.

Thanks again

-Rob

xelawho

02-26-2013 07:25 PM

quite possibly not getting it, but do you mean that instead of this:

Code:

cell1.innerHTML="Cell1";

you want to add some javascript to the innerHTML?

because that would just be weird and nonsensical.

just guessing, but are you trying to do something like

Code:

cell1.onclick=function(){some_javascript_here};

MrRob

02-26-2013 07:33 PM

Quote:

Originally Posted by xelawho (Post 1316130)

quite possibly not getting it, but do you mean that instead of this:

Code:

cell1.innerHTML="Cell1";

you want to add some javascript to the innerHTML?

because that would just be weird and nonsensical.

just guessing, but are you trying to do something like

Code:

cell1.onclick=function(){some_javascript_here};

So I'm not great with JavaScript or explaining things, let me give it another shot.

I have a table which has a row containing a select box and 2 text boxes.
http://i.imgur.com/9eBYp43.png

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 :)

-Rob

felgall

02-26-2013 07:50 PM

innerHTML as the name suggests is for inserting HTML into that spot in the page.

All JavaScript should be in an external file completely separate from the HTML and attached to the appropriate points in the page using ids classes or if the HTML is being added by JavaScript then by attaching event handlers to the JavaScript references to the elements as you add them.

Adding JavaScript calls (such as onclick) inside the HTML that you are adding using innerHTML has a lot of issues as parts of the code run at two completely different times and so the values that parts of the code are expected to have may have completely different values by the time it runs.

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.

rnd me

02-26-2013 08:36 PM

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.

felgall

02-26-2013 08:43 PM

Quote:

Originally Posted by rnd me (Post 1316163)

you can't use innerHTML to insert <script> tags. Well, you can, but they won't fire..

You never need to insert script tags anywhere other than immediately before the </head> or </body> tags anyway with 99.9% of them being best placed in the second of those spots. As the code is already inside of a script you don't need to add new script tags to add code either - simply include the JavaScript code alongside of the other code referencing the tags that it is to attach to as Xelawho already mentioned.

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.

VIPStephan

02-26-2013 11:09 PM

Sorry, post #3 was in the moderation queue and apparently I’m the only one that occasionally comes by and takes care of this.

Old Pedant

02-26-2013 11:23 PM

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.

MrRob

02-26-2013 11:37 PM

Quote:

Originally Posted by Old Pedant (Post 1316200)

Code:

        <form name="OrderForm" action="mailto:RD136723@ghs.truropenwith.ac.uk" method="POST">

                <tr>

                        <td>

                                <select>

                                        <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>

                                </select>

                        </td>

                        <td>

                        </td>

                        <td>

                                <input type="text" name="Quantity" value="1" size="1"></input>

                        </td>

                        <td>

                                <input type="text" name="Price" size="6" readonly></input>

                        </td>

                        <td>

                                <button type="button" onClick="add()"/>

                        </td>

                </tr>

        </form>

</table>

Wasn't entirely sure which bits to leave out and which to put in so I just left everything in from the form.

Here's the HTML for the entire page if you wanted to look at it as a whole.
http://pastebin.com/sc5eJ3Ut

Old Pedant

02-27-2013 12:50 AM

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.

ANYWAY...

One way to do this, is to simply clone the entire row contents.

Suppose you changed your current row to add an id:

Code:

<tr id="firstRow">

Then your addRow code could be as simple as:

Code:

        function add(){

                var table=document.getElementById("Table");

                var row=table.insertRow();

                row.innerHTML = document.getElementById("firstRow").innerHTML;

       }

That should work in most browsers. Older MSIE might choke.

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.

Now...

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.

MrRob

02-27-2013 08:20 AM

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 :)

-Rob

felgall

02-27-2013 06:12 PM

Quote:

Originally Posted by MrRob (Post 1316297)

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.

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.

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.

Philip M

02-27-2013 07:10 PM

Quote:

Originally Posted by felgall (Post 1316388)

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++.

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?

felgall

02-27-2013 08:46 PM

Quote:

Originally Posted by Philip M (Post 1316403)

Why do you not complain and ask for your money back?

That sounds like a good idea. Most of the people asking for assistance with JavaScript homework here ought to ask for their money back since the questions they have been given to answer and the sort of code that they are expected to use in answering them clearly indicates that the person teaching their class needs to take a JavaScript beginners course to learn the basics of the language at least as badly as their students do. Why do all these people actually pay someone to teach them something when the teacher doesn't know the most basic things about the topic that they are attempting to teach.

Perhaps they should go one step further given that the JavaScript they end up learning here means that they actually know more JavaScript than their teacher does is to offer to teach JavaScript to their current teacher with the 'teacher' paying them to learn some of the JavaScript basics that the student now knows that the 'teacher' doesn't.

MrRob

02-28-2013 03:58 PM

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.

-Rob

All times are GMT +1. The time now is 03:01 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page