/    Sign up×
Community /Pin to ProfileBookmark

Dynamic Elements

Copy linkTweet thisAlerts:
Dec 20.2004

Okay, try as I might, I just don’t have that solid of a hold on the HTML DOM for what I need. For what I’m working on, I need to dynamically create two elements, one with an onclick event and another with an ID. Not in itself an issue. But it has to do with placement. I have a form:

<form action=”script.php” method=”post” id=”massCard”>
<fieldset>
<legend>Create a Mass Card</legend>
<label>Your Full Name <input type=”text” name=”name”></label>
<label>Who The Intention Is For <input type=”text” name=”intendant”></label>
<label>Your Small Prayer <textarea rows=”10″ cols=”30″ name=”prayer”></textarea></label>
<input type=”submit” name=”submit” value=”Create Card” alt=”Create Card”>
</fieldset>
</form>

Okay, so now I have a javascript function, of which on its call creates a button at the very end of the fieldset, after the textarea. And immediately after the form, creates a <div> element with an ID. So is this possible, and if so, how might I go about this?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesDec 20.2004 — But how are the folks without JavaScript going to use your form?

It is much better for your users and much easier on yourself to start out with a form with all of its elements, all done in HTML. Then "onload" change the class name of certain form elements to hide them and change the class name again when you want them to appear.
Copy linkTweet thisAlerts:
@MstrBobauthorDec 20.2004 — No, you see these two added elements are ONLY for Javascript. I have a sever side script all set up to do the same function, but this Javascript saves bandwith and the reload time, and is much more user friendly, since changes can be made and viewed. Its a type of preview script, actually. Available without Javascript, but I'd like the two elements there to be there only if the user has JS, because otherwise the elements are pointless.
Copy linkTweet thisAlerts:
@CharlesDec 20.2004 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<style type="text/css">

<!--

form {width:15em}

fieldset {padding:1ex}

label {display:block; margin:1em 0}

input, textarea {display:block; margin:auto}

button {display:block; margin:auto}

div.new {border:solid 1px #a00; padding:1ex}

-->

</style>

<script type="text/javascript">

<!--

function createCard (e) {

var text = document.createTextNode ('Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.');

var div = document.createElement ('DIV');

div.className = 'new';

div.appendChild (text);

e.parentNode.appendChild (div);

return false;

}

// -->

</script>

</head>

<body>

<div>

<form action="script.php" method="post" id="massCard" onsubmit="return createCard(this)">

<fieldset>

<legend>Create a Mass Card</legend>

<label>Your Full Name <input type="text" name="name"></label>

<label>Who The Intention Is For <input type="text" name="intendant"></label>

<label>Your Small Prayer <textarea rows="10" cols="30" name="prayer"></textarea></label>

<button type="submit">Create Card</button>

</fieldset>

</form>

</div>

</body>

</html>[/font]

There really isn't any one way to do things with the DOM. You have lots of options. See http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html .
Copy linkTweet thisAlerts:
@MstrBobauthorDec 20.2004 — Thankyou, so much, Charles! I was fooling around with createElement before, but couldn't get it to work. Do you mind if I inquire about one thing?

I'm running a Windows machine (as will, no doubt, most of my visitors). I'm unsure if this is merely new to SP 2, but I get a "Security Warning" from IE, that "Internet Explorer has restricted this file from showing active content that could access your computer." This warning, I fear, may stop users from using the form. And I'm not doing anything wrong! Apparently, using the HTML DOM is now cause for concern? Can anyone give me any advice on this?
×

Success!

Help @MstrBob spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...