How pass javascript function 's value to Django view?

Question

In template I have some code like this:

<div id="form">
        <form name="myForm"  action="Http://localhost:8000/student/student_add_course/" onclick="return addTable();" method="post">
        {% csrf_token %}
        {{ form.non_field_errors }}
                <div id="form-data">
                {{ form.course_id }}{{ form.course_id.errors }}
                <label for="id_course_id">:Course Id number:</label><br>

                {{ form.score }}{{ form.score.errors }}
                <label for="id_score">Course score:</label><br>
               <p><input type="button" value="add" /></p>
                <p><input type="submit" value="submit" /></p>
                </div>
        </form>
    </div>

    <div id="table">
    <table id="TABLE" border = '1'>
    <tr>
        <th>id number</th>
        <th>score</th>
    </tr>
    <tr>
        <td id="id_number"></td>
        <td id="score"></td>
    </tr>

and this is "script" part:

<script type="text/javascript">
    var stock = new Array();
    var i = 0;

    function addTable() {

        var id = document.forms["myForm"]["course_id"].value;
        var score = document.forms["myForm"]["score"].value;

        stock[i] = new Array(id, score);

        //Get the table that shows the selected course from html code
        var table = document.getElementById('TABLE');

        //Add id and score to row of the table which is inside the html code.
        if (document.getElementById("id_number").innerHTML=="" || document.getElementById("score").innerHTML=="")
            {document.getElementById("id_number").innerHTML=id;
            document.getElementById("score").innerHTML=score;}

        //Create table row and append it to end of above table
        else{var tr = document.createElement('TR');
            for (j = 0; j < 2; j++) {
                var td = document.createElement('TD')
                td.appendChild(document.createTextNode(stock[i][j]));
                tr.appendChild(td)
                }
            table.appendChild(tr);
            }

        i=i+1;
        return stock;
    }

</script>

I want to add some new courses for selected student and for doing it, I create form which get course idnumber and course score.At first, when I fill form, javascript create table when I click on "add" button and I can add many courses then when I should submit it to do other step in view part and save all course in database. Ihave some problem I'm be happy if some one help me.

1)How to send "stock" array (which is global array in javaScript and including all of the course in created table) to Django view?

2)How clean form after press "add" button?

I'm so sorry for my bad english.

try http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp or jqery ajax http://api.jquery.com/jquery.ajax/ — madzohan, Nov 24 '14 at 09:01
Use AJAX! More information here: http://stackoverflow.com/questions/20306981/how-do-i-integrate-ajax-with-django-applications — seddonym, Nov 24 '14 at 09:09

score 3 · Accepted Answer · edited May 23 '17 at 12:24

Hi the trick to sending data back is to send POST request back to the server.

Im going to use JQuery as an example to do so (since it is so much faster and easier)

$.ajax({
    // points to the url where your data will be posted
    url:'/postendpoint/$',
    // post for security reason
    type: "POST",
    // data that you will like to return 
    data: {stock : stock},
    // what to do when the call is success 
    success:function(response){},
    // what to do when the call is complete ( you can right your clean from code here)
    complete:function(){},
    // what to do when there is an error
    error:function (xhr, textStatus, thrownError){}
});

Then you will have to adjust your apps' urls.py to match your postendpoint and point it to the correct view for instance

##urls.py
urlpatterns = [
    url(r'^postendpoint/$', views.YourViewsHere),
    ....
]

and finally your in your views you can access the post data like this

##views.py
def YourViewsHere(request):
   if request.method == 'GET':
       do_something()
   elif request.method == 'POST':
       ## access you data by playing around with the request.POST object
       request.POST.get('data')

as you can request is a python object there are many attributes and methods that you can look at.

For more info look at

1) Django request-response https://docs.djangoproject.com/en/1.7/ref/request-response/ 2) Django Ajax exmple :How do I integrate Ajax with Django applications?

Note that you will have to play around with the code that I gave you. I think it will be the best way to learn from there.

I hope you find this useful

Thanks alot for your answer,I think it's helpful but I don't know JQuery and at first, I think I have to learn it:) Thank you. — user3789719, Nov 24 '14 at 10:52
Could you accept my answer as the correct answer anyway ? Cheers =) — biobirdman, Nov 24 '14 at 10:53
You can choose not to use JQuery and use vanilla javascript for the post call but the concept is the same. remember to add data into your request in the javascript and access your data from in django by accessing the request object — biobirdman, Nov 24 '14 at 10:54

How pass javascript function 's value to Django view?

1 Answers1

Linked