/    Sign up×
Community /Pin to ProfileBookmark

ive never used Javascript please help

Copy linkTweet thisAlerts:
Dec 02.2010

Hi
I’m trying to display information submitted by a form using javascript. I have this code but it only works for the first question and it doesnt work on click (it works when you select the arial button). I want my users to be able to select a button from every question and then press submit and the infomation will display what they have selected if that makes sense?

I’ve never really used java script before so I am very confused and would appreciate any advice as I need to learn. Thanks

code….

[code]
<style type=”text/css”>
.noprint {
display:none;
}
</style>

<script type=”text/javascript”>

function ProcessMe(myOpt)
{

switch (eval(myOpt))
{
case 1 : document.getElementById(“Response”).innerHTML=”<p>You scored 1 in this area which indicates you are unhappy with your current situation </p>”;
break;
case 2 : document.getElementById(“Response”).innerHTML=”<p>You scored 2 in this area which indicates you are unhappy with your current situation </p>”;
break;
case 3 : document.getElementById(“Response”).innerHTML=”<p>You scored 3 in this area which indicates you are unhappy with your current situation </p>”;
break;
case 4 : document.getElementById(“Response”).innerHTML=”<p>You scored 4 in this area which indicates you are unhappy with your current situation </p>”;
break;
case 5 : document.getElementById(“Response”).innerHTML=”<p>You scored 5 in this area which indicates you are not entirely with your current situation </p>”;
break;
case 6 : document.getElementById(“Response”).innerHTML=”<p>You scored 6 in this area which indicates you made need to work on this area</p>”;
break;
case 7 : document.getElementById(“Response”).innerHTML=”<p>You scored 7 in this is area which indicates there are no immediate issues</p>”;
break;
case 8 : document.getElementById(“Response”).innerHTML=”<p>You scored 8 in this is area which indicates there are no immediate issues</p>”;
break;
case 9 : document.getElementById(“Response”).innerHTML=”<p>You scored 9 in this is area which indicates that you are comfortable with this part of your life</p>”;
break;
case 10 : document.getElementById(“Response”).innerHTML=”<p>You scored 10 in this is area which indicates that you are satisfied with this part of your life</p>”;
break;
}

document.getElementById(“Response”).style.display=”block”;
document.getElementById(“question”).style.display=”none”;
}
</script>

</head>

<body>

