# AutoSave Form Field using Ajax

**URL:** https://forum.djangoproject.com/t/autosave-form-field-using-ajax/21466
**Category:** Forms & APIs
**Created:** [June 8, 2023, 11:58pm UTC](https://forum.djangoproject.com/t/autosave-form-field-using-ajax/21466 "2023-06-08T23:58:32Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![t298261](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/t298261/32/13833_2.png) [@t298261](https://forum.djangoproject.com/u/t298261)
#### Post date: [June 8, 2023, 11:58pm UTC](https://forum.djangoproject.com/t/autosave-form-field-using-ajax/21466/1 "2023-06-08T23:58:32Z")

</div>

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?

```auto
{% 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>

```

```auto
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})

```

```auto
    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.

---

<div class="post-metadata">

### Author: ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [June 9, 2023, 12:35am UTC](https://forum.djangoproject.com/t/autosave-form-field-using-ajax/21466/2 "2023-06-09T00:35:44Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![t298261](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/t298261/32/13833_2.png) [@t298261](https://forum.djangoproject.com/u/t298261)
#### Post date: [June 11, 2023, 9:11pm UTC](https://forum.djangoproject.com/t/autosave-form-field-using-ajax/21466/3 "2023-06-11T21:11:04Z")

</div>

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