0

I'm trying to pass Angular $scope values to a Hubspot form by calling an AJAX function.

I'm making calculations in the controller and then I would like that data to be input to a corresponding Hubspot form field.

In my Angular controller I have this:

    $scope.submit = function(valid) {
    $scope.$watch(function() {
       return $scope.selectedValue
     }, function() {
        $scope.calculation = $scope.input1 * $scope.selectedValue;
     }
     }

I'd like to pass the $scope.calculation value to the php script and then to hubspot form.

My code looks like this: 

  $.ajax({
              url: 'form.php',
              type: 'POST',
              dataType: "json",
              data: {
                  company: $('#company').val(),
                  firstname: $('#firstname').val(),
                  lastname: $('#lastname').val(),
                  jobtitle: $('#jobtitle').val(),
                  email: $('#email').val(),
                  calculation: $scope.calculation
              }

and I'm just using the Hubspot PHP API with this part in particular gathering the input data.

$str_post = "company=" . $_POST["company"]
. "&firstname=" . $_POST["firstname"]
. "&lastname=" . $_POST["lastname"]
. "&jobtitle=" . $_POST["jobtitle"]
. "&email=" . $_POST["email"]
. "&calculation=" . $_POST["calculation"]
. "&hs_context=" . urlencode($hs_context_json); //Leave this one be

I've tried to set the corresponding $scope to a variable name and still nothing.

Any help would be GREATLY appreciated. Thank you.

FraserKC
  • 21
  • 3
  • 1
    Oh god - use Angular's built in `$http` module - and use the actual `$scope` `ngModel` values, **not** jquery `.val()` methods - it's probably causing at least *part* of the problem. – tymeJV Nov 03 '16 at 17:59
  • 10 4, will update accordingly – FraserKC Nov 03 '16 at 18:25

2 Answers2

1

You are submitting this form in a way that is completely bypassing angular.

I would highly recommend reading this section of this post: https://scotch.io/tutorials/submitting-ajax-forms-the-angularjs-way#submit-the-form-with-angular

It may go over some things you already know, but it will show you exactly how to submit use data binding to get the values of your inputs, and then use angular's $http service instead of jQuery AJAX to submit the data to your API.

Hope this helps!

Ethan May
  • 1,172
  • 10
  • 16
0

Just to build on what was said in other answers, you will find it easier to use Angular's $http service. The AJAX call needs to be done from within your controller.

The best way to do a form submission like this is to link the input elements to $scope using the ng-model directive. Then, when the form is submitted, you call a submit function in your controller using the ng-submit directive. Sounds complicated, but works like a charm.

HTML

<div ng-controller="YourController">
    <form ng-submit="submit(myForm.$valid)" name="myForm" novalidate>
        <input ng-model="responses.company" type="text">
        <!-- More fields go here, all linked to scope with ng-model -->
    </form>
</div>

JS

app.controller('YourController', ['$scope', '$http', function($scope, $http){
    $scope.responses = {};         

    $scope.submit = function(valid){
        if(valid){

            var calculation = parseFloat($scope.responses.input1) * parseFloat($scope.responses.selectedValue);   

            $http({
                method: 'POST',
                url: 'form.php',
                data: {
                    company: $scope.responses.company,
                    firstname: $scope.responses.firstname,
                    lastname: $scope.responses.lastname,
                    jobtitle: $scope.responses.jobtitle,
                    email: $scope.responses.email,
                    calculation: calculation
                }
            }).then(function successCallback(response) {
                //Success!
            }, function errorCallback(response) {
                //Failure :(
            });
        }
    };
}]);
Stafree
  • 119
  • 5