<div id=”question” > <form id=”form1″ name=”form1″ method=”post” action=””>
<h2>Life Wheel </h2>
<table width=”586″ border=”0″ cellpadding=”1″ cellspacing=”6″>
<tr>
<td width=”179″ valign=”bottom”>Career/business</td>
<td width=”385″><table width=”300″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”center”>1</td>
<td align=”center”>2</td>
<td align=”center”>3</td>
<td align=”center”>4</td>
<td align=”center”>5</td>
<td align=”center”>6</td>
<td align=”center”>7</td>
<td align=”center”>8</td>
<td align=”center”>9</td>
<td align=”center”>10</td>
</tr>
<tr>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
</tr>
<tr>
<td align=”center”><input type=”radio” name=”career” id=”radio81″ value=”1″ onChange=”Javascript:ProcessMe(this.value)”/></td>
<td align=”center”><input type=”radio” name=”career” id=”radio82″ value=”2″ onChange=”Javascript:ProcessMe(this.value)”/></td>
<td align=”center”><input type=”radio” name=”career” id=”radio83″ value=”3″ onChange=”Javascript:ProcessMe(this.value)”/></td>
<td align=”center”><input type=”radio” name=”career” id=”radio84″ value=”4″ onChange=”Javascript:ProcessMe(this.value)”/></td>
<td align=”center”><input type=”radio” name=”career” id=”radio85″ value=”5″ onChange=”Javascript:ProcessMe(this.value)”/></td>
<td align=”center”><input type=”radio” name=”career” id=”radio86″ value=”6″ onChange=”Javascript:ProcessMe(this.value)”/></td>
<td align=”center”><input type=”radio” name=”career” id=”radio87″ value=”7″ onChange=”Javascript:ProcessMe(this.value)”/></td>
<td align=”center”><input type=”radio” name=”career” id=”radio88″ value=”8″ onChange=”Javascript:ProcessMe(this.value)”/></td>
<td align=”center”><input type=”radio” name=”career” id=”radio89″ value=”9″ onChange=”Javascript:ProcessMe(this.value)”/></td>
<td align=”center”><input type=”radio” name=”career” id=”radio90″ value=”10″ onChange=”Javascript:ProcessMe(this.value)”/></td>
</tr>
</table></td>
</tr>
<tr>
<td>Finances</td>
<td><table width=”300″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”center”><input type=”radio” name=”finance” id=”radio11″ value=”1″ /></td>
<td align=”center”><input type=”radio” name=”finance” id=”radio12″ value=”2″ /></td>
<td align=”center”><input type=”radio” name=”finance” id=”radio13″ value=”3″ /></td>
<td align=”center”><input type=”radio” name=”finance” id=”radio14″ value=”4″ /></td>
<td align=”center”><input type=”radio” name=”finance” id=”radio15″ value=”5″ /></td>
<td align=”center”><input type=”radio” name=”finance” id=”radio16″ value=”6″ /></td>
<td align=”center”><input type=”radio” name=”finance” id=”radio17″ value=”7″ /></td>
<td align=”center”><input type=”radio” name=”finance” id=”radio18″ value=”8″ /></td>
<td align=”center”><input type=”radio” name=”finance” id=”radio19″ value=”9″ /></td>
<td align=”center”><input type=”radio” name=”finance” id=”radio20″ value=”10″ /></td>
</tr>
</table></td>
</tr>
<td>Physical environment</td>
<td><table width=”300″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”center”><input type=”radio” name=”environment” id=”radio71″ value=”1″ /></td>
<td align=”center”><input type=”radio” name=”environment” id=”radio72″ value=”2″ /></td>
<td align=”center”><input type=”radio” name=”environment” id=”radio73″ value=”3″ /></td>
<td align=”center”><input type=”radio” name=”environment” id=”radio74″ value=”4″ /></td>
<td align=”center”><input type=”radio” name=”environment” id=”radio75″ value=”5″ /></td>
<td align=”center”><input type=”radio” name=”environment” id=”radio76″ value=”6″ /></td>
<td align=”center”><input type=”radio” name=”environment” id=”radio77″ value=”7″ /></td>
<td align=”center”><input type=”radio” name=”environment” id=”radio78″ value=”8″ /></td>
<td align=”center”><input type=”radio” name=”environment” id=”radio79″ value=”9″ /></td>
<td align=”center”><input type=”radio” name=”environment” id=”radio80″ value=”10″ /></td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align=”left”>&lt;- 1 = unsatisfied and 10 = completely satisfied -&gt;
<input type=”submit” name=”button” id=”button” value=”Submit” /></td>
</tr>
</table>
</form>
</div>

Your career/business:

<div id=”Response” style=”display:none;height:200px;width:200px”></div>[/code]

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangDec 03.2010 — Remove the onchange events and use the onsubmit:[CODE]<form name="form1" method="post" action="" onsubmit="return ProcessMe(this);">[/CODE]
Each question will require a similar loop within ProcessMe[CODE]function ProcessMe(myForm) {
var aObj = myForm.getElementsByName('career');
for(i=0; i<aObj.length; i++) {
if(aObj[i].checked) {
var career = parseInt(aObj[i].value);
break;
}
}

switch (career)
{
.
.
.

return false;
}[/CODE]The id's are unnecessary.

Use 1 table, nested tables are too complicated and take longer to display.
Copy linkTweet thisAlerts:
@katybabyauthorDec 03.2010 — thank you for your help. I will give it ago ?
×

Success!

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