CODEWITHSUNDEEP
javascriptjqueryfunctionclassobject
develophper
develophper

Reputation: 312

Insert class/object->function() call into onsubmit event

I am trying to make changes to the default submit action on a form. The submit is controlled by a prototype js object->function now.

     <form action="" method="post" id="product_composite_configure_form" enctype="multipart/form-data" onsubmit="productConfigure.onConfirmBtn(); return false;" target="product_composite_configure_iframe">

I am using the following javascript (jquery) to change the default submit action. My aim is to insert a different function into the onsubmit listener. 

primaMakeOrder.prototype = {
    constructor: primaMakeOrder,

    start: function(response){

        this.storeOptions();
    },

     storeOptions: function(){
        $j("#product_composite_configure_form").attr("onsubmit",this.saveOptions());
    },

    saveOptions: function(){
        console.log('this is a test')
    }
 }

 $j(document).ready(function($j) {
    primaMakeOrder = new primaMakeOrder();
    primaMakeOrder.start();
});

Submitting a value in here is not difficult and getting it to execute a function based on this is also straight forward. The trouble that I'm having is getting it to execute a function that is in a class object specifically primaMakeOrder.saveOption(). The issue seems to be around instantiation but that can't be entirely correct because the javascript works in itself.

I have tried adding - primaMakeOrder.saveOptions() and saveOptions() on it's own but this doesn't work. Ideally I would like a solution that can be executed from the javascript file rather than on the markup including something like 

  primaMakeOrder = new primaMakeOrder();
  primaMakeOrder.saveOptions();

*Side note - I know it may seem odd using both prototype and jquery together. This is all part of a much larger application and there are reasons for doing it this way. Also my terminology may be a little off so apologies, i'm not much of js coder.

*reading - I have looked around google a bit before posting this and everything seemed to suggest the following format

  class.function()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects http://www.mrspeaker.net/2009/10/28/using-jquery-on-javascript-objects/ http://www.htmlgoodies.com/beyond/javascript/calling-object-methods-in-javascript.html

My requirement does seem to be a little different and I'm struggling to find someone else answering my exact question

Upvotes: 1

Views: 653

Answers (1)

Sukima
Sukima

Reputation: 10084

Your overriding all your variable scopes! I'm guessing primaMakeOrder has been defined as a global variable. So when you attempt to reassign it with primaMakeOrder = new primaMakeOrder(); the reference is lost and the object you get back has a different prototype then what you thought.

I suggest offering some scope and avoid global variables. I also suggest changing your prototype coding style. The object literal can be confusing and have unintended side effect (mainly ending the prototype chain).

(function() {
  // Wrap your code in an IIFE
  function PrimaOrder() {
    // this is your constructor
  }

  PrimaOrder.prototype.saveOptions = function() {
    // here is your saveOptions function on every PrimaOrder instance.
  };

  $(function() {
    // Use var to prevent making global variables
    var myPrimaOrder = new PrimaOrder();
    // Notice I use a different name. PrimaOrder is the variable that is
    // the "class" while myPrimaOrder is an "instance".
    myPrimaOrder.saveOptions();
  });
})(); // IIFE's require a trailing ()
// Search Google for Immediately Invoked Function Expression.

Upvotes: 1

Related Questions