Stop form from submitting values to php file if empty

Question

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

Why not use a required attribute? Also, what have you tried to check why your approach is not working as expected? — Nico Haase
– Nico Haase, Commented Dec 16, 2021 at 8:09
Hello, i already solved the problem but for your question why i did not used required attribute, its because i want users to input a word on any of the field, and they can leave other field with no value, but for the form to submit , at least one of the field should have a value .else the form will submit and will redirect users to a search result for "blank" . what ive done here is before submitting all the values, the values will be concatenated to a string variable, and if that string variable is equal to ="" , the form will not submit. — Jasper Malfetria
– Jasper Malfetria, Commented Dec 16, 2021 at 11:29

ozahorulia · Accepted Answer · 2021-12-14 03:26:34Z

    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>

this makes all the field "required", what I want to do is to check if all the fields are blank, if all fields are blank the form will not submit, else, if any of the fields has a value, at least one, the form will submit.

Faesal · Accepted Answer · 2021-12-14 02:23:13Z

1

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();

answered Dec 14, 2021 at 2:23

Faesal

8377 silver badges22 bronze badges

Comments

Said Salomon · Accepted Answer · 2021-12-14 02:32:26Z

0

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

answered Dec 14, 2021 at 2:32

Said Salomon

1313 bronze badges

3 Comments

Jasper Malfetria Over a year ago

this doesn't work for me, i want people from choosing to write on any field or if they want to leave any field blank, its just i don't want to submit the form and redirect to the display result page if the fields are completely empty

Said Salomon Over a year ago

so it should be at lest one field with information? it dosent matter which?

Jasper Malfetria Over a year ago

yes sir , any of the field

Collectives™ on Stack Overflow

Stop form from submitting values to php file if empty

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related