How to update/populate multiple input fields with ajax callback?

Question

The code that I have below works. I just need to populate the input fields to update the values once the ajax call is completed. However, I don't know the ajax success function to callback the php variable ($first, $last, etc.) to populate those input fields. Thanks in advance!

HTML:

<div class="field-wrap">
  <input id="first" class="form-control" name="first" value="<?php echo $first ?>"/>
  <input id="last" class="form-control" name="last" value="<?php echo $last ?>"/>
  <input id="title" class="form-control" name="title" value="<?php echo $title ?>"/>
  <input id="user_input" class="form-control" name="user_input" type="text"/>
</div>

Script:

<script type="text/javascript">
  $(document).ready(function(){
    $('#user_input').on('change',function(){
      var input_user = $(this).val();
      if(input_user){
        $.ajax({
          type:'POST',
          url:'ajax.php',
          data:{user_input:user_input},
          success: function(){
          ???WHAT DO I NEED TO PUT HERE TO POPULATE THE INPUT FIELDS WITH DATA
          }
        }
      }
    });
  });
</script>

PHP:

$user_input = $_POST['user_input'];
$query_sql = $DB_CON_A->prepare("SELECT * FROM table_account WHERE account=:user_input");
$query_sql->bindValue(':user_input', $user_input, PDO::PARAM_STR);
$query_sql->execute();
$user = $query_sql->fetch(PDO::FETCH_ASSOC);
$first = $user['first_name'];
$last = $user['last_name'];
$title = $user['title'];

Rasclatt · Accepted Answer · 2017-07-17 03:30:04Z

2

In your php, you will probably just want to echo a json object/array:

die(json_encode($user));

In your ajax success, just parse the encoded json string:

success: function(response){
    var data = JSON.parse(response);
    $('#first').val(data.first_name);
    $('#last').val(data.last_name);
    $('#title').val(data.title);
}

I would probably change your input field names to match the returned columns from the database (like you have for title), that way you can use $.each() and easily auto-poulate any amount of matching input names without having to specifically use an idattribute on your form fields. You could use $('input[name='+key+']').val(value); in a loop IF the column names match the form names.

Also, make sure you are sending back html-safe strings. If user has saved <script>doSomething(nasty)</script> or similar, you could be putting malicious code into your html. I would maybe use htmlspecialchars($value,ENT_QUOTES) for your values on the return. Depends what is in your database for first_name, last_name, and title.

edited Jul 17, 2017 at 3:30

answered Jul 17, 2017 at 3:26

Rasclatt

12.5k3 gold badges28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

javystar Over a year ago

Thanks. Will try. Should I use echo(json_encode($user)) or die(json_encode($user)) ?

Rasclatt Over a year ago

I would use die() so there is no output after that. It may malform the json back to the ajax. It's safer to die().

javystar Over a year ago

Works like a charm. Thank you!!

javystar Over a year ago

Thanks for the tip. Will make adjustment to the code accordingly. BTW, if I want to pass the variables/values to angularjs, how should I do it?

Rasclatt Over a year ago

Unfortunately I have no experience with angularjs, so I can't help you there!! Sorry.

JimmyLOL · Accepted Answer · 2017-07-17 03:36:54Z

0

Firstly, your ajax.php should return true or false if return true, it will pass to ajax.success, otherwise, it will pass to ajax.error

In your ajax.success, you should doing something that response(Submission Successful) maybe alert, maybe redirect to other page. Here is a example:

success: function(){
   alert('Submission Successful!! ');
}

answered Jul 17, 2017 at 3:36

JimmyLOL

472 bronze badges

Collectives™ on Stack Overflow

How to update/populate multiple input fields with ajax callback?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related