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.

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.

• javascript
• python
• django

Share Improve this question Follow edited Nov 24, 2014 at 9:00 user3789719 asked Nov 24, 2014 at 8:44 user3789719user3789719 10411 silver badge1010 bronze badges 2

• try w3schools./ajax/ajax_xmlhttprequest_send.asp or jqery ajax api.jquery./jquery.ajax – madzohan Commented Nov 24, 2014 at 9:01
• Use AJAX! More information here: stackoverflow./questions/20306981/… – seddonym Commented Nov 24, 2014 at 9:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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 plete ( you can right your clean from code here)
    plete: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./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