Results 1 to 9 of 9

Thread: [RESOLVED] [JavaScript] Error setting up OnClick

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Resolved [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.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    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.
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

  3. #3
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    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'</>
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  4. #4

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    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?
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  5. #5
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: [JavaScript] Error setting up OnClick

    Quote Originally Posted by dday9 View Post
    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.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  6. #6

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    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.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  7. #7
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    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 ";") .
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  8. #8

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    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>
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  9. #9
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    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.
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width