Can we see some sample code for passing FORM data to a server script?

[Don]

Hi,

AngularJS newbie here.  Two way data binding and DOM manipulation of AngularJS is very impressive.  And I'd love to see some working sample code for passing FORM data to a server side script (to be more accurate, a FORM processing URL).

Thanks. 

[Don]

Mainly for SPA, to get form processing status back to the app.

[Lucas Lacroix]

I have no sample code off-hand, but take a look at the Http class, which can be used as the basis for you to create a FormSubmit service for your API.

You would use it very similar to how you would use $.ajax but instead of a callback or Promise, it uses an Observable.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

System Technology Division, MEDITECH

781-774-2293

[Don Li]

Ahe, AngularJS 2 is a bit too much for me for now.  Btw, I just figured out how to send FORM data via AngularJS.  Thanks tho.

Don

(Don) Chunshen Li

Software Programmer

Oralando, Florida

540-818-1749

--
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/TUgbIwxFSPc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Sander Elias]

Hi Don,

Then you need to look at the promoise based NG1 version of $http. You probably also want to use ngSubmit.

Regards

Sander

[Don]

Hi Sander,

Thanks for your input.  Question, how to pass a FORM input value as a parameter for the $http target URL?

For instance, I have this field, <input type="text" name="myID">

then AngularJS code

...

 $http.get("http://myServer/checkID.cfm?pid=")

.then(function (response) ...

What I'd like to do is to pass the newly inputted value for the FORM myID field for the pid parameter for the URL.  Possible?  If so, how?

[Sander Elias]

Hi Don,

Reading the forms data out of the dom is not impossible, but usually there is an easier way to accomplish what you want.

Here is a small example

Play around with it, and if you have questions about it, don't hesitate to ask!

Regards

Sander

[Don Li]

Hi Sander,

I wasn't thinking...

It's real simple, 

 $scope.valField = document.getElementById('myfield1').value;

then

 $http.get("http://myServer/checkID.cfm?pid="+$scope,valField)

Thanks tho.

Don

[Sander Elias]

Hi Don

While this works, it's considered bad practice. Accessing the DOM directly in a controller is creating a tight coupling between your template and your controller.

If you want you can read all about this in the styeguide.

Regards

Sander

[Don Li]

Sander,

You're right and I appreciate it.  In the meantime, as a beginner AngularJS learner, this is Phase 1 for me, that is, I'd like to get things to work first, especially to learn more about two way data binding (which I seem to have got a hang of it), then code-reuse with service or factory (this part, I still need to chew on), once I get comfortable with all this, then, move to Phase 2, doing much better including best practice etc.  

Having said that, I'm already learning to make code more efficient with angularJS (but that's not the priority for me for the moment),

for instance,  for data addition, basic code for FORM inputs would look like this:

  $scope.frmdata.push($scope.field1, $scope.field2, $scope.field3);

but now I know the following code is much better:

  $scope.frmdata.push($scope.contact);

while the FORM looks like this:

<input type="text" ng-model="contact.field1">

<input type="text" ng-model="contact.field2">

<input type="text" ng-model="contact.field3">

Many thanks.

Don

(Don) Chunshen Li

Software Programmer

--

[Sander Elias]

Hi Don,

I got that you are an angular beginner ;). 

But really, do yourself a favor, and read the styleguide a couple of times. While you might not understand (all of) it right now, it will help you to circumvent certain common pitfalls.

Regards

Sander 

[Don]

Sander,

I just took a look at your sample.  Very interesting.  Thank you very much.

Don

[Don]

Sander,

I have a few questions to bug you on your sample form and angularJS script.

a) currently the script outputs form data to console, what if we want a URL to process the form with GET method, then, would $http.get('myURL') kicks in?

and if we want POST method, it would then be $http.post...  

Now, where and how do we define the "$http" here?

b) what exactly does 

this.submit = () => { // code here }

mean?

On form submission, do the following:

Does the () mean to the current function?

Does the => mean plus the code within the { } ?

c) what if I only want to send one field of the FORM, namely, this.formData.id via the GET method and also to receive server/url response? 

This question is obviously tied to the above b).

Many thanks.

[Sander Elias]

Hi Don,

() => {} are called arrow functions and are (not so) new to ES2015

I Updated the example a bit, to show you how you can handle your questions, and moved it back to ES5. I hope it's easier to understand for you now.

If you still have questions, don't hesitate to ask!

Regards

Sander

[Don]

Hi Sander,

Thank you very much and my apologies for late response.  Wasn't well the day before yesterday and got some "fire" to put off yesterday and today, hopefully some time later tomorrow I can focus on learning AngularJS again.

Best,

Don

[Don]

Hi Sander,

I'm getting to it now.  Am using your exact script except for the "someEndpoint", I replaced it with myURL (a valid URL), which would just dump the submitted FORM.

Also, for the form, I added a submit field.  Upon submission I'm getting "angular.js:13708 ReferenceError: myDataservice is not defined" error.  And I'm attaching my two files for your review, what did I do wrong?

Many thanks.

Don

[Sander Elias]

Hi Don,

There was a typo in my sample. (actually 2) 

myDataservice !== MyDataService and vm.formdata !== vm.formData.  (one gets a bit sloppy with modern editors cathing stuff like this, and plunker doesn;t ;) )

One that is fixed it actually works here is the plunk updated

Regards

Sander

[Don Li]

Hi Sander,

Thank you so much for your debugging.  I didn't think of potential typo(s) [my bad].  The {MyDataService] service is now syntax-wise working.

Upon form submission, it now displays two lines of data via console.  Namely, the FORM data submitted (btw, ) and "form saved ok!" 

The new/additional '$q' parameter did not seem to impact screen output.

Question, were the code of   return r  doing something for us at this point?

Many thanks.

Don

--

[Sander Elias]

Hi Don,

You should read into promise use. here are a couple of helpfull links:

angular specific: http://www.webdeveasy.com/javascript-promises-and-angularjs-q-service/

generic: https://www.promisejs.org/

Regards

Sander

[Don Li]

Hi Sander,

Thank you very much for introducing promise (promisejs embedded into AngularJS, $q) to me.  Quite interesting, I intend to start to play with code as well tomorrow.

Best,

Don

--