sending input field data to php script in angular 4

Question

I am trying to build an angular app and i am fairly new to the technology. I have successfully been able to take values from the input field and view them in the console but i want to take those values and send it to the php script where the backend processing can be done. Basically its a simple mail function. Below are my codes.

My backend.php file

<?php
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);

  @$rand = $_POST['rand'];
    @$captcha = $_POST['captcha'];
    @$email = $_POST['email'];
    @$msg = $_POST['msg'];
    @$to = "contact@ixoraa.in";
  @$subject = $_POST['name'];   
    @$headers = "From:" . $email . "\r\n";
  @$header .= "MIME-Version: 1.0\r\n";
    @$header .= "Content-type: text/html\r\n";
if($rand == $captcha)
{

    $retval =mail($to, $subject, $msg, $headers);



if( $retval == true )  

{

echo '<script type="text/javascript">'; 

echo 'alert("Thanks for your feedback. We will reply back soon.")'; 
echo '</script>';

echo '<meta http-equiv="refresh" 
content="0;url=http://www.ixoraa.in/new">';

}

else
{

echo '<script type="text/javascript">'; 

echo 'alert("Not sent !!!")'; 

   echo '</script>';
}
   }

        else{

echo '<script type="text/javascript">'; 

echo 'alert("Captcha does not match")'; 

   echo '</script>';
        }


?>

Here goes my component.html

<form class="" [formGroup] = "form" (ngSubmit)="onSubmit(form.value)">
            <div class="form-group has-feedback">
                <input  name="name" type="text" formControlName='name' class="form-control" placeholder="Name" style="background-color: rgba(60, 144, 155, 0.10); color: white;"/>
                <i class="glyphicon glyphicon-user form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
           </div>
           <div class="form-group has-feedback">
                <input  name="email" formControlName='email' type="text" class="form-control" placeholder="Email" style="background-color: rgba(60, 144, 155, 0.10); color: white;" />
                <i class="glyphicon glyphicon-send form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
           </div>
           <div class="form-group has-feedback">
               <textarea  name="msg" formControlName='msg' type="text" rows="5" class="form-control" placeholder="Message" style="background-color: rgba(60, 144, 155, 0.10); color: white;"></textarea>
                <i class="glyphicon glyphicon-comment form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
           </div>
   <div style=" display: table; width: 100%; font-weight:600; font-size:25px;">
   <input name="rand" formControlName='rand'  class="text-center" style="background-color: antiquewhite; text-decoration: line-through;" size="3" type="text" value="{{randomNumber}}" readonly></div>
   <div class="form-group has-feedback">
        <input formControlName='captcha'  onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off name="captcha" id="captcha" type="text" class="form-control" placeholder="Enter Code Here" style="background-color: rgba(60, 144, 155, 0.10); color: white;" />
        <i class="glyphicon glyphicon-pencil form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
   </div>
   <input style="padding-left: 20px; font-weight: 600; padding-right: 20px; background-color: #00aee7;margin-bottom: 40px; color: white;" type="submit" name="submit" value="Send" class="btn">
</form>

and here goes my component.ts file

import { Component, OnInit } from '@angular/core';
import {Http} from '@angular/http';
import {FormGroup, FormControl, FormControlName} from '@angular/forms';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  form;

  randomNumber;
  constructor(private http: Http) {
    this.randomNumber = Math.floor((Math.random() * 10000) + 1);

  }

  onSubmit = function(user) {
      console.log(user);
      this.http.post('http://localhost/ixoraa/backend.php', user).subscribe();

  };

  ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl(),
      email: new FormControl(),
      msg: new FormControl(),
      captcha: new FormControl(),
      rand: new FormControl(this.randomNumber)
    });
  }

}

thanks in advance!!!

I don't think there's anything wrong with your Angular code. Do you see the POST request going on in the XHR tab of Network with the body? If yes then it seems the issue is with your PHP script. — SiddAjmera, Oct 30 '18 at 18:28
Why do you have @ before variable names? e.g. @$rand = $_POST['rand']; it must be like this $rand = @$_POST['rand']; — Mohd Shahid, Oct 30 '18 at 18:43
I don't know much about the @ signs. As i said i am knew to angular i looked up at some tutorials and they had so i put it. — ChiranjeevMazumdar, Oct 30 '18 at 18:50

score 0 · Answer 1 · answered Oct 30 '18 at 22:13

I believe yours may be a CORS problem: your are probably starting your angular app with default configuration, which means it will be hosted on localhost:4200, while your http post request is sent on localhost:80, which is not the same origin as you application.

Here is an nice article about CORS: Cross-Origin Resource Sharing Article

And here is a nice answer explaining how to deal with them.

sending input field data to php script in angular 4

1 Answers1