Pre populate data from Ajax in html form

Question

This is my .html file

<!DOCTYPE html>
<html>
<head>

<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<link href="css/iconFont.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">

<script type= "text/javascript" src= "js/updateAgentForm.js"></script>

<title>Separate Product</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

<script type="text/javascript">

var a_id;
var uname;
var pwd;
var name;
var address;
var email;
var dob;

if (location.search) {
   a_id = location.search.substring(1);
  document.write(a_id);
}


$.ajax({
    type:'GET',
    url: "http://192.168.1.5:8080/SurveyApp3/getSingleAgent?a_id="+a_id,
    dataType: 'html',
    success:function(data, status){

        var newData= JSON.parse(data);

        uname= newData.username;
        this.pwd= newData.pwd;
        this.name= newData.name;
        this.address= newData.address;
        email= newData.emailId;
        this.dob= newData.dob;

        console.log(data);
        console.log(uname);
        console.log(this.pwd);
        console.log(this.name);
        console.log(this.address);
        console.log(email);
        console.log(this.dob);

        },
    error:function(xhr, status, errorThrown){

        console.log(xhr);
        console.log(status);
        console.log(errorThrown);
    }

});

</script>
</head>
<body class="metro">

<header class="bg-dark" data-load="header.html"></header>
<div class="container">
    <h2>
        AGENT UPDATE FORM
    </h2>
    <br><br>
        <div>
            <form>
                    <label>Name*</label>
                    <div class="input-control text" data-role="input-control">
                        <input id="name" type="text" placeholder="Enter name" value= "" required>
                    </div>
                    <label>10 digit Mobile number(To be used as Username)*</label>
                    <div class="input-control text" data-role="input-control">
                        <input id= "uname" type="text" placeholder="Enter username(mobile number)" value= "" autofocus required>
                    </div>
                    <label>Choose Password*</label>
                    <div class="input-control text" data-role="input-control">
                        <input id= "pwd1" type="password" placeholder="Enter password" value= "" required>
                    </div>
                    <label>Retype Password*</label>
                    <div class="input-control text" data-role="input-control">
                        <input id= "pwd2" type="password" placeholder="Retype password" value= "" required>
                    </div>
                    <label>Email Id*</label>
                    <div class="input-control text" data-role="input-control">
                        <input id= "email" type="text" placeholder="Enter email" value= "" required>
                    </div>

                    <label>Date of Birth(Enter as yyyy-mm-dd)*</label>
                    <div class="input-control text" data-role="input-control">
                        <input id= "dob" type="text" placeholder="Enter Dob" value= "" required>
                    </div>

                    <label>Permanent Address*</label>
                    <div class="input-control text" data-role="input-control">
                        <input id= "addr" type="text" placeholder="Enter Address" value= "" required>
                    </div>
                    <br>
                    <br>
                    <br>

                    <button class="button large primary" type="submit">Submit</button>

            </form>     
        </div>
        <div>
        <p id="invalid"></p>
        </div>
    </div>

<script type= "text/javascript">

$("#name").val(this.name);
$("#uname").val(uname);
$("#pwd1").val(pwd);
$("#pwd2").val(pwd);
$("#email").val(this.email);
$("#dob").val(this.dob);
$("#addr").val(address);
</script>
</body>
</html>

I need to pre populate the form with the extracted values from ajax request. console.log is printing the proper values of all variables. The problem I am not able to figure out is that the pre populating process is failing. Nothing gets filled inside the form.

I also tried using

$( document ).on("pageload", function(){});

and writing the code inside it. But nothing seems to work. Where am I going wrong?

Answer 1

此处仅需注意，如果期望ajax调用中包含json，则应使用数据类型'JSON'。

Pre populate data from Ajax in html form

Question

1 answers

solution1
0 2014-08-05 17:11:28

Pre populate data from Ajax in html form

Question

1 answers

solution1 0 2014-08-05 17:11:28

solution1
0 2014-08-05 17:11:28