Question

我对AJAX或jQuery没有多少经验。我想在注册时收集用户的地址（地址，城市，州和邮编）。我有一个Django Form，其中包含所有这四个字段。地址字段通过Google Maps API和django-address（https://github.com/furious-luke/django-address）自动填充有效的美国地址。如果我想拿这个地址和现场填写说，城市领域，我该怎么做呢？我已经尝试了一百万种不同的解决方案而没有运气。

models.py

class user_profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    address = AddressField()
    city = models.CharField(max_length=200)
    state = models.CharField(max_length=200)
    zip = models.CharField(max_length=200)

forms.py

from address.forms import AddressField
from localflavor.us.us_states import US_STATES
from localflavor.us.forms import USStateField
from localflavor.us.forms import USStateSelect

...

class ProfileForm(forms.ModelForm):
    address = AddressField()
    city = forms.CharField(widget=forms.TextInput(attrs={'placeholder':'City'}))
    state = USStateField(widget=forms.Select(choices=US_STATES))
    state = forms.CharField(widget=USStateSelect())
    zip = forms.CharField(widget=forms.TextInput(attrs={'placeholder': ZIP code'}))

    class Meta:
        model = user_profile
        fields = ['address', 'city', 'state', 'zip']

模板

 <div class="row">
    <div class="col-sm-12 col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <h3>Register for an Account</h3>
                {% if error_message %}
                    <p><strong>{{ error_message }}</strong></p>
                {% endif %}
                <form class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <head>{{ form.media }} </head>
                    {% for field in profileform %}
                    {{ profileform.media }}
                        <div class="form-group">
                           <div class="col-sm-offset-2 col-sm-10">
                               <span class="text-danger small">{{ field.errors }}</span>
                           </div>
                           <div class="col-sm-10">{{ field }}</div>
                       </div>
                    {% endfor %}
                    {% csrf_token %}
                    <div class="form-group">
                        <div class=" col-sm-10">
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="panel-footer">
                Already have an account? <a href="{% url 'user_profile:login_user' %}">Click here</a> to log in.
            </div>
        </div>
    </div>
</div>

address.js

$(function(){
    $('input.address').each(function(){
        var self = $(this);
        var cmps = $('#' + self.attr('name') + '_components');
        var fmtd = $('input[name="' + self.attr('name') + '_formatted"]'); 
        document.getElementsByName('address')[0].placeholder='Residential address';
        self.geocomplete({
            details: cmps,
            detailsAttribute: 'data-geo'
        }).change(function(){
            if(self.val() != fmtd.val()) {
                var cmp_names = ['country', 'country_code', 'locality', 'postal_code',
                'route', 'street_number', 'state', 'state_code',
                'formatted', 'latitude', 'longitude'];
                for(var ii = 0; ii < cmp_names.length; ++ii){
                    $('input[name="' + self.attr('name') + '_' + cmp_names[ii] + '"]').val('');
                };
            };
        });
    });
});

根据带有ajax的另一个字段的输入自动填充django表单字段

0 个答案: