CODEWITHSUNDEEP
javascripthtmlforms
Jasper Malfetria
Jasper Malfetria

Reputation: 29

Stop form from submitting values to php file if empty

I want to stop my form from submitting and taking an action on going to another php file if the form has no value from at least one of its variables.

<form id="advform" class="" action="advancedsearching.php" method="GET"  onsubmit = "return validate()" autocomplete="off"   >
                <div class="modal-header align-items-center justify-content-center py-2 ">              
                    <h4 class="modal-title">Advanced Search</h4>
        
                </div>
                <div class="modal-body  ">              
                    <div class="form-group">
                        <label>Title:</label>
                        <input type="text" name="title" class="form-control"  autocomplete="off"  autocomplete="false" >
                    </div>
                    <div class="form-group">
                        <label>Author:</label>
                        <input type="text" name="author" class="form-control"  autocomplete="off"  autocomplete="false" >
                    </div>
                    <div class="form-group">
                        <label>ISBN:</label>
                        <input type="text"  name="isbn" class="form-control"  autocomplete="off"  autocomplete="false" >
                    </div>
                    

                    <div class="form-group">
                        <label>Publisher:</label>
                        <input type="text"  name="publisher" class="form-control"  autocomplete="off"  autocomplete="false" >
                    </div>
                    <div class="form-group">
                        <label>Keyword:</label>
                        <input type="text"  name="keyword" class="form-control"  autocomplete="off"  autocomplete="false" >
                    </div>
                </div>
                <div class="modal-footer justify-content-center  ">
                    
        
                    <input type="submit" class="btn btn-dark"   value="Search" style="width:100%;border:1px solid black;">
                </div>
            </form>

tried adding

 <script>
function validate() {
    var x;
    x = document.getElementById("advform").value;
    if (x == "") {
        alert("Please Enter a Value");
        return false;
    };
}
</script>

but it is still submitting

Upvotes: 0

Views: 179

Answers (3)

ozahorulia
ozahorulia

Reputation: 10084

    function validate() {
        var inputs = document.getElementById('advform').getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++)
        {
            if (inputs[i].type != "submit" && inputs[i].value != "") 
            {
                return true;
            }

            alert("Please Enter a Value");

            return false;
        }
    }
<form id="advform" class="" action="advancedsearching.php" method="GET"  onsubmit = "return validate()" autocomplete="off"   >
                <div class="modal-header align-items-center justify-content-center py-2 ">              
                    <h4 class="modal-title">Advanced Search</h4>
        
                </div>
                <div class="modal-body  ">              
                    <div class="form-group">
                        <label>Title:</label>
                        <input type="text" name="title" class="form-control"  autocomplete="off"  autocomplete="false" >
                    </div>
                    <div class="form-group">
                        <label>Author:</label>
                        <input type="text" name="author" class="form-control"  autocomplete="off"  autocomplete="false" >
                    </div>
                    <div class="form-group">
                        <label>ISBN:</label>
                        <input type="text"  name="isbn" class="form-control"  autocomplete="off"  autocomplete="false" >
                    </div>
                    

                    <div class="form-group">
                        <label>Publisher:</label>
                        <input type="text"  name="publisher" class="form-control"  autocomplete="off"  autocomplete="false" >
                    </div>
                    <div class="form-group">
                        <label>Keyword:</label>
                        <input type="text"  name="keyword" class="form-control"  autocomplete="off"  autocomplete="false" >
                    </div>
                </div>
                <div class="modal-footer justify-content-center  ">
                    
        
                    <input type="submit" class="btn btn-dark"   value="Search" style="width:100%;border:1px solid black;">
                </div>
            </form>

Upvotes: 1

Said Salomon
Said Salomon

Reputation: 129

it doesn't work because you have the id in your form, it should be in the input that you want to validate.

other way its to use the required Attribute in the input

<input type="text"  name="publisher" class="form-control"  autocomplete="off"  autocomplete="false" required>

https://www.w3schools.com/tags/att_input_required.asp

Upvotes: 0

Faesal
Faesal

Reputation: 823

Try to do this using an event assigned to the submit button:

document.getElementById("submitBtnId").addEventListener("click", function(event){
  // event.preventDefault() will stop your submit.
  event.preventDefault();
});

To proceed submitting you can use:

 event.currentTarget.submit();

Upvotes: 1

Related Questions