CODEWITHSUNDEEP
javascriptphphtmlformsif-statement
motoko96
motoko96

Reputation: 105

Can't figure out what's wrong with this if statement?

I'm trying to make a form in which, when the user fills out all fields, the output results in a compilation of all of their entered data. The form connects to a php file and it runs just fine, however when I tried to add validation the submit acts strangely. Basically my "Validation" is made of multiple if statements with one else. The title and content validation are in perfect working order,but when it comes to the type it submits the form anyway.

Any suggestions?
HTML Code:

<body>
    <form id="documentationForm" action="testingPHP2.php" method="post">
        <figcaption>
            <p><strong>Instructions:</strong>
            </p>
            <p><i>Fill out the information as needed below. Place each step on a new line. When you are finished,<br>submit the document and download the file.</p></i>
        </figcaption>

        <strong>Title:</strong>
        <input id="docTitle" type="text" name="docTitle"><span id="errorTitle"></span> 
        <br>
        <strong>Type:</strong>
        <select id="docType" onchange="adaptiveLabel()" name="docType">
            <br>
            <option value="" selected>Select Document Type</option>
            <option value="Procedure">Procedure</option>
            <option value="Instruction">Instruction</option>
            <option value="Form">Form</option>
        </select><span id="errorType"></span>
        <br>
        <script>
            function adaptiveLabel() {
                var chosenType = document.getElementById("docType");
                var chosenTypeVal = chosenType.value;
                var x = document.getElementById("contentLabel");
                if (chosenTypeVal == "Procedure") {
                    x.innerHTML = "Procedural Steps:";
                }
                if (chosenTypeVal == "Instruction") {
                    x.innerHTML = "Steps:"
                }
                if (chosenTypeVal == "Form") {
                    x.innerHTML = "Form Parts:";
                }
                if (chosenTypeVal == " ") {
                    x.innerHTML = " ";
                }
            }

            function submitInputs() {
                var errorTitletext = document.getElementById("docTitle");
                var errorTitleLable = document.getElementById("errorTitle");
                var errorContenttext = document.getElementById("docInput");
                var errorContentLabel = document.getElementById("errorContent");
                var errorTypetext = document.getElementById("docType");
                var errorTypetextLable = document.getElementById("errorType");

                if (errorTypetext.value === "") {
                    alert("You must select a type");
                    errorTypetextLable.innerHTML = "*Please select a type";
                    errorTypetextLable.style.color = "red";
                }
                if (errorTypetext.value === "Procedure" || errorTypetext.value === "Form" || errorTypetext.value === "Instruction") {
                    errorTypetextLable.innerHTML = "";
                    errorTypetextLable.style.color = "";
                }
                if (errorTitletext.value.length === 0 || errorTitletext.value === " ") {
                    alert("You must create a title");
                    errorTitleLable.innerHTML = "*Please create a title";
                    errorTitleLable.style.color = "red";
                }
                if (errorTitletext.value.length > 0) {
                    errorTitleLable.innerHTML = "";
                    errorTitleLable.style.color = "";
                }
                if (errorContenttext.value.length === 0) {
                    alert("You must enter content");
                    errorContentLabel.innerHTML = "*Please enter content";
                    errorContentLabel.style.color = "red";
                }
                if (errorContenttext.value.length > 0) {
                    errorContentLabel.innerHTML = "";
                    errorContentLabel.style.color = "";
                } else {
                    document.getElementById("documentationForm").submit();
                }
            }
        </script>
        <strong><span id="contentLabel"></span><span id="errorContent"></span></strong>
        <br>
        <textarea style="width: 500px; height: 250px;" id="docInput" name="docInput"></textarea>
        <br>
        <input type="button" onclick="submitInputs()" value="Create Document">
        <input type="submit" value="Default Submit">
    </form>
</body>

Upvotes: 2

Views: 69

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

You should submit the form only if all the values are valid, so use a flag as given below. Also it will be easier to use if...else construct to handle invalid & valid case of a field.

In you logic the problem is irrespective of the first 2 fields valid state, if the content is valid the form's submit is called.

function submitInputs() {
    var errorTitletext = document.getElementById("docTitle");
    var errorTitleLable = document.getElementById("errorTitle");
    var errorContenttext = document.getElementById("docInput");
    var errorContentLabel = document.getElementById("errorContent");
    var errorTypetext = document.getElementById("docType");
    var errorTypetextLable = document.getElementById("errorType");

    var valid = true;
    if (errorTypetext.value === "") {
        alert("You must select a type");
        errorTypetextLable.innerHTML = "*Please select a type";
        errorTypetextLable.style.color = "red";
        valid = false;
    } else {
        errorTypetextLable.innerHTML = "";
        errorTypetextLable.style.color = "";
    }
    if (errorTitletext.value.length === 0 || errorTitletext.value === " ") {
        alert("You must create a title");
        errorTitleLable.innerHTML = "*Please create a title";
        errorTitleLable.style.color = "red";
        valid = false;
    } else {
        errorTitleLable.innerHTML = "";
        errorTitleLable.style.color = "";
    }
    if (errorContenttext.value.length === 0) {
        alert("You must enter content");
        errorContentLabel.innerHTML = "*Please enter content";
        errorContentLabel.style.color = "red";
        valid = false;
    } else {
        errorContentLabel.innerHTML = "";
        errorContentLabel.style.color = "";
    }
    if (valid) {
        document.getElementById("documentationForm").submit();
    }
}

Demo: Fiddle

Also There is no need to have a default submit button, you can have only one button like

<form id="documentationForm" action="testingPHP2.php" method="post" onsubmit="return submitInputs();">
    .....
    <input type="submit" value="Create Document" />
</form>

then

function submitInputs() {
    var errorTitletext = document.getElementById("docTitle");
    var errorTitleLable = document.getElementById("errorTitle");
    var errorContenttext = document.getElementById("docInput");
    var errorContentLabel = document.getElementById("errorContent");
    var errorTypetext = document.getElementById("docType");
    var errorTypetextLable = document.getElementById("errorType");

    var valid = true;
    if (errorTypetext.value === "") {
        alert("You must select a type");
        errorTypetextLable.innerHTML = "*Please select a type";
        errorTypetextLable.style.color = "red";
        valid = false;
    } else {
        errorTypetextLable.innerHTML = "";
        errorTypetextLable.style.color = "";
    }
    if (errorTitletext.value.length === 0 || errorTitletext.value === " ") {
        alert("You must create a title");
        errorTitleLable.innerHTML = "*Please create a title";
        errorTitleLable.style.color = "red";
        valid = false;
    } else {
        errorTitleLable.innerHTML = "";
        errorTitleLable.style.color = "";
    }
    if (errorContenttext.value.length === 0) {
        alert("You must enter content");
        errorContentLabel.innerHTML = "*Please enter content";
        errorContentLabel.style.color = "red";
        valid = false;
    } else {
        errorContentLabel.innerHTML = "";
        errorContentLabel.style.color = "";
    }

    return valid;
}

Demo: Fiddle

Upvotes: 1

Related Questions