I have a form with 2 buttons (Save Draft and Save Final FORM).
I would like to switch the required fields depending on which button pressed.
When I push the Save Draft it’s required to fill out only the Name’s field.
When I push the Save Final FORM it’s required to fill all of the fields except Text field.
How can I do that?
HTML:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <title>FORM</title> </head> <body> <div class="container"> <h2 class="text-center">Test From</h2> <br> <form action="upload.php" method="post"> <h5>Types</h5> <div class="form-row"> <div class="form-group col-md-12"> <div class="form-check"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="type_s" name="types" value="S" class="custom-control-input"> <label class="custom-control-label" for="type_s">Type (S)</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="type_z" name="types" value="Z" class="custom-control-input"> <label class="custom-control-label" for="type_z">Type (Z)</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="type_r" name="types" value="R" class="custom-control-input"> <label class="custom-control-label" for="type_r">Type (R)</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="type_t" name="types" value="T" class="custom-control-input"> <label class="custom-control-label" for="type_t">Type (T)</label> </div> </div> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <input type="number" class="form-control float-right" id="Number" name="Number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="2" placeholder="Number" > <small class="form-text text-muted">Number</small> </div> <div class="form-group col-md-4"> <input type="number" class="form-control float-right" id="Number2" name="Number2" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="5" placeholder="Number2" > <small class="form-text text-muted">Number2</small> </div> <div class="form-group col-md-4"> <input type="text" class="form-control float-right" id="Text" name="Text" placeholder="Text" maxlength="15" > <small class="form-text text-muted">Text</small> </div> </div> <h5>Name</h5> <div class="form-row"> <div class="form-group col-md-6"> <input type="text" class="form-control" id="Name" name="Name" placeholder="Name" required > <small class="form-text text-muted">Name</small> </div> </div> <h6>Select:</h6> <div class="form-row"> <div class="form-group col-md-4"> <select class="custom-select" id="select" name="select" > <option value="" disabled selected>Choose</option> <option value="select_1">Select 1</option> <option value="select_1">Select 2</option> <option value="select_1">Select 3</option> <option value="select_1">Select 4</option> </select> <small class="form-text text-muted">Please Select</small> </div> </div> <br> <div class="no-print text-center"> <input class="btn btn-primary" type="submit" name="form_draft" value="Save Draft"> <input class="btn btn-primary" type="submit" name="form_new" value="Save Final FORM"> </div> </form> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>
Thanks 😉
Advertisement
Answer
Just add a click eventlistener
to your buttons.
Add this at the END of your file before closing </body>
tag. I’ve only given you an example of the first button. You should be able to reproduce this however you want for the other button.
<script> var btnformdraft = document.getElementsByName("form_draft")[0]; btnformdraft.addEventListener("click", function(evt) { //set default doContinue let doContinue = true; //verify your fields here if(document.getElementById("Name").value === "") { doContinue = false; } //add other field verifications //verify if we continue if(!doContinue) { evt.preventDefault(); //showing alert BUT THIS CAN BE CHANGED TO HOWEVER YOU WANT TO DISPLAY THE ERROR MESSAGE alert('The NAME field is required'); } }, false); </script>