Unobtrusive Javascript event keeps executing on page load!

@dingoegretOct 11.2011

I have a simple button in my HTML. I also have a function in my external JavaScript file. This function calls an alert box with some text. Now, I also have a global variable in my JavaScript that gets the button by id, then assigns the onclick event handler to it which in turn is assigned the call to my alert box function. Simple right?

Problem: The alert box shows up when the page loads as well as when the button is clicked. This is not desirable.

My html:

~~[QUOTE]~~

~~[SIZE=”1″]~~<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd“>
<html>
<head>
~~[B]~~<script type=”text/javascript” src=”js.js”>[/B]
</script>
</head>

<body>

~~[B]~~<form>

<input type=”submit” value=”button” id=”a” />

</form>[/B]

</body>
</html>[/SIZE]

[/QUOTE]

My JavaScript:

~~[QUOTE]~~

~~[SIZE=”1″]~~function itClicked()
{
alert(“Hello World!”);
}
~~[B]~~
var element = document.getElementById(‘a’);
element.onsubmit = itClicked();[/B][/SIZE]

[/QUOTE]

I’m obviously doing this all wrong. Help would be appreciated. Thanks.

to post a comment

JavaScript

14 Comments(s) _↴

@pactor21Oct 11.2011 — #I made little modifications to your codes.

HTML should looks as below.

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <script type="text/javascript" src="js.js">
 </script>
 </head>
 <body>
 <form onsubmit="itClicked()">
 <input type="submit" value="button" />
 </form>
 </body>
 </html>[/CODE]

Javascript file as below.

[CODE]function itClicked()
 {
 alert("Hello World!");
 }[/CODE]

@dingoegretauthorOct 11.2011 — #Thank you pactor but I'm trying to avoid inline events. I want a total unobtrusive method to setting the js event without putting any javascript I'm the html.

@pactor21Oct 11.2011 — #I don't really think I understand your point. In your thread, you separated JS from HTML, which is exactly what I did for you.

By the way, you don't use onsubmit event on an input box. I wonder if anyone has seen it that way.

However you can use .submit() jQuery API to do this.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&lt;/script&gt;
 &lt;script type="text/javascript" src="js.js"&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form id="myForm"&gt;
 &lt;input type="submit" value="button" /&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

With the jQuery code below.

$('#myForm').submit(function() {
 alert("Hello, World!");
 return false;
 });

@KorOct 11.2011 — #
However you can use .submit() jQuery API to do this.[/QUOTE]
Don't use JQuery for any insignificant JavaScript simple problem! You don't need a 2 tones press machine to break a nut, do you? :rolleyes:

@dingoegretauthorOct 11.2011 — #Pactor your help is appreciated but, I'm trying to not put event handles (onsubmit, onclick, onload, etc..) Anywhere in the html. Your solution includes a onsubmit attribute within the form tag. Something im trying to avoid.

Is there a way to write an external .js file with the code to execute a function as soon as the submit button is clicked without bring triggered on page load (which is what my code is doing) and without adding anything else to my html.??

@Christophe27Oct 11.2011 — #Something like this:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <script type="text/javascript"> 
 window.onload = function() { 
 
  var el = document.getElementById('myform');
 
  el.onsubmit = function() {
   alert('hello');
  }
 
 }
 </script>
 </head>
 
 <body>
 
 <form id="myform" action="/hello/" method="post">
 
 <input type="submit" value="button" />
 
 </form>
 
 </body>
 </html>[/CODE]

@dingoegretauthorOct 12.2011 — #Thank you for your help, but again, I am trying to avoid placing any script, events, anything! into the HTML. That means forget the HTML source. I dont want anything done to it. The whole point of 'unobtrusive javascript' is to not do things like that.

Just a pure and simple external JS solution please. My code works, it just triggers the event on page load as well as when the submit button is clicked. I dont want it to be triggered on page load. That is my problem.

Again ~ without touching the HTML

@Christophe27Oct 12.2011 — #I have none JS in the HTML form (like onsubmit=""). I just have put the JavaScript code on the same page for readability on this forum, so you just have to copy/paste the JavaScript code and paste it in your external js.js file.

You are a beginner, aren't you ?

@dingoegretauthorOct 12.2011 — #Dude you placed an entire script into the head section of the HTML. Am I like speaking another language? I'm sorry for being frustrated but it seems like I'm not being understood.

No JS in the HTML

No Events in the HTML

Not in the form tag, not in the head tag, not anywhere in the HTML.

In fact, forget there even is a html source. Holy ****..

@Christophe27Oct 12.2011 — #I think you don't understand me!

You can include JavaScript code in two ways:

1) Put it in the HTML (the option you do not prefer)

2) Include it by giving an src attribute in a script tag

Therefore I said [B][U]copy[/U][/B] my JavaScript (not HTML!) code and [B][U]paste[/U] [/B]it in your external JavaScript file.

Then your HTML will be:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <script type="text/javascript" src="js.js"></script>
 </head>
 
 <body>
 
 <form id="myform" action="/hello/" method="post">
 
 <input type="submit" value="button" />
 
 </form>
 
 </body>
 </html>[/CODE]

And your JavaScript file (js.js) will be:

[CODE]window.onload = function() { 
 
  var el = document.getElementById('myform');
 
  el.onsubmit = function() {
   alert('hello');
  }
 
 }[/CODE]

This is exactly what you want, isn't it?

@dingoegretauthorOct 12.2011 — #Works.

I'd like to apologize christophe for my attitude earlier, you are right. I was just really frustrated that a simple solution could evade an answer for so long. But you got it right.

Can you explain to me why my code did not work but yours did. Does it have something to do with the window object?

You're right I'm a JS newb.

@Christophe27Oct 12.2011 — #No worries! ?

One of your errors is because you had a reference to the submit button, not the form. A form is submitted, not a button ? So if you want to work with the submit event of a form, reference to the form by document.getElementById('myForm'), not the submit button.

To be honest I don't know why your itClicked() function is fired. It only happens when you already had declared it in your code. But when you append it immediately to element.onsubmit, it works fine, like you can see.

Success!

@Logic_AliOct 12.2011 — #

Can you explain to me why my code did not work but yours did. [/quote]
I was expecting someone to spot this earlier:
element.onsubmit = itClicked();[/quote]should have been element.onsubmit = itClicked; although it should have been applied to the form.

@dingoegretauthorOct 13.2011 — #I think I kind of get it. The Driving 'class' (I code in java) is the window.object.

It isolates the methods to the event of the windows loading. And by removing the '()" from the method call it some how stops the method from executing on its own??

Well thanks anyway for your help guys. Christophe especially.

Also in #JavaScript _↴

javascript menu required!Selecting Multiple Images reg ex problem

Success!

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

Tweet This

Unobtrusive Javascript event keeps executing on page load!

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Unobtrusive Javascript event keeps executing on page load!

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