0

Im making a form in order to let the user update some of his personal info , but I would like to keep some placeholder values (actual and verified values - or already submitted values) if no new value is specified when submitting the form.

I don't want the user to have to re fill all fields just to update one specific field...

Is that possible, and safe by proceeding like that (xss?) I tried something for purpose but doubt it would work. (beside this, the server just went down for maintenance I guess so I can't test it right now)
Thats my php code for the request : 

//get params
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);

if (isset($request->email)) {
  $email = $request->email;
}
else $email = vm.email; // app side value... of course it won't work, only for you to see what I wish to do !

$telephone = $request->telephone;
echo 'telephone<br/>'.$telephone;
$adresse = $request->adresse;
echo 'adresse<br/>'.$adresse;
$email = $request->email;
echo 'email<br/>'.$email;

// Vérification des identifiants
try {
  $req = $pdo->prepare('INSERT INTO users (telephone, adresse, email) VALUES (:telephone, :adresse, :email) ON DUPLICATE KEY UPDATE email= :email, telephone = :telephone, adresse = :adresse');
  $req->execute(array(
      'telephone' => $telephone,
      'adresse' =>$adresse,
      'email' => $email
    ));
    echo '<br>';
    print_r($req->errorInfo());
    echo '<br>updated!';
}
catch(PDOException $e)
{
  echo 'Erreur : ' . $e->getMessage();
}

?>

Angular Controller code : 

// Controller profil
.controller('profilCtrl', function (user, $http, $state) {
  var vm = this;
  vm.user = user.getUserConnected();
  vm.update = update;

  function update(){

    var data = {telephone: this.telephone, adresse: this.adresse, email: this.email}
    $http({
        method: 'POST',
        url: 'http://mytpm.reaco.work/update.php',
        data: data,
        headers: {'Content-Type': 'application/json'}
    })
    .then(function(response){
      vm.data = response.data;
      vm.status = response.statusText;
      console.log('STATUS ' + vm.status);
      console.log('data ' + vm.data);
      $state.go('profil');
    }, function(error) {
        vm.data = response.data;
        vm.status = response.statusText;
        vm.errorMessage = 'ERROR';
      })
  };
  console.log(vm.user.prenom);
})

My form : 

  <form name="form" ng-submit="vm.update()" novalidate>

    <label class="item item-input noborder">
      <span class="input-label"><strong>Email:</strong></span>
      <input type="email" name="email" ng-model="vm.email" placeholder="{{vm.user.email}}">
    </label>

    <label class="item item-input noborder">
      <span class="input-label"><strong>Téléphone:</strong></span>
      <input type="number" name="telephone" ng-model="vm.telephone" placeholder="{{vm.user.telephone}}">
    </label>

    <label class="item item-input noborder">
      <span class="input-label"><strong>Adresse:</strong></span>
      <input type="text" name="adresse" ng-model="vm.adresse" placeholder="{{vm.user.adresse}}">
    </label>

  <div class="item noborder">
    <button class="button button-block button-positive" type="submit">Mettre à jour mes informations</button>
  </div>
  </div>
</form>

Any help is welcome ! Im not sure if Im going in the right direction...

DevMoutarde
  • 599
  • 7
  • 21
  • Well, I read that if I plan to update some values but I don't want to override the unique keys, I should rather use INSERT INTO *** ON DUPLICATE KEY UPDATE more than UPDATE (see http://stackoverflow.com/questions/4205181/insert-into-a-mysql-table-or-update-if-exists ) – DevMoutarde Mar 06 '17 at 11:14

2 Answers2

0

I think you need to show your angular code. But generally you can Use binding in placeholder.

in your controller define initial data which is your form data.

var vm = this;
vm.myData = {
    email : 'test@test.com', //default value is test@test.com
    x : null, //x has no default value
    y : null, //y has no default value
    age : 25 //default value is 25
}

Then use it in your html

<input placeholder = "{{vm.myData.email}}" ng-model="{{vm.myData.email}}"/>
hurricane
  • 6,521
  • 2
  • 34
  • 44
  • Im adding my controller code ! Well getting my values into placeholder is NOT the problem, its more about retrieving that placeholder values in my php file ! :D – DevMoutarde Mar 06 '17 at 11:23
  • @DevMoutarde OK. If you send vm.myData to your service placeholder data will be sent too. I mean if you are using angular you need to use $http. It is angular way. – hurricane Mar 06 '17 at 11:26
  • Ok, good to know ! But how can I specify that I want to use it instead of other data? Because when I m trying right now, it says 'field *** cannot be null' since it doesn't detect my data in the placeholder, what am I missing? Im confused :D – DevMoutarde Mar 06 '17 at 11:28
  • @DevMoutarde You can delete required attr for that input. And you can add a control function before $http which is check email data and you need to tell user "Your email adress is empty, we will use 'test@test.com' for information. Do you agree?". Your controll function also need to check if email exist. – hurricane Mar 06 '17 at 11:34
  • Yeah right I forgot to remove the required attribute for this form.. Ok I see, but to be honest I was looking for something simpler. Im having a hard time explaining what I really want I guess. I just want to know how can I use the data in my placeholder... (btw, checking email is not needed because the mail has to exist (its required in the signup part)). What I want to know is : how to tell my http request that I wanna use those placeholder values if nothing is specified... It looks like the controller doesn't recognize those values as parameters... Sorry I try my best to explain aha.. – DevMoutarde Mar 06 '17 at 12:04
0

Ok I've got it ! It was dead simple actually... I was using for example vm.telephone as my placeholder and ng.model and it was actually displayed as a standard placeholder with grey characters and a smaller typo.
I actually need to use vm.user.number (since Im using a user.service, can't go too deep into explanations here without it being complicated) as my placeholder to actually display the placeholder as input text !
Like this : ng-model="vm.user.telephone" placeholder="{{vm.user.telephone}}
And now my data is displayed and interpreted as real data so when I click on submit only the data I modified is actually sent to my DB. (Also, Im setting all my variables to null by default in my DB for the update to work).

DevMoutarde
  • 599
  • 7
  • 21