Appending input attributes to variables/objects with jQuery

Question

I'm trying to incorporate balanced payment processing into my site, however, their solution assumes a standard HTML form is in use and retrieves it with jQuery. Since I'm using knockout.js to power my forms, the inputs are referenced differently which means I had to modify my form. For this example, I manually set the value of the credit card data rather than take it from the $(#credit-card-form)

When I open up the network tab to check for errors it says "Uncaught TypeError: Property '0' of object # is not a function" which I'm thinking is in reference to the input attribute being appended to creditCardData

This fiddle is the example that Balanced gives to show how it works. In the javascript area, you must create a new request bin and copy that bin into the code. Then when you update the code and click "tokenize", visit that request bin URL and you'll see the request was submitted.

I created this fiddle which properly tokenizes the card, but I'm getting errors and can't quite pin it down to where they're coming from. Remember, you must create your own requestbin and copy/paste that URL into the code. Just a heads up, that "tokenize" button won't do anything. I just left the HTML there, it really doesn't do anything considering the function is called as soon as the fiddle opens.

The main difference between my version and Balanced's is in the initial call to balanced.js functions.

//paidForItems is a button set with knockout.js
self.paidForItems = function() {

      //responseCallbackHandler here, see fiddle for details

     var creditCardData = {
        card_number: '4111111111111111',
        expiration_month: '01',
        expiration_year: '2020',
        security_code: '123'
    };

    balanced.card.create(creditCardData, responseCallbackHandler);
}

Whereas balanced does it upon submitting a form

 //responseCallbackHandler here, see fiddle for details

var tokenizeInstrument = function(e) {
   e.preventDefault();

   var $form = $('#credit-card-form');
   var creditCardData = {
        card_number: $form.find('.cc-number').val(),
        expiration_month: $form.find('.cc-em').val(),
        expiration_year: $form.find('.cc-ey').val(),
        security_code: $form.find('cc-csc').val()
    };

    balanced.card.create(creditCardData, responseCallbackHandler);
};
$('#credit-card-form').submit(tokenizeInstrument);

Do you have this running on open or on pageload? JQuery really wants to wait for pageload for things like this. — Ben Barden
– Ben Barden, Commented Jul 12, 2013 at 19:24
I don't see anything different between .val() and hard coding a string value in. I think there's something else going on — Andrew Walters
– Andrew Walters, Commented Jul 12, 2013 at 19:27
@BenBarden I'm not quite sure what you mean. I thought I explained how the functions are called pretty clearly, unless you're referring to something else. — user1406951
– user1406951, Commented Jul 12, 2013 at 19:29
@AndrewWalters did you look at the two fiddles and try them out? The balanced fiddle works and the one I made doesn't. My fiddle will tokenize the card value as shown by the popup, but it throws an error following that. — user1406951
– user1406951, Commented Jul 12, 2013 at 19:31
@BenBarden Sorry, just had looked at yours and the code snippets. Yours was erroring out due to permissions. I'll check out the balanced fiddle now — Andrew Walters
– Andrew Walters, Commented Jul 12, 2013 at 19:33

Andrew Walters · Accepted Answer · 2013-07-13 01:00:06Z

1

Going to put into an answer since the comments are getting a bit lengthy.

I am not getting permissions errors anymore so I guess something was blocked at work.

The main difference is they're submitting an HTML form and you're (trying to) submitting a javascript object.

I'm pretty sure you can't call .submit() on any random object.

You'll need to do it like this:

http://jsfiddle.net/sKjPF/2/

case 201:
            console.log(response.data);
            var cardTokenURI = response.data['uri'];

            // append the token as a hidden field to submit to the server
              var form = $("#credit-card-form");
            $('<input>').attr({
               type: 'hidden',
               value: cardTokenURI,
               name: 'balancedCreditCardURI'
            }).appendTo(form);
            form.attr({action: requestBinURL});
            form.submit();

Let me know if that doesn't help out.

answered Jul 13, 2013 at 1:00

Andrew Walters

4,8036 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1406951 Over a year ago

Thank you so much. I do have one question though. Considering I'm using knockout.js and acquire my form inputs and not jQuery, won't form always be null for me? This clearly works, but I'm a bit confused as to what happens to "var form"'s value since it's not actually being set.

Andrew Walters Over a year ago

You should still have a form using knockout. Worst case you dynamically inject a form into the DOM then submit that

user1406951 Over a year ago

While there are forms with knockout, it masks them so you don't explicitly declare form names, at least that I'm aware of. For example, a given input you just bind the value and knockout does the rest. When you say dynamically inject a form, do I just create a "fake" form and not assign anything to it?

Andrew Walters Over a year ago

Ya, but you still should have a form tag somewhere on the page, if not you can do something like this and dynamically create the credit card inputs they're expecting to be posted: stackoverflow.com/questions/6964927/…

user1406951 Over a year ago

I'm not sure how familiar you are with knockout, or maybe you're so familiar with it that you understand how it works behind the scenes. Here is a fiddle for a very basic knockout.js form. As far as I can tell there is no explicit form name declaration. From what it looks like, knockout does that for you behind the scenes.

|

Collectives™ on Stack Overflow

Appending input attributes to variables/objects with jQuery

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related