当用户输入值时,从json文件填充表单字段

时间:2015-03-22 13:59:27

标签: javascript jquery html json

我想从json数组中获取银行名称,分支,城市和区域

enter image description here

这是我的results.json文件

    {
    "ifsc": [{
            "ifsc": "PUNB0000100",
            "bank": "PUNJAB NATIONAL BANK",
            "city": "ABOHAR",
            "branch": "ABOHAR MAIN",
            "district": "FEROZEPUR "
        }]
}

3 个答案:

答案 0 :(得分:0)

以下内容适用于您:



var object = {
    "ifsc": [{
        "ifsc": "PUNB0000100",
            "bank": "PUNJAB NATIONAL BANK",
            "city": "ABOHAR",
            "branch": "ABOHAR MAIN",
            "district": "FEROZEPUR "
    }]
}
$('.fillMe:eq(0)').val( object.ifsc[0].ifsc );
$('.fillMe:eq(1)').val( object.ifsc[0].bank );
$('.fillMe:eq(2)').val( object.ifsc[0].city );
$('.fillMe:eq(3)').val( object.ifsc[0].branch );
$('.fillMe:eq(4)').val( object.ifsc[0].district );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="fillMe" value=""/><br>
<input class="fillMe" value=""/><br>
<input class="fillMe" value=""/><br>
<input class="fillMe" value=""/><br>
<input class="fillMe" value=""/>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这是我的results.json文件

{
    "PUNB0000100": {
        "bank": "PUNJAB NATIONAL BANK",
        "city": "ABOHAR",
        "branch": "ABOHAR MAIN",
        "district": "FEROZEPUR "
    },
    "PUNB0000200": {
        "bank": "PUNJAB NATIONAL BANK",
        "city": "SIROHI",
        "branch": "ABU ROAD",
        "district": "SIROHI"
    }
}

这是我的javascript代码

<script type="text/javascript">        
    $("document").ready(function(){

            $(function () {
            $.getJSON('results.json')
              .done(function (data) {
              var ents={list:data};


            $("#ifsc2").blur(function(){
                var ifsc1 = $('#ifsc1').val();
                //console.log(ents.list[ifsc2].city);
                $('#branch_name').val(ents.list[ifsc2].branch)
                $('#branch_address').val(ents.list[ifsc2].district)
             });

        });
           }); //end of $(function)
    });//end of ready
    </script>

答案 2 :(得分:0)

请查看以下示例代码,在输入IFSC代码后,onblur数据将填充在他们尊重的字段中。

var bankdata = {
    "ifsc": [
        {
            "ifsc": "PUNB0000100",
            "bank": "PUNJAB NATIONAL BANK",
            "city": "ABOHAR",
            "branch": "ABOHAR MAIN",
            "district": "FEROZEPUR "
        },
        {
            "ifsc": "HDFC0000101",
            "bank": "HDFC BANK",
            "city": "Hyd",
            "branch": "HYD MAIN",
            "district": "RR"
        }
    ]
}
$(document).ready(function(){
    $('#Ifsc').on('blur',function(){
        var Filter = [];
    var reqIfsc = $(this).val().toUpperCase();
        $.each(bankdata.ifsc,function(index,val){
            console.log(val.ifsc);
            if(val.ifsc == reqIfsc)
            {
                $('#Bankname').val(val.bank);
                $('#Branch').val(val.branch);
                $('#BranchAddress').val(val.city+","+val.district);
            }else{
                $('#Bankname').val('');
                $('#Branch').val('');
                $('#BranchAddress').val('');
            }
        })        
        
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div>
    <label>* IFSC</label>
    <input type="text" id="ifsc"/>
    </div>
    <div>
    <label>* Bank Name</label>
    <input type="text" id="ifsc"/>
    </div>
    <div>
    <label>* Conform IFSC Code</label>
    <input type="text" id="ifsc"/>
    </div>
    <div>
    <label>* Branch</label>
    <input type="text" id="ifsc"/>
    </div>
    <div>
    <label>* Branch Address</label>
    <input type="text" id="ifsc"/>
    </div>
     <div>
    <label>* Transaction Id</label>
    <input type="text" id="ifsc"/>
    </div>
     <div>
    <label>* Conform Transaction Id</label>
    <input type="text" id="ifsc"/>
    </div>
    
</form>