form action with javascript

Question

I have a form that must execute a javascript function on submit  the function then posts data to my php send mail file and the mail is sent  But it only works in fire fox  The form action does not seem to be doing anything in IE  my question is  Is this the correct way to call a function from an external file from the form action   action  javascript simpleCart checkout      simpleCart is the  js file and checkout   is the function   Tips appreciated  struggling to understand why it would work in firefox but not IE  chrome or safari    lt form name form onsubmit  return validateFormOnSubmit this   enctype  multipart form-data  action  javascript simpleCart checkout    method  post  gt

User · Answer

It has been almost 8 years since the question was asked, but I will venture an answer not previously given. The OP said this doesn't work:

action="javascript:simpleCart.checkout()"

And the OP said that this code continued to fail despite trying all the good advice he got. So I will venture a guess. The action is calling checkout() as a static method of the simpleCart class; but maybe checkout() is actually an instance member, and not static. It depends how he defined checkout().

By the way, simpleCart is presumably a class name, and by convention class names have an initial capital letter, so let's use that convention, here. Let's use the name SimpleCart.

Here is some sample code that illustrates defining checkout() as an instance member. This was the correct way to do it, prior to ECMA-6:

function SimpleCart() {
    ...
}
SimpleCart.prototype.checkout = function() { ... };

Many people have used a different technique, as illustrated in the following. This was popular, and it worked, but I advocate against it, because instances are supposed to be defined on the prototype, just once, while the following technique defines the member on this and does so repeatedly, with every instantiation.

function SimpleCart() {
    ...
    this.checkout = function() { ... };
}

And here is an instance definition in ECMA-6, using an official class:

class SimpleCart {
    constructor() { ... }
    ...
    checkout()    { ... }
}

Compare to a static definition in ECMA-6. The difference is just one word:

class SimpleCart {
    constructor() { ... }
    ...
    static checkout()    { ... }
}

And here is a static definition the old way, pre-ECMA-6. Note that the checkout() method is defined outside of the function. It is a member of the function object, not the prototype object, and that's what makes it static.

function SimpleCart() {
    ...
}
SimpleCart.checkout = function() { ... };

Because of the way it is defined, a static function will have a different concept of what the keyword this references. Note that instance member functions are called using the this keyword:

this.checkout();

Static member functions are called using the class name:

SimpleCart.checkout();

The problem is that the OP wants to put the call into HTML, where it will be in global scope. He can't use the keyword this because this would refer to the global scope (which is window).

action="javascript:this.checkout()" // not as intended
action="javascript:window.checkout()" // same thing

There is no easy way to use an instance member function in HTML. You can do stuff in combination with JavaScript, creating a registry in the static scope of the Class, and then calling a surrogate static method, while passing an argument to that surrogate that gives the index into the registry of your instance, and then having the surrogate call the actual instance member function. Something like this:

// In Javascript:
SimpleCart.registry[1234] = new SimpleCart();

// In HTML
action="javascript:SimpleCart.checkout(1234);"

// In Javascript
SimpleCart.checkout = function(myIndex) {
    var myThis = SimpleCart.registry[myIndex];
    myThis.checkout();
}

You could also store the index as an attribute on the element.

But usually it is easier to just do nothing in HTML and do everything in JavaScript with .addEventListener() and use the .bind() capability.

User · Answer

Absolutely valid       lt form action  quot javascript alert  Hello there  I am being submitted    quot  gt           lt button type  quot submit quot  gt              Let s do it          lt  button gt       lt  form gt       lt  -- Tested in Firefox  Chrome  Edge and Safari -- gt   So for a short answer  yes  this is an option  and a nice one  It says  quot when submitted  please don t go anywhere  just run this script quot  - quite to the point   A minor improvement To let the event handler know which form we re dealing with  it would seem an obvious way to pass on the sender object       lt form action  quot javascript myFunction this  quot  gt    lt  -- should work  but it won t -- gt   But instead  it will give you undefined  You can t access it because javascript  links live in a separate scope  Therefore I d suggest the following format  it s only 13 characters more and works like a charm       lt form action  quot javascript   quot  onsubmit  quot myFunction this  quot  gt    lt  -- now you have it  -- gt       now you can access the sender form properly   You can write a simple  quot   quot  as action  it s quite common - but it has a side effect of scrolling to the top when submitting   Again  I like this approach because it s effortless and self-explaining  No  quot return false quot   no jQuery domReady  no heavy weapons  It just does what it seems to do  Surely other methods work too  but for me  this is The Way Of The Samurai   A note on validation Forms only get submitted if their onsubmit event handler returns something truthy  so you can easily run some preemptive checks       lt form action  quot  something php quot  onsubmit  quot return isMyFormValid this  quot  gt   Now isMyFormValid will run first  and if it returns false  server won t even be bothered  Needless to say  you will have to validate on server side too  and that s the more important one  But for quick and convenient early detection this is fine

User · Answer

I always include the js files in the head of the html document and them in the action just call the javascript function  Something like this   action  javascript checkout      You try this   Don t forget include the script reference in the html head   I don t know cause of  that works in firefox  Regards

User · Answer

A form action set to a JavaScript function is not widely supported  I m surprised it works in FireFox   The best is to just set form action to your PHP script  if you need to do anything before submission you can just add to onsubmit  Edit turned out you didn t need any extra function  just a small change here   function validateFormOnSubmit theForm        var reason           reason    validateName theForm name       reason    validatePhone theForm phone       reason    validateEmail theForm emaile        if  reason                  alert  Some fields need correction  n    reason         else           simpleCart checkout              return false      Then in your form    lt form action     onsubmit  return validateFormOnSubmit this    gt

[javascript] form action with javascript

Examples related to javascript

Examples related to forms