form submission

[Jonathan Price]

So, I get why traditional form submission isn't really supported or recommended.  But I have a situtation where I need to build a form and submit it to paypal, and I'm really struggling to make it work.  I have something like this now:

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="giftform">
        <input type="hidden" name="item_name" value="$25 gift certificate" ng-model="model.item_name">
        <input type="hidden" name="amount" value="25.00" ng-model="model.amount">

        <button class="btn btn-success" style="font-size: 20px;" ng-click="gimme();">Gimme!</button>

and a controller with this:


    $scope.gimme = function() {
        console.log(document.giftform);
        document.giftform.item_name = $scope.model.selectedItem.textvalue;
        document.giftform.amount = $scope.model.selectedItem.denomination;
        // document.giftform.submit();
    }

And I'm getting : Error: document.giftform is undefined


Surely this isn't so complicated, and I'm just missing something simple?

[Tash Chainar]

Try to add a name="giftform" attribute to the form.

Also look for ng-submit directive for alternative approach.

[Puritan Paul]

I didn’t see a way to accomplish this traditional form submission using ng-submit.  Could you point to an example?

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/4jrnchXOu0c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Tash Chainar]

Ough sorry.. ng-submit is used for bind the onsubmit event and prevent traditional submission way, to use angular way with $http module.

Btw why not to use $http.  

[Puritan Paul]

This gave me the impressions that wasn't an option 

http://stackoverflow.com/questions/21433236/paypal-with-angularjs-http-post-request

Surely there's a simple way to so this. I feel like I'm missing something obvious.  

[Tash Chainar]

Hmm understood.

Have you tried to add name attribute to the form.

[Puritan Paul]

Yep, same error.

[Tash Chainar]

Well I tried and not getting that error.

Anyway you have bound those hidden inputs to ng-model so you can do

 $scope.model.item_name = $scope.model.selectedItem.textvalue;

 $scope.model.amount = $scope.model.selectedItem.denomination;

[Puritan Paul]

Sorry wasn’t originally specific enough about the error - The error shows up in firebug console (document.giftform is undefined). Page still submits, but the form fields aren’t being updated.  I know this because the values at Paypal are wrong when I arrive there.  I believe my code matches yours as quoted below.

[Nicholas Smith]

I believe this does what you want, you'll need to change the form action to your paypal url:

http://jsfiddle.net/hhvx6L8s/2/

html

<div ng-app ng-controller="TestCtrl">

<form action="http://www.posttestserver.com/post.php" name="giftform" method="POST" id="giftform" ng-submit="gimme()">

    <input type="text" name="item_name" value="$25 gift certificate" ng-model="model.item_name"/>

    <input type="text" name="amount" value="25.00" ng-model="model.amount"/>

    <button type="submit">Gimme!</button>

</form>

javascript

function TestCtrl($scope, $http) {

    $scope.model = {};

    $scope.model.selectedItem = {

        textValue: "$50 gift card",

        denomination: 50

    };

    $scope.model.item_name = "";

    $scope.model.amount = 0.00;

    

    

    $scope.gimme = function() {

        $scope.model.item_name = $scope.model.selectedItem.textValue;

        $scope.model.amount = $scope.model.selectedItem.denomination;        

    }

    

}

[Puritan Paul]

Ah, okay.  This was close.  Two-way binding is a no-go for hidden inputs, so you have to do this:

   <input type="hidden" name="amount" value="{{model.amount}}"/>

Which works!  Thanks for the lead!