0

I have a Django project with a form in an HTML file, and I'd like to update the text on the submit button of that form WITHOUT a page reload. Essentially:

  1. I click submit on the form
  2. Python handles the submit with the form data
  3. The button text is updated to say "show result"

If I understand correctly, I have to use AJAX for this. The problem is that the form submit relies on an API call in Python, so the HTML essentially has to always be "listening" for new data broadcasted by the views.py file.

Here's the code I have (which doesn't work, since when I hit submit I'm greeted by a page with the JSON response data and nothing else):

views.py:

def home(request):
if request.method == "POST":
    print("Got form type", request.content_type)
    return JsonResponse({"text": "show result"})

return render(request, 'home.html')

home.html:

<div class="content" onload="document.genform.reset()">
    <form name="genform" autocomplete="off" class="form" method="POST" action="" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="title-sect">
            <h1>AJAX Test Form</h1>
        </div>

        <div class="submit">
            <button id="submit" type="submit">Submit</button>
        </div>
    </form>
</div>

<script type="text/javascript">
function queryData() {
    $.ajax({
        url: "/",
        type: "POST",
        data: {
            name: "text",
            'csrfmiddlewaretoken': '{{ csrf_token }}',
        },
        
        success: function(data) {
            var text = data['text'];
            var button = document.getElementById('submit');
            button.innerHTML = text;
            setTimeout(function(){queryData();}, 1000);
        }
    });
}

$document.ready(function() {
    queryData();
});
</script>

I've imported jQuery with the script <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>. Any idea why this doesn't work in its current state? Thanks!

SprintKeyz
  • 134
  • 8
  • Also share your html. – Sunderam Dubey Nov 28 '22 at 02:38
  • @SunderamDubey There we go, added the rest of the form. The problem I'm having is that when submit is clicked, it reloads the page and literally displays the JSON that should be received by AJAX, instead of everything happening in the background. – SprintKeyz Nov 28 '22 at 02:53
  • It's default behavior of form submit. All you need is to prevent this. https://stackoverflow.com/questions/17709140/how-to-prevent-default-on-form-submit – Minh Dao Nov 28 '22 at 03:31
  • @MinhDao I need the form to send a POST request though, doesn't that mean I have to keep this behavior? – SprintKeyz Nov 28 '22 at 04:38
  • You can override it. `$('form').submit(queryData)`. https://api.jquery.com/submit/. If combines with `preventDefault()`, this means you remove default behavior of your form, and add your custom behavior. – Minh Dao Nov 28 '22 at 04:43
  • The problem is that I can't simply call the function right away, I have to go through python first. That's why I have to keep the default behavior. – SprintKeyz Nov 28 '22 at 05:00

0 Answers0