AutoSave Form Field using Ajax

Using Django Forms & APIs
1

Hi, I am trying to AutoSave a field on my form using ajax. I think where I am going wrong is directing ajax to my Django view. Any idea where I am going wrong here?

{% include 'base.html' %}
{% block content%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                                                {% for x in cust %}
                                                     <tr>
                                                        <th>     
                                                            {{ x.customer.job_name }} <p></p>
                                                        </th>
                                                    <td>
                                                            <form action=""  method='post' data-url="{% url 'customer-dashboard' x.id %}">
                                                            {%csrf_token%}
                                                                <textarea type="content" id="new_note" onchange="autoSave()" name="cust_notes" maxlength="1000" required="" id="id_cust_notes"
                                                                class="form-control">{{x.customer.cust_notes}}
                                                                </textarea>
                                                            </form>
                                                    </td>
                                                    {%endfor%}


<script type="text/javascript">
    function autoSave()
    {
        var new_note = document.getElementById('new_note').value;
        if(new_note!='')
        {
            $.ajax({
                url: 'data-url',
                method: 'post',
                data: {'cust_notes' :cust_notes},
                {
            }
        });
        }
    }
</script>

def customerDashboard(request, id):
      #TODO: needs to make it fill out the whole form automatically. So take some stips from original creation.
      """View for user to see Customer Page"""
      cust = User.objects.filter(id=id)
      user_form = User.objects.get(id=id) 
      if request.method == 'POST':
            form = CustomerForm(request.POST, instance=user_form)
            if (form.is_valid()):
                  new_post = form.save(commit=False)
                  form.instance.cust_notes = new_post
                  form.save(update_fields=['cust_notes'])
                  messages.success(request, "New Note Saved" )
      form = CustomerForm()
      return render(request,'employees/customer_dashboard.html', {"cust": cust,"form": form})

    path('customer_dashboard/<id>', views.customerDashboard, name='customer-dashboard'),

Thank you for any guidance on this. I literally have been trying to do this for a year. If there is another method, I am open to that.

2

You’ve got a number of things wrong here, in addition to lacking some other information that would be useful.

  1. In your template, you’re iterating over cust, which means you could be rendering this form multiple times. What this also means is that you’re potentially creating multiple instances of the textarea tag with the same id attribute. (You must not create more than one id on a page.)
    Having said that, I see in your view that you’re only ever going to get one user from the query - in that case, there’s no need to retrieve the User as a QuerySet or to iterate over it.

  2. In your submission function, you’re trying to get the value of the textarea with id new_note and assigning it to a variable named new_note. However, in your submission, you’re trying to submit a variable named cust_notes, which I don’t see defined in that function.

  3. You don’t show the definition of a url data-url. I’m guessing you’re trying to retrieve the data-url attribute of the form tag, but this isn’t how you need to retrieve that value.

  4. You want to check to see that how you’re sending the data is as html form data and not as JSON. (If you want the submission to be JSON, then you need to write your view accordingly.)

  5. Your view is querying User twice for the same data, I don’t see why that would be necessary.

This is just what I can spot right off-hand. Once you get this fixed, then you’ll want to look at the data being submitted and how it’s being handled by the view.

3

Thank you, I solved my issue. I had to use Fetch API and then pass the object into my Django function to save.