How do I send a form from Angular to PHP?

Question

I'm trying to send the data from my Angular form to a PHP file. I'm using Angular 4/5:

My TypeScript file:

export class HomeComponent implements OnInit {

    constructor(private http: HttpClient) {}

    sendForm() {
       let formdata = document.querySelector('form');
       let datajson = {
           action: 'login', 
           username: formdata.username.value, 
           useremail: formdata.useremail.value,
           usersubject: formdata.usersubject.value,
           usermessage: formdata.usermessage.value
       };
       let apiurl = '../../assets/php/message.php';

       this.http.post(apiurl,datajson)
           .subscribe(data => {alert(datajson.data)})
          .catch(error => {alert (error.status)});
    }
}

The error:

error: core.js:1427 ERROR TypeError: Cannot read property 'post' of 
undefined at HTMLButtonElement.eval (home.component.ts:168) at 
ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.js:4744) 
at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at 
ZoneTask.invokeTask [as invoke] (zone.js:499) at invokeTask (zone.js:1540) 
at HTMLButtonElement.globalZoneAwareCallback (zone.js:1566)

you should not use `document.querySelector` inside of angular apps. Better make use of `@ViewChild` — messerbill, Mar 29 '18 at 15:04
Does this help? https://stackoverflow.com/questions/30208082/angular-js-send-some-data-to-php-script — pascalallen, Mar 29 '18 at 15:06
'document.querySelector' is not the problem... I just want to send my data from the angular 4/5 form to PHP! — Wara, Mar 29 '18 at 15:06
Pascal Allen: you link is about angular 1 or 2. I'm usign angular 4 and angular 5. So your link doesn't help... — Wara, Mar 29 '18 at 15:13
Please edit your question and put the error message with the rest of the question instead of a comment. It's best that people can see the whole problem in the question and not have to read all the comments as well. — Simply Ged, Mar 29 '18 at 15:14
just as a comment... Seems you have a form, why not use either template driven form or reactive form. Just don't access DOM like that. Accessing DOM like that is everything what Angular is NOT about. — AT82, Mar 30 '18 at 08:05

score 0 · Answer 1 · answered Mar 29 '18 at 15:12

You code needs to be inside a method, not global to the class.

export class HomeComponent implements OnInit {

    constructor(private http: HttpClient) {}

    sendForm() {
        let formdata = document.querySelector('form');
        let datajson = {
           action: 'login', 
           username: formdata.username.value, 
           useremail: formdata.useremail.value,
           usersubject: formdata.usersubject.value,
            usermessage: formdata.usermessage.value
        };
        let apiurl = '../../assets/php/message.php';

        this.http.post(apiurl,datajson)
          .subscribe(data => {alert(datajson.data)})
          .catch(error => {alert (error.status)});
    }
}

Please have a look at [ask] and update your question with additional information, such as steps you have tried and error/problems you have found. It's hard to help when you only give us some of the information :-) — Simply Ged, Mar 29 '18 at 15:23
I'm just trying to send the data from my angular 4 form to a php file!!! — Wara, Mar 29 '18 at 15:25

score 0 · Answer 2 · answered Mar 29 '18 at 20:03

0

My guess is that you are not calling sendForm the normal way, but rather in a callback not defined with the arrow function. So the this does not refer to the actual component, but to something else

answered Mar 29 '18 at 20:03

David

33,444
11
80
118

How do I send a form from Angular to PHP?

2 Answers2