How to use a javascript to validate a form?

Question

I was trying to build a Django form. And the javascript logic I am trying to implement is that if the input form value is not empty, then submit the form. However, I am not sure exactly how to get the id of {{form.value}}.

    <form id = "form1" action="." method="POST">{% csrf_token %}    

    <div class=".col1" style="float:left;vertical-align: middle;">          

        {{ form.region }}

        {{ form.operator }}
    </div>

    <div class="col-xs-2 style="vertical-align: middle;">
        {{ form.value }}
    </div>

    </form>


function SubmitForm1(){

if(document.getElementById( {{Form.Value}} ).value != ""){
    document.getElementById("form1").submit();
}

}

little_birdie · Accepted Answer · 2017-08-14 18:49:06Z

2

The source of your problem is that you are mixing up the code in django template, which is processed on the server side, with the code you are doing in javascript, which is processed on the client (browser) side. The variable names which exist on the server side do not exist in the same way in the browser. In javascript you can only work with elements that the template has rendered into the HTML output which was sent to the browser.

In the case of a django form, your form fields will normally be rendered with an id of id_ + the field name. So:

document.getElementById("id_region").value
document.getElementById("id_operator").value
document.getElementById("id_value").value

..etc, will give you the values of your form fields.

If you use the prefix= argument to the Form constructor in your view, eg:

myform = MyFormClass(prefix='form1')

Then the prefix (form1), followed by a dash -, would be prepended to the field name of all fields in that form:

 document.getElementById("id_form1-value").value

If you are not sure of the name or id of a field in your form, you can always do 'view source' or 'inspect element' in your browser to see what's in your html document.

edited Aug 14, 2017 at 18:49

answered Aug 14, 2017 at 17:58

little_birdie

5,9273 gold badges26 silver badges32 bronze badges

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

2 Comments

dickli2119 Over a year ago

Thank you! You are right. Just a follow up question. what if i have 2 similar forms in the same screen (i.e. two value input fields). How would the id look like?

little_birdie Over a year ago

In django normally if you have two forms on the same page, they would both be within one set of <form> tags. So you would have to either make the field names unique across both forms, or you could use the prefix= option in the form constructor to add a prefix to all the form objects. Eg. if you construct your form with MyForm(prefix='form1') then your field ids on that form would be (for example) id_form1-region.

pedrez · Accepted Answer · 2017-08-14 16:57:16Z

2

On the code you placed above you should be aware that the method .getElementById requires an html tag property to be passed. Please note the id="form-value" property on the div tag:

<div id="form-value" class="col-xs-2 style="vertical-align: middle;">
    {{ form.value }}
</div>

And the javascript getElementById("form-value"):

function SubmitForm1(){
  if(document.getElementById("form-value").value != ""){
      document.getElementById("form1").submit();
  }
}

You can check this here w3cschools.com: HTML DOM getElementById() Method

answered Aug 14, 2017 at 16:57

pedrez

3691 gold badge6 silver badges18 bronze badges

1 Comment

dickli2119 Over a year ago

Thanks for the reply. But it appears that it's still not capturing the value. I tried to debug the code. I printed document.getElementById("form-value").value, and it returns 'undefined' even when I have filled in the input box.

Juan Caicedo · Accepted Answer · 2017-08-14 18:32:53Z

0

Use onsubmit event, if return false then submit will cancel

Example: JS:

function validateForm() {
   var x = document.forms["form1"]["region"].value;
   if (x == "") {
    alert("region must be filled out");
    return false;
   }
}

HTML:

<form id = "form1" action="." method="POST" onsubmit="return validateForm()">

See more on JavaScript Form Validation

edited Aug 14, 2017 at 18:32

answered Aug 14, 2017 at 18:27

Juan Caicedo

1,55319 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to use a javascript to validate a form?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related