How to submit Django form using Javascript?

Question

I have the following Django form:

class EmailForm(forms.Form):
    name = forms.CharField(...)
    email = forms.CharField(...)
    message = forms.CharField(...)

Which I then render in my HTML like so:

<div class="controls">
    {% csrf_token %}
    <div class="form-group">
        {{ form.name }}
    </div>
    <div class="form-group">
        {{ form.email }}
    </div>
    <div class="form-group">
        {{ form.message }}
    </div>
    <input type="submit" value="Say hello" onclick="sendEmail(this);">
</div>

I'm trying to disable the submit button after it's pressed. Here's my javascript function:

<script>
    function sendEmail(this1)
    {
        var name = document.getElementById("form_name").value;
        var email = document.getElementById("form_email").value;
        var message = document.getElementById("form_message").value;

        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        var result = re.test(String(email).toLowerCase());

        if (name != "" && result && message != "") {
            this1.disabled=true; 
        }
    }
</script>

When I override the onclick field in the <input> tag, the button becomes disabled as a result of the Javascript function, but the form does not submit (the page is not reloaded, Django doesn't process the POST). How do I continue the default action for the submit button after disabling it?

Raydel Miranda · Accepted Answer · 2019-04-17 01:56:44Z

5

Your template does not have the <form></form> tags, without those there is no form to submit.

You should write:

<form id="MyForm">
    <div class="controls">
    ...
    <input type="submit" value="Say hello" onclick="sendEmail(this);">
    </div>
</form>

That should do it, but in case it doesn't (I realy think it will), you can add this to your sendEmail function:

document.getElementById("myForm").submit();

answered Apr 17, 2019 at 1:56

Raydel Miranda

14.4k3 gold badges48 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

barbsan · Accepted Answer · 2019-04-17 07:32:48Z

-1

how about onclick="this.submit()"

edited Apr 17, 2019 at 7:32

barbsan

3,46811 gold badges23 silver badges29 bronze badges

answered Apr 17, 2019 at 7:14

ayuzawa misaki

1

Collectives™ on Stack Overflow

How to submit Django form using Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related