Javascript not working on submit

Question

In my HTML file, I have the following script:

<script language = "javascript">
    function validation(){
        var x = document.forms["form"]["fieldx"].value;
        var y = document.forms["form"]["fieldy"].value;
        var act = document.forms["form"]["action"].value;
        if(x == null && y == null && act == "delete"){
            var z = confirm("Fields have no input. Proceed at your own risk");
            if(z==true) return true;
            else return false;
        }
    }
</script>

And the form:

<form name="form" onsubmit="return validation()" action="cgi-bin/process.cgi" method="GET">
    <input type="text" name="fieldx" />
    <input type="text" name="fieldy" />
    <input type="submit" name="action" value="insert" />
    <input type="submit" name="action" value="delete" />
    <input type="submit" name="action" value="update" />
</form>

with two input fields named fieldx and fieldy, and a submit type named action which can take any value (i.e. insert, delete and update) as shown above.

Supposedly, when the delete (and only the delete) button is clicked, it will check if there are any inputs inputed on both fields. If there are none, Javascript will prompt and ask the user if it wants to proceed. If he/she clicked yes, well, the process.cgi will be executed and if not, it will just return to the HTML page. However, when I clicked delete, there was no prompt and the cgi was executed.

Answer 1

You have two problems:

First:

x == null && y == null

The values of the fields will never be null. If nothing has been input into them, then their value will be a empty string (i.e. ""). So you need to compare against that and not null.

Second:

document.forms["form"]["action"].value

You have multiple controls named action, so document.forms["form"]["action"] will be a NodeList (which is like an Array). It won't be a single element, and value will always be undefined.

There is no way to tell, from a submit event, which form control was used to activate the form.

Use an onclick handler on the input you care about instead.

---

<script>
    function validation(){
        var x = document.forms["form"]["fieldx"].value;
        var y = document.forms["form"]["fieldy"].value;
        if(x == "" && y == ""){
            return confirm("Fields have no input. Proceed at your own risk");
        }
    }
</script>

and

<input type="submit" name="action" value="delete" onclick="return validation();">

---

A more modern way to write it would be along these lines:

<form action="cgi-bin/process.cgi">
    <input type="text" name="fieldx">
    <input type="text" name="fieldy">
    <input type="submit" name="action" value="insert" />
    <input type="submit" name="action" value="delete" />
    <input type="submit" name="action" value="update" />
</form>
<script>
    document.querySelector('input[value=delete]').addEventListener('click', validate);
    function validate(event) {
        var elements = this.form.elements;
        if (elements.fieldx.value == "" && elements.fieldy.value == "") {
            if (!confirm("Fields have no input. Proceed at your own risk")) {
                event.preventDefault();
            }
        }
    }
</script>