Welcome to HBH! If you have tried to register and didn't get a verification email, please using the following link to resend the verification email.

JS Page generator help


ghost's Avatar
0 0

New to Javascript programming so not quite sure what I did wrong on this one…

</head>

<script>
function go() {

first = document.info.first;
last = document.info.last;
info = document.info.info;

name = first + " " + last;

email = last + first.substring(0,1) + "@carthage.k12.mo.us";

page = "*!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"" + "<br /><br />" + "*head" + "<br /><br />" + "*title" + first + "*/title" + "<br /><br />" + "*meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"" + "<br /><br />" + "*link href="style.css" rel="stylesheet" type="text/css" /" + "<br /><br />" + "*/head" + "<br /><br />" + "*body" + "<br /><br />" + "*table" + "<br /><br />" + "*tr class="blue"" + "<br /><br />" + "*td colspan="4"*h1" + first + " " + last + "*/h1*/td" + "<br /><br />" + "*/tr" + "<br /><br />" + "*tr class="grey"" + "<br /><br />" + " *td width="160" rowspan="3" class="white"" + "<br /><br />" + " *img src="../Teacher Staff Photos/images/" + last + ".gif" alt="" + name + "#" width="150" height="188"" + "<br /><br />" + "*td width="480" colspan="3" class="white"" + "<br /><br />" + info + "<br /><br />" + "*/td" + "<br /><br />" + "*/tr" + "<br /><br />" + "*tr class="grey"" + "<br /><br />" + "*td colspan="3" class="white"*/td" + "<br /><br />" + "*/tr" + "<br /><br />" + " *tr class="grey"" + " *td colspan="3" class="white"*a href="mailto:" + email + "#"" + email + "*/a*/td" + "<br /><br />" + "*/table" + "<br /><br />" + "*p align="center"*img src="../images/BLUE-TIGER.gif" width="390" height="100"*/p" + "<br /><br />" + "*/body" + "<br /><br />" + "*/html";

}
</script>

<h1>Staff Page Generator</h1><br />
<p>Please fill out the form and copy the code entered in the Green box.</p>
<form action="" name="info" onsubmit="return go()">
First Name - <br />

<input type="text" size="20" name="first"><br /><br />
Last Name - <br />
<input type="text" size="20" name="last"><br /><br />
Information - <br />
<input type="text" size="99" name="info"><br /><br />

<INPUT type="submit" value="Go"><br /><br /><br /><br /><br />
</form>

ghost's Avatar
0 0

You have the error console for FF, don't you? Just load your script and that will tell you where your error is. :)


spyware's Avatar
Banned
0 0

Escape. Look at the embedded HTML in your Javascript.


ghost's Avatar
0 0

spy is correct that you need to escape the / symbol in your tags. Also, I'm not sure that using "return function()" in the onsubmit event of your form will achieve the desired result (but, since I have never used it to do this, I could be wrong).

Explain more about how it isn't working… as in what it does or doesn't do. Saying "not sure what I did wrong" doesn't tell us anything.


ghost's Avatar
0 0

Form

First Name - <br />
<input type="text" size="20" name="first"><br /><br />
Last Name - <br />
<input type="text" size="20" name="last"><br /><br />
Information - <br />
<input type="text" size="99" name="info"><br /><br />

<input type="submit" value="Go"><br /><br /><br /><br /><br />```

Variable deceleration

```markupvar first = document.info.first;
var last = document.info.last;
var info = document.info.info;

var name = first+" "+last;

var email = last+first.substring(0,1)+"@carthage.k12.mo.us";```

and whenever I use document.write to print any of the variables it prints nothing, just makes the page go blank.



EDIT - Entire Code

index.html
```markup<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Staff Page Generator</title>
</head>

<h1>Staff Page Generator</h1><br />
<p>Please fill out the form and copy the code entered in the Green box.</p>
<form action="form.html" name="form">
First Name - <br />
<input type="text" size="20" name="first"><br /><br />
Last Name - <br />
<input type="text" size="20" name="last"><br /><br />
Information - <br />
<input type="text" size="99" name="info"><br /><br />

<input type="submit" value="Go"><br /><br /><br /><br /><br />
</form>
<body>

</body>
</html>

Form.html

var first = document.forms[0].first[0].value;
var last = document.forms[0].last[1].value;
var info = document.forms[0].info[2].value;

var name = first+" "+last;

var email = last+first.substring(0,1)+"@carthage.k12.mo.us";

</script>
<p style="background:#99FF99">

