JSで取り出したデータをFormに入れたい

JSのデータをFormに入れたいです。
index.htmlには

 {% load staticfiles %}
        <html lang="ja">
          <head>
            <meta charset="utf-8">
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
            <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
          </head>
          <body>
        
          <main>
        
            <form class="form-horizontal" action="/accounts/regist_save/" method="POST">                          
                                  
                <label for="id_email">Email</label>
                              {{ regist_form.email }}                                  
     
        
              {% include 'registration/sex.html' %}
        
        
                <button type="submit" class="regist">REGIST</button>             
                <input name="next" type="hidden"/>             
        
              {% csrf_token %}             
            </form>             
        
          </main>
        
          </body>
        </html>

と書き、forms.pyには

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.forms import AuthenticationForm
from .models import User
from .models import NewUser

class RegisterForm(UserCreationForm):
    class Meta:
        model = User
        fields = ('email',)
    def __init__(self, *args, **kwargs):
        super(RegisterForm, self).__init__(*args, **kwargs)
        self.fields['email'].widget.attrs['class'] = 'form-control'

class ProfileForm(forms.ModelForm):
    class Meta:
        model = NewUser
        fields = (
             "sex"
        )

と書き、
models.pyには

#coding:utf-8
from django.db import models
from django.contrib.auth.models import User

class NewUser(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    sex = models.CharField(max_length=100,null=True, blank=True, default=None)

と書き、
sex.htmlには

<form class="form-horizontal" method="post" action="#">
        <div class="form-group-lg">
        <label for="sex">SEX</label>         
        <select class="form-control sex" name="sex">
        <option value="">--</option>
        <option value="male">MAN</option>
        <option value="female">FEMALE</option>
        </select>
        </div>                  
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        function showSex() {
            var num = document.forms[0].sex.selectedIndex;
            var sex = document.forms[0].sex.options[num].value;
            console.log(sex);
        }
    
        document.addEventListener("DOMContentLoaded", showSex);
        for (var i = 0, e = document.querySelectorAll(".form-horizontal select"); i < e.length; i++) {
            e[i].addEventListener("change", showSex);
        }
    </script>

と書きました。
今index.htmlのREGISTボタンが押せません。sex.htmlで選択したvalue（maleもしくはfemale）が

 var sex

で取得できますが、それをmodels.pyの

sex = models.CharField(max_length=100,null=True, blank=True, default=None)

に入れたいです。今JSを使ってvalueの値を取得するところまではできていますが、その値をPythonのProfileFormを経由してモデルのsexカラムに入れる方法がわかりません。そもそもそれは可能なのでしょうか？どのように書けば、何を使えばそれが実現できますか？

Lhankor_Mhy

2017/12/07 02:22

JSONはどこに使っているんですか？

退会済みユーザー

2017/12/07 02:53

すみません、JSONではなくJSのまちがいでした

Lhankor_Mhy

2017/12/07 05:44

『index.htmlのREGISTボタンが押せません。』とありますが、「押せない」とは具体的にはどのような現象ですか？ボタンがグレーアウトしているのでしょうか？　それとも、ボタンを押すとエラーになるのでしょうか？

退会済みユーザー

2017/12/07 06:31

ボタンを押すとエラーになるのではなく、グレーアウトしている状態です。グレーになっている（ボタンの色が変わっている）わけではなく、必須項目を入力しないとボタンが押せない構造になっていて今はそのような状態です

Lhankor_Mhy

2017/12/07 06:35

Required になっていないような気もしますが……　では、必須項目を入力すればボタンを押せるのですね？

退会済みユーザー

2017/12/07 07:15

はい、そのようであるはずです

Lhankor_Mhy

2017/12/07 08:50

試していないのですか？　なぜ試さないのでしょう？　試していないのになぜフォームの値がモデルに入らないとわかったのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

テンプレートファイルを見る限り、このようなHTMLになるはずです。

HTML
1<form class="form-horizontal" action="/accounts/regist_save/" method="POST"> 
2
3<!-- ... -->
4
5  <form class="form-horizontal" method="post" action="#">
6    <div class="form-group-lg">
7      <label for="sex">SEX</label> 
8      <select class="form-control sex" name="sex">
9        <option value="">--</option>
10        <option value="male">MAN</option>
11        <option value="female">FEMALE</option>
12      </select>
13    </div>          
14  </form>
15
16  <button type="submit" class="regist">REGIST</button> 
17
18<!-- ... -->
19
20</form>

form要素が入れ子になっています。
これは許されていませんから、ブラウザはこのように解釈します。

HTML
1<form class="form-horizontal" action="/accounts/regist_save/" method="POST">
2</form>
3
4<!-- ... -->
5
6<form class="form-horizontal" method="post" action="#">
7  <div class="form-group-lg">
8    <label for="sex">SEX</label> 
9    <select class="form-control sex" name="sex">
10      <option value="">--</option>
11      <option value="male">MAN</option>
12      <option value="female">FEMALE</option>
13    </select>
14  </div>          
15</form>
16
17<button type="submit" class="regist">REGIST</button> 
18
19<!-- ... -->
20