-
Apr 30th, 2014, 05:27 PM
#1
[RESOLVED] [JavaScript] Error setting up OnClick
I'm having some issues setting up my OnClick event for a button right now this is my script:
Code:
<script>
// Setup handlers for the controls
window.onload = function() {
document.getElementById("btnSend").onclick = btnSend_Click;
}
// Setup a click event for btnSend
function btnSend_Click()
{
var name = document.getElementById("nameTextBox").value;
var phone = document.getElementById("phoneTextBox").value;
var email = document.getElementById("emailTextBox").value;
var services = "";
if (document.getElementById("tattooRadio").value == "True" and document.getElementById("piercingRadio").value == "True")
{
services = "Tattoo & Piercing";
}
else if (document.getElementById("tattooRadio").value == "True")
{
services = "Tattoo";
}
else if (document.getElementById("piercingRadio").value == "True")
{
services = "Piercing";
}
var description = document.getElementById("descriptionTextBox").value;
alert(name + "\n" + phone + "\n" + email + "\n" + services + "\n" + description);
}
</script>
and this is my HTML:
Code:
<div id='content'>
<label for='nameTextBox' name='nameLabel'>Full Name</label><br/>
<input id='nameTextBox' type='text'></input><br/><br/>
<label for='phoneTextBox' name='nameLabel'>Phone Number</label><br/>
<input id='phoneTextBox' type='text'></input><br/><br/>
<label for='emailTextBox' name='emailLabel'>Email Address</label><br/>
<input id='emailTextBox' type='text'></input><br/><br/>
<input id='tattooRadio' type='checkbox'>Tattoo</input>
<input id='piercingRadio' type='checkbox'>Piercing</input><br/><br/>
<label for='descriptionTextBox' name='descriptionLabel'>Description</label><br/>
<textarea id='descriptionTextBox' cols="25" rows="7"></textarea><br/>
<input id='btnSend' type='submit' value='Send'></input>
</div>
Whenever I click on my button, nothing happens and I'm not sure why. It looks like everything is set up properly... but apparently it's not.
-
Apr 30th, 2014, 11:05 PM
#2
Re: [JavaScript] Error setting up OnClick
You can alternately attach the click function in the onclick event.
Code:
<input id='btnSend' type='submit' value='Send' onclick="btnSend_Click()"></input>
and comment out or remove this code:
Code:
//window.onload = function() {
//document.getElementById("btnSend").onclick = btnSend_Click;
//}
Last edited by KGComputers; May 1st, 2014 at 12:12 AM.
-
May 1st, 2014, 12:02 AM
#3
Re: [JavaScript] Error setting up OnClick
Attaching an event on load with Jquery is more robust.
Code:
$(document).ready(function() {
$("#btnSend").click(function () {
alert("Sap is back, clicking stuff.");
});
});
Also you better use: <input id='btnSend' type='submit' value='Send' /> as input will not accept text in <>'here'</>
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
May 1st, 2014, 08:57 AM
#4
Re: [JavaScript] Error setting up OnClick
You can alternately attach the click function in the onclick event.
The reason why I didn't want to do that is because I want my code to be as unobtrusive as possible.
Attaching an event on load with Jquery is more robust.
I haven't looked at JQuery yet, would I place that in between my script tags like I would for JavaScript?
-
May 1st, 2014, 10:34 AM
#5
Re: [JavaScript] Error setting up OnClick
Originally Posted by dday9
I haven't looked at JQuery yet, would I place that in between my script tags like I would for JavaScript?
If you mean how you place Jquery, you just go to Jquery site and download the .js and then import it to your markup as any js file.
If you mean the document.ready, then you place it in script tags as any js code.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
May 1st, 2014, 12:42 PM
#6
Re: [JavaScript] Error setting up OnClick
I was talking specifically about how to place JQuery, but after thinking about it more I really want to stick with JavaScript because I'm more comfortable with that.
I tried your suggestion KG only to test if I would get an alert, but that didn't happen either.
-
May 1st, 2014, 06:16 PM
#7
Re: [JavaScript] Error setting up OnClick
No problem. I started when both Javascript and Jquery were present so i have no empathy on either(well Jquery is javascript but anyhow...) but i must say that although here you can get away easily with either solution and probably Javascript seems a little more understandable on the specific request, there are other times that i cannot even imagine using plain Javascript, for example passing request to web services or WCF or setting event listeners and of course the more "non serious" stuff like providing effects or creating a freely movable dialog box.
So personally i don't mind using Javascript for a lot of stuff (p.e. i prefer getelementbyid rather than $('....') for simple css or attribute manipulations) but i would highly suggest using Jquery or other JS libraries (looking at Angular now) so you can take the website a "step further".
P.S. I am not in a VS PC right now but i think that Jquery can get away with some Lower and Uppercase code. I mean being a VB developer i hate that upper and lower casing and yes i know, i know it's wrong it's bad but i wish that stupidity and the ";" wouldn't be there (again here even plain JS can get away with some ";") .
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
May 2nd, 2014, 11:01 AM
#8
Re: [JavaScript] Error setting up OnClick
I'm a VB.Net guy myself too, and I cannot stand the semi-colons or the casing... but it's a tradeoff. Either way, the problem was solved by simply replacing the
Code:
<input id='btnSend' type='submit' value='Send'></input>
With
Code:
<button id='btnSend'>Send</button>
-
May 3rd, 2014, 11:44 AM
#9
Re: [RESOLVED] [JavaScript] Error setting up OnClick
I tried your suggestion KG only to test if I would get an alert, but that didn't happen either.
Well, I managed to show the alert on my part using your html code:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">
// Setup a click event for btnSend
function btnSend_Click() {
var name = document.getElementById("nameTextBox").value;
var phone = document.getElementById("phoneTextBox").value;
var email = document.getElementById("emailTextBox").value;
var services = "";
if (document.getElementById("tattooRadio").value == "True" && document.getElementById("piercingRadio").value == "True")
{
services = "Tattoo & Piercing";
}
else if (document.getElementById("tattooRadio").value == "True")
{
services = "Tattoo";
}
else if (document.getElementById("piercingRadio").value == "True")
{
services = "Piercing";
}
var description = document.getElementById("descriptionTextBox").value;
alert(name + "\n" + phone + "\n" + email + "\n" + services + "\n" + description);
}
</script>
</head>
<body>
<div id='content'>
<label for='nameTextBox' name='nameLabel'>Full Name</label><br/>
<input id='nameTextBox' type='text'></input><br/><br/>
<label for='phoneTextBox' name='nameLabel'>Phone Number</label><br/>
<input id='phoneTextBox' type='text'></input><br/><br/>
<label for='emailTextBox' name='emailLabel'>Email Address</label><br/>
<input id='emailTextBox' type='text'></input><br/><br/>
<input id='tattooRadio' type='checkbox'>Tattoo</input>
<input id='piercingRadio' type='checkbox'>Piercing</input><br/><br/>
<label for='descriptionTextBox' name='descriptionLabel'>Description</label><br/>
<textarea id='descriptionTextBox' cols="25" rows="7"></textarea><br/>
<input id='btnSend' type='submit' value='Send' onclick="btnSend_Click()"></input>
</div>
</body>
</html>
At least Button worked fine on your end.
Last edited by KGComputers; May 3rd, 2014 at 11:50 AM.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|