There is a form:

<!DOCTYPE html> <html> <head> <title>FE-Course. Part 3 | Registration form</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <header class="container"> <h1 class="text-center">Registration form</h1> </header> <section class="container"> <form name="registration" class="form-horizontal" data-toggle="validator"> <div class="form-group required"> <legend class="col-sm-12">Registration info</legend> <div class="col-sm-6"> <input type="text" class="form-control" id="name" placeholder="Full Name" required> </div> <div class="col-sm-6"> <input type="text" class="form-control" id="login" placeholder="Login" required> </div> </div> <div class="form-group"> <div class="col-sm-6"> <input type="email" class="form-control" id="email1" placeholder="Email" required> </div> <div class="col-sm-6"> <input type="email" class="form-control" id="email2" placeholder="Confirm Email" required> </div> </div> <div class="form-group"> <div class="col-sm-6"> <input type="password" class="form-control" id="password1" placeholder="Password" required> </div> <div class="col-sm-6"> <input type="password" class="form-control" id="password2" placeholder="Confirm Password" required> </div> </div> <fieldset> <legend>Address</legend> <div class="form-group"> <div class="col-sm-10"> <input type="text" class="form-control" id="city" placeholder="City" required> </div> <div class="col-sm-2"> <input type="text" class="form-control" id="zip" placeholder="ZIP Code"> </div> </div> <div class="form-group"> <div class="col-sm-5"> <select class="form-control" id="state" name="state"> <option value="_none">Select State</option> <option value="value1">State 1</option> <option value="value2">State 2</option> <option value="value3">State 3</option> </select> </div> <div class="col-sm-5"> <input type="text" class="form-control" id="street" placeholder="Street"> </div> <div class="col-sm-2"> <input type="text" class="form-control" id="building" placeholder="Building"> </div> </div> </fieldset> <fieldset> <legend>Your Hobbies</legend> <div class="form-group"> <div class="checkbox col-sm-3"> <label> <input type="checkbox"> Music </label> </div> <div class="checkbox col-sm-3"> <label> <input type="checkbox"> Cycling </label> </div> <div class="checkbox col-sm-3"> <label> <input type="checkbox"> Front End </label> </div> <div class="checkbox col-sm-3"> <label> <input type="checkbox"> Girls </label> </div> </div> </fieldset> <div class="form-group"> <div class="col-sm-12"> <legend>How did you hear about us?</legend> <select class="form-control" id="about"> <option value="_none">Select Please</option> <option value="value1">Google</option> <option value="value2">Friends</option> <option value="value3">Newspapers</option> </select> </div> </div> <button class="btn btn-primary btn-lg center-block" type="submit">Register Profile</button> </form> </section> <script src="jquery-2.1.3.min.js"></script> <script src="main.js"></script> </body>

using an ajax request, we get data from the server:

  $.ajax({ url: 'https://randomuser.me/api/', dataType: "json", success: function (data) { console.log(data); $('#name').val(data.id); $('#login').val(data.id); $('#email1').val(data.id); $('#email2').val(data.id); } });

And you need to dynamically select those keys that coincide with the fields of the form and fill out the form with them. I tried to prescribe it manually, but how to do it automatically (the code I wrote does not work for some reason). That at each new address to the server, the data were brought in the necessary fields. Advise who knows.

  • one
    Since the data you have come in the json format, you probably should turn it into a JavaScript object / array / value using the JSON.parse (data) function. - Visman
  • one
    learn.javascript.ru/json - Visman
  • one
    You have email1 and email2 fields, and json email data and confirm email. - Visman
  • one
    And maybe better instead of $ ('[name =' + key + ']', frm) .val (value); do this $ ('#' + key, frm) .val (value); Less expensive should be. - Visman
  • one
    What exactly is automatic? Data from ajax request to be automatically registered in the form? So for this, the function success is specified in your request: function (data) {...} - Visman

2 answers 2

It is necessary to check in what form the data comes from the server. For good they should come in json format, then before using them as values, you need to parse json. JSON.parse (data)

  • $ .parseJSON do not need to, because data immediately comes with the headline "json" - sagan

Well, so everything works fine:

 $(document).ready(function(){ var props = {}; $.ajax({ url: 'https://randomuser.me/api/', dataType: 'json', success: function(data){ console.log(data); var user = data.results[0].user, list = $('.form-control'); deepSearch(user); for (var i = 0, len = list.length; i < len; i += 1) { prop = props[ $(list[i]).attr('id') ]; if ( prop ) $(list[i]).val(prop); } } }); function deepSearch(node) { for (var elem in node) { if ( isObjectEmpty(node[elem]) ) { props[elem] = node[elem]; } else { deepSearch(node[elem]); } } } function isObjectEmpty(obj) { if (typeof obj !== 'object') return true; for (var key in obj) { return false; } return true; } });