/    Sign up×
Community /Pin to ProfileBookmark

Javascript event handler

Copy linkTweet thisAlerts:
Sep 01.2008

Hi chaps,
Im trying to write a javascript event(or atleast i think thats whats im doing)
Here’s the xhtml:

<div class=”contentleft”>
<form method=”post” action=””>
<p>How many friends would you like to invite?</p>
<select >
<option style=”background-color: #800000″ value=”1″>1</option>
<option style=”background-color: #800000″ onclick=”function” value=”2″>2</option>
<option style=”background-color: #800000″ value=”3″>3</option>
<option style=”background-color: #800000″ value=”4″>4</option>
<option style=”background-color: #800000″ value=”5″>5</option>
<option style=”background-color: #800000″ value=”6″>6</option>
<option style=”background-color: #800000″ value=”7″>7</option>
<option style=”background-color: #800000″ value=”8″>8</option>
<option style=”background-color: #800000″ value=”9″>9</option>
<option style=”background-color: #800000″ value=”10″>10</option>
<option style=”background-color: #800000″ value=”11″>11</option>
<option style=”background-color: #800000″ value=”12″>12</option>
<option style=”background-color: #800000″ value=”13″>13</option>
<option style=”background-color: #800000″ value=”14″>14</option>
<option style=”background-color: #800000″ value=”15″>15</option>
</select>
<input type=”text” style=”background-color: #800000″ value=”Email address” />
<select>
<option style=”background-color: #800000″ value=”hotmail.co.uk”>hotmail.co.uk</option>
<option style=”background-color: #800000″ value=”hotmail.com”>hotmail.com</option>
<option style=”background-color: #800000″ value=”yahoo.co.uk”>Yahoo.co.uk</option>
<option style=”background-color: #800000″ value=”yahoo.com”>Yahoo.com</option>
<option style=”background-color: #800000″ value=”gmail.co.uk”>Gmail.co.uk</option>
<option style=”background-color: #800000″ value=”gmail.com”>Gmail.com</option>
</select>

What the script has to do is create another email field and drop down box, this will occure when the user select ‘2’ or more from the drop down list i.e user selects 3 and 2 additional fields will appear.
Im told i need to use an ‘event handler’ problem is i dont know what an event handler is! below is what i have so far, also i dont want the code completed for me i just want somewhere to start from.

Ive started with;

<script type=”text/javascript”>
function newField(){<–am i on the right lines here?
What do i start with here?
}
</script>

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangSep 02.2008 — Event handlers in [I]option[/I] do not work in IE. Use the [I]onchange[/I] in [I]select[/I] to pass the value:&lt;select onchange="newField(this.value);"&gt;
Copy linkTweet thisAlerts:
@no_good_at_thisauthorSep 03.2008 — <script type="text/javascript">

function disp_(newField){;

var field2= ('newField');

var field3= ('newField');

var field4= ('newField');

}

</script>

<select onchange="newField(disp_newField);">

Can you tell me what im doing wrong here?

Thanks.
Copy linkTweet thisAlerts:
@FangSep 03.2008 — Makes no sense, what are you trying to do?
Copy linkTweet thisAlerts:
@no_good_at_thisauthorSep 03.2008 — Ha ha That might be the problem then!

Well, if you look at the big batch of code i posted earlier in this thread you can see the 'select' portions, basically where i have put the 'option' 1-15, each time a number greater then 1 is selected the required number of email address fields will display,1 is already pressent, but if the user selects 2 from the option list then another will display, so on,so forth.

I thought i had to use a 'function' and give that a name, the variable displays the function???

As you know im trying to learn this off the cuff which clearly isn't working
Copy linkTweet thisAlerts:
@FangSep 04.2008 — As you know im trying to learn this off the cuff which clearly isn't working[/QUOTE]
Read the following tutorials at W3Schools: HTML, CSS, JavaScript, HTML DOM and DHTML.
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;dom form&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
function addInput() {
var parent = document.getElementById('formContent');
var requested = document.getElementById('select1').selectedIndex
for(var i=0; i&lt;requested; i++) {
var num = parent.getElementsByTagName('input').length;
var obj = null;
try { // IE
obj = document.createElement('&lt;input type="text" name="EmailAddress'+num+'" value="Email address"&gt;');
}
catch (e) { // W3C
obj = document.createElement("input");
obj.setAttribute("type", "text");
obj.setAttribute("name", "EmailAddress"+num);
obj.setAttribute("value", "Email address");
}
parent.appendChild(obj);
}
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
select, input {background-color:#800000; color:#fff;}
input {display:block;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form name="emails" method="post" action="serverScript.php"&gt;
&lt;div id="formContent"&gt;
&lt;p&gt;How many friends would you like to invite?&lt;/p&gt;
&lt;button type="button" onclick="addInput();"&gt;add fields&lt;/button&gt;
&lt;select id="select1"&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;option value="4"&gt;4&lt;/option&gt;
&lt;option value="5"&gt;5&lt;/option&gt;
&lt;option value="6"&gt;6&lt;/option&gt;
&lt;option value="7"&gt;7&lt;/option&gt;
&lt;option value="8"&gt;8&lt;/option&gt;
&lt;option value="9"&gt;9&lt;/option&gt;
&lt;option value="10"&gt;10&lt;/option&gt;
&lt;option value="11"&gt;11&lt;/option&gt;
&lt;option value="12"&gt;12&lt;/option&gt;
&lt;option value="13"&gt;13&lt;/option&gt;
&lt;option value="14"&gt;14&lt;/option&gt;
&lt;option value="15"&gt;15&lt;/option&gt;
&lt;/select&gt;
&lt;input type="text" name="EmailAddress0" value="Email address"&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@no_good_at_thisauthorSep 04.2008 — Crikey i was way off, thanks for that, but that looks really complex, how do i break it down to better understand it?

cheers
Copy linkTweet thisAlerts:
@FangSep 04.2008 — By first reading the tutorials.
×

Success!

Help @no_good_at_this 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.18,
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,
)...