<script>
document.write("*!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"" + "*head" + "*title" + first "*/title*meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"*link href="style.css" rel="stylesheet" type="text/css" /*/head*body*table*tr class="blue"*td colspan="4"*h1"+name+"*/h1*/td*/tr*tr class="grey" *td width="160" rowspan="3" class="white" *img src="../Teacher Staff Photos/images/"+last+".gif" alt=""+name+"#" width="150" height="188"*td width="480" colspan="3" class="white""info"*/td*/tr*tr class="grey"*td colspan="3" class="white"*/td*/tr *tr class="grey""+" *td colspan="3" class="white"*a href="mailto:"+email+"#""+email+"*/a*/td*/table*p align="center"*img src="../images/BLUE-TIGER.gif" width="390" height="100"*/p*/body*/html");
</script>

</p>```

EDIT 2 - stripped the ascii code out of it for some odd reason


Edit 3 - Live test
http://www.universumartifex.com/test/staff/index.html

ghost's Avatar
0 0

Hi. I looked at your page with fire bug and it posts the following errors:

document.form is undefined

var first = document.form.first.value;

form.htm…nfo=infoa (line 11)

answer: var first = document.form.[first].value;

missing ) after argument list

document.write("!DOCTYPE html PUBLI…#60;/body/html");

form.htm…nfo=infoa (line 23) answers: thers a typo somwre and the document.write('somthing') Not ""

Ps: it was just a quick look so I could be wromg… Sorry about the english…


ghost's Avatar
0 0

Lemur wrote: EDIT - Entire Code

<form action="form.html" name="form">
First Name - <br />
<input type="text" size="20" name="first"><br /><br />
Last Name - <br />
<input type="text" size="20" name="last"><br /><br />
Information - <br />
<input type="text" size="99" name="info"><br /><br />

<input type="submit" value="Go"><br /><br /><br /><br /><br />
</form>

Where did the onsubmit go? Are you sure this is the entire code?

Lemur wrote:

var first = document.forms[0].first[0].value;
var last = document.forms[0].last[1].value;
var info = document.forms[0].info[2].value;

I could've helped you to fix this earlier when we were discussing it over IM… but, at the time, it seemed as if you were more interested in "maintaining your pride" than fixing your problem. There's not a thing at all wrong with needing help… doesn't make us any less intelligent. People teach me crap all the time (well, not so much here… but, in real life).

That being said, you're combining two methods in that script block. Either you need to reference the items by name or by index… not both. If by name, take off the [0],[1]. and [2]. If by index, change the names to "elements" (no quotes). w3schools has a decent DOM reference… should be handy, so go check it out.


SySTeM's Avatar
-=[TheOutlaw]=-
20 0

document.write() is old school, try: document.createElementNS(), setAttribute(), document.createTextNode(), and appendChild()


ghost's Avatar
0 0
Such as Biography, courses taken, and a breif Personal piece. Note - to break up text put <br /> on the end of an area, two to make a new paragraph.

It is "brief", not "breif". And don't get me started on the "two to " make a new paragraph. Next, your handling of tags should be transparent to the user, not asking for BR tags in the context…

I am not trying to disrespect you, but this is unsat.

-Hawk


ghost's Avatar
0 0

Lemur wrote: New to Javascript programming hawk_wolfram wrote: And don't get me started on the "two to " make a new paragraph. Next, your handling of tags should be transparent to the user, not asking for BR tags in the context…

I am not trying to disrespect you, but this is unsat.

-Hawk The most effective criticism is that which is followed by supporting arguments and, more importantly, more desirable alternatives. You say that the handling of tags should be transparent to the user (which is true), yet you provide not even basic supporting logic as an example.

How would you handle it? Be constructive, not just critical.


ghost's Avatar
0 0

It was meant to work before I do anything such as that… Besides the fact I'm not sure if that's even possible to do in JS.


ghost's Avatar
0 0

Lemur wrote: Besides the fact I'm not sure if that's even possible to do in JS. It is. Would work about the same as in your language of choice, except that JS has no "helper" functions for it (or, at least, I haven't seen them) like PHP's nl2br() (which is basically just a glorified str_replace). Also, newlines are interpreted differently by Windows, Linux, and Mac, so it would need to account for "\r\n", "\r", and "\n". Finally, you'll want to look into working with textarea selections to handle any font / text changes (bold, size, etc.).


ghost's Avatar
0 0

Zephyr_Pure wrote: [quote]Lemur wrote: New to Javascript programming hawk_wolfram wrote: And don't get me started on the "two to " make a new paragraph. Next, your handling of tags should be transparent to the user, not asking for BR tags in the context…

I am not trying to disrespect you, but this is unsat.

-Hawk The most effective criticism is that which is followed by supporting arguments and, more importantly, more desirable alternatives. You say that the handling of tags should be transparent to the user (which is true), yet you provide not even basic supporting logic as an example.

How would you handle it? Be constructive, not just critical.[/quote]

Roger that Zeph. No excuse. I sounded like a judgemental asshat.

How would I handle it? I agree with Zeph, you simply need to have a function that leverages the correct regex (like taking the user's use of the ".") and goes through the input to replace all of the "."s with the newline delimiter that you want.

Under JS, the String object has the following methods for regexs:

replace(regexp, replaceStr) – where the first arg is going to be the "." and the second arg is what you are replacing it with (i.e. "\r\n")

split(regex) – this one may be handy if you are parsing the input as lines separately as it returns an Array of the input broken up by the regex.

Lastly, like Zeph said, if the underlying OS is a factor for your newline char, then you could implement a switch statement for each OS, then call your replace function with the appropriate newline char as the supplied arg. Hope that helps, and please forgive me for showing my arse.

-Hawk


ghost's Avatar
0 0

No worries, man. Looks like a good start on an approach. One of the best things about answering other people's programming questions would have to be working out the logic in something you've never thought through… or, even if you have, maybe finding a more efficient or different way to do it. Unfortunately, I doubt that the OP's JS creation will go any farther now that it works to some extent. :whoa: