0

I finished form in html.

I wrote script below form in script in body. It is not having any syntax errors (hopefully). entire script is a single function called validate() which returns true or false and some alert messages. I have added in form element, onsubmit="return validate()". When I run the page, script part is not running. I mean, no alert messages, and it goes to /form. Should I do anything else to make it run?

{% extends "layout.html" %}

{% block main %}

<!-- http://getbootstrap.com/docs/4.1/content/typography/ -->
<h1 class="mb-3">Form</h1>

<!-- http://getbootstrap.com/docs/4.1/components/forms/ -->
<form name="survey" action="/form"  onsubmit="return validate()" method="post">

    <fieldset>
        <legend>Personal Information: </legend>
        <div class="form-group">
            <label for="first_name">First Name: </label>
            <input type="text" name="first_name" id="first_name" class="form-control" placeholder="John" autocomplete="off" autofocus><br>

            <label for="last_name">Last Name: </label>
            <input type="text" name="last_name" id="last_name" class="form-control" placeholder="Hall" autocomplete="off"><br>

            <label for="sex">Sex: </label>
            <select name="sex" id="sex" class="form-control">
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
            </select><br>

            <label for="email">Email: </label>
            <input type="email" name="email" id="email" class="form-control" placeholder="example@a.com" autocomplete="off"><br>

            <label for="age">Age: (yrs)</label>
            <input type="number" name="age" id="age" class="form-control" min="18" max="120" autocomplete="off"><br>

            <label for="address">Address: </label>
            <textarea ="text" name="address" id="address" value="0" class="form-control" rows="4" cols="80" placeholder="Type your address here..." autocomplete="off"></textarea><br>
        </div>
    </fieldset>

    <fieldset>
        <legend>Survey: </legend>
        <div class="form-group">
            <label for="pres">Who is your favorite president?</label><br>
            <input type="radio" name="pres" value="Obama" checked> Obama<br>
            <input type="radio" name="pres" value="Bush"> Bush<br>
            <input type="radio" name="pres" value="Clinton"> Clinton<br>
            <input type="radio" name="pres" value="Trump"> Trump<br>
            <br>

            <label for="country">Which country are you from?</label>
            <input type="text" name="country" id="country" placeholder="India" class="form-control"><br>

            <label for="edu">Your education status (completed or doing currently): </label>
            <select name="edu" id="edu" class="form-control">
                <option value="primary">Primary school</option>
                <option value="secondary">Secondary school</option>
                <option value="higher">Higher-secondary school</option>
                <option value="grad">Graduate</option>
                <option value="post_grad">Post Graduate</option>
                <option value="doc">Doctorate</option>
                <option value="no">None</option>
            </select>
        </div>
    </fieldset>


    <!-- http://getbootstrap.com/docs/4.1/components/buttons/ -->
    <button class="btn btn-primary" type="submit">Submit</button>

</form>

<script>
    function validate()
    {
        var first_name = document.getElementById("first_name");
        var last_name = document.getElementById("last_name");
        var sex = document.getElementById("sex");
        var age = document.getElementById("age");
        var address = document.getElementById("address");
        var email = document.getElementById("email");
        var country = document.getElementById("country");

        if (first_name == "" || first_name == null || first_name.length < 2)
        {
            alert("Enter the First Name");
            return false;
        }

        if (last_name == "" || last_name == null || last_name.length < 2)
        {
            alert("Enter the Last Name");
            return false;
        }

        if (sex == "" || sex == null)
        {
            alert("Select the sex from the drop-down menu");
            return false;
        }

        if (age == 0)
        {
            alert("Enter a valid age")
            return false;
        }

        if (address == "" || address == null || address.length < 10)
        {
            alert("Enter a valid address");
            return false;
        }

        var at = email.indexOf("@");
        var point = email.lastIndexOf(".");
        var x = email.length;

        if (x < 4 || at < 1 || point < at + 2 || point > x - 1)
        {
            alert("Enter a valid email address")
        }

        if (country == "" || country == null || country.length < 2)
        {
            alert("Enter a valid Country");
            return false;
        }

        if (edu == "" || edu == null)
        {
            alert("Select education status in drop-down menu");
            return false;
        }
        else
        {
            return true;
        }
    }

</script>

{% endblock %}

tried adding onsubmit="return validate()" in submit button too, still not working.

3
  • adding .value after getElementById solved the problem. Aug 22 '19 at 18:49
  • So it was called, just did not do the right thing. If you can, could you maybe add an answer to your own question, so it doesn't look unanswered in the overview? Also, an explicit answer might help people who somehow stumble upon this question and wonder whether their own problem is related.
    – Blauelf
    Aug 23 '19 at 9:02
  • sure.. il'll do that Aug 24 '19 at 13:12
0

*EDIT So, the error was in the javascript, which threw a Type error. I was trying to use the 'email' as string, so as to know the position of dot and @. When I did, email = document.getElementById("email"), email now holds email 'element', and it is not yet a string. and hence the type error. The same goes for numbers too. We cannot manipulate or do calculations if it is still in element state. For that, we can get value of element by adding .value, for eg, email = document.getElementById("email").value. Now email stores the content of email element which is a string.

2
  • Minor typo, document.getElementById("email").value, not document.getElementById.value("email") (use single backticks ` around inline code)
    – Blauelf
    Aug 24 '19 at 13:21
  • Thanks.. corrected.. Aug 25 '19 at 14:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .