Insert a variable from JS to Django form input field

Question

I am writing a form that pays an employee's mileage between two cities. I am using the Google Maps API to get the information. I am running a script that yields a variable drivingDistanceMiles. I would like to populate the field in my Django form mileage, which saves to a python variable distance.

Here is a snippet of my form html:

<form action="" method="post"><% csrf_token %}
{{  form.non_field_errors  }}
<div class="fieldWrapper">
    {{  form.distance.errors  }}
    <label for="id_distance">Mileage claim:</label>
    {{  form.distance  }}
</div>

There is a distance calculator on the page just above the entry.

In my forms.py distance = forms.CharField(max_length=20, required = False). I made this a CharField instead of an IntField in case my employees (not the most computer savvy bunch) add the word 'miles' at the end.

THE QUESTION: Is it possible to get the value of drivingDistanceMiles to auto-populate when the user enters their city info into the distance calculator?

Here is the HTML for the tag I want to adjust: <div class="fieldWrapper"> <label for="id_distance">Mileage claim:</label> <input id="id_distance" type="text" name="distance" maxlength="20" /> </div> — Brandon Dorris
– Brandon Dorris, Commented Jul 20, 2012 at 15:56

Maqsood · Accepted Answer · 2012-07-19 22:09:40Z

6

If you're using plain javascript (not jQuery or any frameworks) you can access the field by document.getElementById('id_distance').value. You can set it's value by document.getElementById('id_distance').value = <some_var>;

answered Jul 19, 2012 at 22:09

Maqsood

4886 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Brandon Dorris Over a year ago

At the end of my javascript I added document.getElementId('id_distance').value = drivingDistanceMiles and it just reloads the form. I am using Django frameworks/templating language for the HTML generation. I have set the distance calculator on the same page but in its own form tag to prevent the Django form from attempting to post on clicking the calculate button. Therefore the output field (id_distance) is in a different form than the distance calculator. Does this matter?

Maqsood Over a year ago

How are you calculating the drivingDistanceMiles? You could add this line at the end of the calculating function and it should update the id_distance field whenever drivingDistanceMiles is updated. Adding more HTML could help answering the question. Can you post the whole form (including the part that has the city input)?

Brandon Dorris Over a year ago

pastebin.com/KtHYEYLD for the raw source (before template tags are rendered via Django)

Brandon Dorris Over a year ago

pastebin.com/YxcJrKF6 for rendered HTML. To reduce the size of the post I removed some of the other form fields and the head. Let me know if you need any of that data.

Maqsood Over a year ago

At the end of the first comment getElementId is misspelled, it's getElementById. All you should need to do is document.getElementById('id_distance').value = drivingDistanceMiles at the end of the showLocation function. If you are still having issues you can use jsFiddle and copy in the generated html and javascript and I can take a look at it.

|

Collectives™ on Stack Overflow

Insert a variable from JS to Django form input field

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related