Auto Fill input boxes on web app using Javascript

Question

I'm working on a web application that is supposed to use ajax to connect to a database and have basic CRUD functionality. Everything works fine except for the Update. On selection on a database entry I want it to prepopulate the input boxes with the existing data using javascript.

    $(document).ready(function() {
    $.ajax({
        url : '/animal',
        method : 'GET'
    }).then(function(animals) {
        for (var i = 0; i < animals.length; i++) {
            var animal = animals[i];
            var row = '<option value="' + animal.animalId + '">'
                        + animal.commonName
                        + '</option>';
            $("#animals").append(row);  
        }
    });
    $.ajax({
        url : '/food',
        method : 'GET'
    }).then(function(foods) {
        for (var i = 0; i < foods.length; i++) {
            var food = foods[i];
            var row = '<option value="' + food.foodId + '">'
                        + food.foodName
                        + '</option>';
            $("#foods").append(row);
        }
    });

$("#animals").change(function() {
    $.ajax({
        url : '/animal/' + $("#animals").val(),
        method : 'GET'
    }).then(function(task) {
        console.log($("#animals").val());
        $("#cName").val(animals.commonName);
        $("#sName").val(animals.sciName);
        $("#food").val(animals.foodId);
        $("#infoLink").val(animals.infoLink);
        });
    });
$("#submit").click(function() {
    var animal = {};
    animals.commonName = $("#cName").val();
    animals.sciName = $("#sName").val();
    animals.foodId = $("#food").val();
    animals.infoLink = $("#infoLink").val();

    $.ajax({
        url : '/animal/' + animals.animalId,
        method : 'PUT',
        data : JSON.stringify(animal),
        contentType : 'application/JSON'
    }).then(function() {
        window.location.href = "/animal/index";
        });
    });
});

that's the javascript I currently have, and I can't figure out what's wrong. any help is appreciated.

can you post a fiddle ? :)

Marko Mackic
– Marko Mackic

2016-01-09 19:51:45 +00:00
Commented Jan 9, 2016 at 19:51 — Marko Mackic
– Marko Mackic, Commented Jan 9, 2016 at 19:51

J. Titus · Accepted Answer · 2016-01-09 19:54:21Z

A couple issues I see:

var animal = {}; //You define "animal" here
animals.commonName = $("#cName").val(); //..but use "animals" here to populate the object
animals.sciName = $("#sName").val();
animals.foodId = $("#food").val();
animals.infoLink = $("#infoLink").val();

I suggest:

var animal = {
    commonName: $("#cName").val(),
    sciName: $("#sName").val(),
    foodId: $("#food").val(),
    infoLink: $("#infoLink").val()
};

And here

then(function(task) { //Your result is named "task"
    console.log($("#animals").val());
    $("#cName").val(animals.commonName); //..but you try to use "animals" which is going to be undefined
    $("#sName").val(animals.sciName);
    $("#food").val(animals.foodId);
    $("#infoLink").val(animals.infoLink);
    });
});

and to fix that either change task to animals, or change both variable names to something else.

Collectives™ on Stack Overflow

Auto Fill input boxes on web app using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related