Uncaught TypeError: Cannot read property 'split' of undefined(anonymous function)
<p>I'm not sure why I'm getting this error, I'm simply trying to move the form that was working in index page to post page. I simply moved the form but not working; Uncaught TypeError: Cannot read property 'split' of undefined(anonymous function) for some reason. </p>

<pre><code>            &lt;div&gt;

        {% crispy comment_form comment_form.helper %}

                &lt;/div&gt;

&lt;script&gt;
$(document).ready(function() {


     $(document).on('submit', 'form', function(e){
      e.preventDefault();
      if($(this).parents("tr").length != 0) {
        parent_id = $(this).parents("tr").attr("id").split("_")[1];
        data_str = $(this).serialize() + "&amp;parent_id=" + parent_id;
      } else {
        data_str = $(this).serialize();
      }
      $.ajax({
        type:'POST',
        url:'/comment/create/',  // make sure , you are calling currect url
        data:data_str,
        success:function(json){              
          alert(json.message); 
          if(json.status==200){
             var comment = json.comment.trim();
             var user = json.user;
             /// set `comment` and `user` using jquery to some element
              if(!json.parent) {
                $(comment).insertBefore('.table tr:first');
              }
              else {
                $(comment).insertBefore('#comment_' + json.parent_id + ' #child_comment:first');
                $(".replies").text("reply" + json.comment_count + "see");
              }
           }  

        },
        error:function(response){
          alert("some error occured. see console for detail");
        }
      });
    });
</code></pre>

<p>my form</p>

<pre><code>class CommentForm(forms.Form):
    comment = forms.CharField(
        widget=forms.Textarea(attrs={"placeholder": "leave"})
    )
    #hidden_field = forms.CharField(widget=forms.HiddenInput())

    def __init__(self, hidden_data=None, data=None, files=None, **kwargs):
        super(CommentForm, self).__init__(data, files, kwargs)
        self.helper = FormHelper()
        self.helper.form_show_labels = False
        self.helper.add_input(Submit('submit', css_class='btn btn-default'))
        if hidden_data:
            self.helper.add_input(Hidden('post_id', hidden_data['post_id']))
            self.helper.add_input(Hidden('origin_path', hidden_data['origin_path']))
            if hidden_data.get('parent_id', None):
                self.helper.add_input(Hidden('parent_id', hidden_data['parent_id']))
\
</code></pre>

<p>my view</p>

<pre><code>  def comment_thread(request, id):
        comment = Comment.objects.get(id=id)
        comments = comment.post.commented_post.all()
        for c in comments:
                c.get_children()
        hidden_data = {
                    "post_id" : comment.post.id,
                    "origin_path" : request.get_full_path,
                    "parent_id" : None
                }
        comment_form = CommentForm(hidden_data=hidden_data) 
        context = {
        "comment": comment,
        'comment_form':comment_form
        }
        return render(request, "comments/comment_thread.html", context)
</code></pre>

<p>Edit:</p>

<pre><code>{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block content %}

&lt;a href="{{ comment.get_origin }}"&gt;Go Back&lt;/a&gt;

&lt;table class='table'&gt;

&lt;tr&gt;&lt;td&gt;{{ comment.get_comment }} 
&lt;br/&gt;&lt;small&gt;via {{ comment.user }} | {{ comment.timestamp|timesince }} ago &lt;/small&gt;
                {% if not comment.is_child %}
                &lt;ul&gt;
                {% for child in comment.get_children %}
                &lt;li&gt;{{ child.get_comment }} 
                &lt;small&gt;via {{ child.user }}&lt;/small&gt;


                &lt;/li&gt;
                {% endfor %}
                &lt;/ul&gt;
                &lt;div&gt;

        {% crispy comment_form comment_form.helper %}

                &lt;/div&gt;
                {% endif %}


&lt;/td&gt;&lt;/tr&gt;


&lt;/table&gt;

&lt;script&gt;
$(document).ready(function() {


     $(document).on('submit', 'form', function(e){
      e.preventDefault();
      if($(this).parents("tr").length != 0) {
        parent_id = $(this).parents("tr").attr("id").split("_")[1];
        data_str = $(this).serialize() + "&amp;parent_id=" + parent_id;
      } else {
        data_str = $(this).serialize();

      $.ajax({
        type:'POST',
        url:'/comment/create/',  // make sure , you are calling currect url
        data:data_str,
        success:function(json){              
          alert(json.message); 
          if(json.status==200){
             var comment = json.comment.trim();
             var user = json.user;
             /// set `comment` and `user` using jquery to some element
              if(!json.parent) {
                $(comment).insertBefore('.table tr:first');
              }
              else {
                $(comment).insertBefore('#comment_' + json.parent_id + ' #child_comment:first');
                $(".replies").text("reply" + json.comment_count + "view all");
              }
           }  

        },
        error:function(response){
          alert("some error occured. see console for detail");
        }
      });
    });
</code></pre>