How to get django form value in javascript without saving it into model

Question

I created a django form and I need not to save those values in my database. But I don't know how to access those form values in javascript.

balance.html

<script>
$(document).ready(function () {
    $('.dateinput').datepicker();
    var a = document.getElementsById("{{ form.start_date }}").val;
    alert(a);
});
</script>   

<div>
    <form action="" method="POST">{% csrf_token %} Start Date: {{ form.start_date }}&nbsp;&nbsp; End Date:{{ form.end_date }}
        <br/>
        <input type="submit" name="submit" value="See Results" id="tryonce">
    </form>
</div>

But I can't get the result. How those form value can be retrieve in javascript ?

Jayaram · Accepted Answer · 2013-12-20 11:26:35Z

11

The {{ form.start_date }} expands to:

<input id="id_start_date" type="something">

You can always right-click and inspect the element in most of the modern browsers.

So use:

var a = document.getElementsById("id_start_date").val;

I suggest you use the jQuery version:

var a = $("#id_start_date").val();

edited Dec 20, 2013 at 11:26

answered Dec 20, 2013 at 11:19

Jayaram

7602 gold badges9 silver badges22 bronze badges

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

Comments

Aks · Accepted Answer · 2013-12-20 12:40:37Z

2

try this also if you want to directly get values

var start_date="{{ form.data.start_date }}"

answered Dec 20, 2013 at 12:40

Aks

1,2329 silver badges7 bronze badges

Comments

Aamir Rind · Accepted Answer · 2013-12-20 11:19:33Z

1

The form is rendered automatically as valid html. You can access form fields by their id using the prefix id_field_name. So start_date field has id id_start_date:

var a = document.getElementsById("id_start_date").val;

You should read documentation on form rendering here

answered Dec 20, 2013 at 11:19

Aamir Rind

39.8k24 gold badges131 silver badges169 bronze badges

Collectives™ on Stack Overflow

How to get django form value in javascript without saving it into model

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related