0

This code populates a form from an API.

$('#shipper_search').click(function(){

    var searchBy = $('#shipper_search_by').val();
    var searchFor = $('#shipper_search_for').val();
    var warehouse = $('#warehouse').val();

    $.get('index.php?p=api&r=json&c=location&m=find&d=' + searchBy + '/' + searchFor + '/shipper/' + warehouse  , function(data, status){

        data = $.parseJSON(data);

        $('#shipper_name').val(data['body'][0]['location_name']);
        $('#shipper_address1').val(data['body'][0]['address1']);
        $('#shipper_address2').val(data['body'][0]['address2']);
        $('#shipper_city').val(data['body'][0]['city']);
        $('#shipper_state').val(data['body'][0]['state']);
        $('#shipper_zip').val(data['body'][0]['zip']);
        $('#shipper_country').val(data['body'][0]['country']);

        $('#shipper_contact_name').val(data['body'][0]['contact_name']);
        $('#shipper_contact_phone').val(data['body'][0]['phone']);
        $('#shipper_contact_fax').val(data['body'][0]['fax']);
        $('#shipper_contact_email').val(data['body'][0]['email']);

    });

});

Each time a field changes in that section the following code is supposed to run:

$('#shipperinfo').find('input:text').change(function(){

    var valid = 0;

    if($('#shipper_name').val().length > 0){
        valid++;
    }

    if($('#shipper_address1').val().length > 0){
        valid++;
    }

    if($('#shipper_city').val().length > 0){
        valid++;
    }

    if($('#shipper_state').val().length > 0){
        valid++;
    }

    if($('#shipper_zip').val().length > 0){
        valid++;
    }

    if($('#shipper_country').val().length > 0){
        valid++;
    }

    if(valid == 6) {

        $('#shipper_ok').removeClass('hide');

    } else {

        $('#shipper_ok').addClass('hide');

    }

});

When a user manually types the information into the field, the second function works perfectly. When, however, they use the search feature to populate the form the .change() doesn't seem to happen.

I've been searching for an age as to why, and I'm relatively new (~4 days) to jQuery/JS so I'm not sure how to begin to resolve this. Any suggestions or ideas are appreciated.

4

2 回答 2

3

当 JavaScript 更新字段时不会触发 change()。

最简单的解决方案是让元素之一触发更改方法

$('#shipper_contact_email').val(data['body'][0]['email']).trigger("change");

或者

$('#shipper_contact_email').val(data['body'][0]['email']).change();
于 2013-02-06T16:35:46.750 回答
0

change does not work if you change its value dynamically, you have to do it manually.

i would do it like this.

$('#shipper_search').click(function(){

var searchBy = $('#shipper_search_by').val();
var searchFor = $('#shipper_search_for').val();
var warehouse = $('#warehouse').val();

$.get('index.php?p=api&r=json&c=location&m=find&d=' + searchBy + '/' + searchFor + '/shipper/' + warehouse  , function(data, status){

    data = $.parseJSON(data);

    $('#shipper_name').val(data['body'][0]['location_name']);
    $('#shipper_address1').val(data['body'][0]['address1']);
    $('#shipper_address2').val(data['body'][0]['address2']);
    $('#shipper_city').val(data['body'][0]['city']);
    $('#shipper_state').val(data['body'][0]['state']);
    $('#shipper_zip').val(data['body'][0]['zip']);
    $('#shipper_country').val(data['body'][0]['country']);

    $('#shipper_contact_name').val(data['body'][0]['contact_name']);
    $('#shipper_contact_phone').val(data['body'][0]['phone']);
    $('#shipper_contact_fax').val(data['body'][0]['fax']);
    $('#shipper_contact_email').val(data['body'][0]['email']);

    //here what i call it manually
    $('#shipperinfo').find('input:text').change();

});

});

and bind that function to that event.

function change_callback()
 {
    var valid = 0;

    if($('#shipper_name').val().length > 0){
        valid++;
    }

    if($('#shipper_address1').val().length > 0){
        valid++;
    }

    if($('#shipper_city').val().length > 0){
        valid++;
    }

    if($('#shipper_state').val().length > 0){
        valid++;
    }

    if($('#shipper_zip').val().length > 0){
        valid++;
    }

    if($('#shipper_country').val().length > 0){
        valid++;
    }

    if(valid == 6) {

        $('#shipper_ok').removeClass('hide');

    } else {

        $('#shipper_ok').addClass('hide');

    }

}

$('#shipperinfo').find('input:text').on('change', change_callback);

try it and let me know if this work for you.

于 2013-02-06T16:43:29.267 回答