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:
JavaScript
x
90
90
1
<!doctype html>2
<html lang="en">3
4
<head>5
<!-- Required meta tags -->6
<meta charset="utf-8">7
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">8
9
<!-- Bootstrap CSS -->10
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">11
<title>FORM</title>12
</head>13
<body>14
15
<div class="container">16
<h2 class="text-center">Test From</h2>17
<br>18
<form action="upload.php" method="post">19
<h5>Types</h5>20
<div class="form-row">21
<div class="form-group col-md-12">22
<div class="form-check">23
<div class="custom-control custom-radio custom-control-inline">24
<input type="radio" id="type_s" name="types" value="S" class="custom-control-input">25
<label class="custom-control-label" for="type_s">Type (S)</label>26
</div>27
<div class="custom-control custom-radio custom-control-inline">28
<input type="radio" id="type_z" name="types" value="Z" class="custom-control-input">29
<label class="custom-control-label" for="type_z">Type (Z)</label>30
</div> 31
<div class="custom-control custom-radio custom-control-inline">32
<input type="radio" id="type_r" name="types" value="R" class="custom-control-input">33
<label class="custom-control-label" for="type_r">Type (R)</label>34
</div>35
<div class="custom-control custom-radio custom-control-inline">36
<input type="radio" id="type_t" name="types" value="T" class="custom-control-input">37
<label class="custom-control-label" for="type_t">Type (T)</label>38
</div>39
</div>40
</div> 41
</div>42
<div class="form-row">43
<div class="form-group col-md-4">44
<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" >45
<small class="form-text text-muted">Number</small>46
</div>47
<div class="form-group col-md-4">48
<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" >49
<small class="form-text text-muted">Number2</small>50
</div>51
<div class="form-group col-md-4">52
<input type="text" class="form-control float-right" id="Text" name="Text" placeholder="Text" maxlength="15" >53
<small class="form-text text-muted">Text</small>54
</div>55
</div>56
<h5>Name</h5>57
<div class="form-row">58
<div class="form-group col-md-6">59
<input type="text" class="form-control" id="Name" name="Name" placeholder="Name" required >60
<small class="form-text text-muted">Name</small>61
</div>62
</div>63
<h6>Select:</h6>64
<div class="form-row">65
<div class="form-group col-md-4">66
<select class="custom-select" id="select" name="select" >67
<option value="" disabled selected>Choose</option>68
<option value="select_1">Select 1</option>69
<option value="select_1">Select 2</option>70
<option value="select_1">Select 3</option>71
<option value="select_1">Select 4</option>72
</select>73
<small class="form-text text-muted">Please Select</small> 74
</div>75
</div>76
<br>77
<div class="no-print text-center">78
<input class="btn btn-primary" type="submit" name="form_draft" value="Save Draft"> 79
<input class="btn btn-primary" type="submit" name="form_new" value="Save Final FORM">80
</div> 81
</form>82
</div>83
84
<!-- Optional JavaScript; choose one of the two! -->85
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->86
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>87
<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>88
</body>89
</html>90
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.
JavaScript
1
22
22
1
<script>2
var btnformdraft = document.getElementsByName("form_draft")[0];3
btnformdraft.addEventListener("click", function(evt) {4
//set default doContinue5
let doContinue = true;6
7
//verify your fields here8
if(document.getElementById("Name").value === "") {9
doContinue = false;10
}11
12
//add other field verifications13
14
//verify if we continue 15
if(!doContinue) {16
evt.preventDefault();17
//showing alert BUT THIS CAN BE CHANGED TO HOWEVER YOU WANT TO DISPLAY THE ERROR MESSAGE18
alert('The NAME field is required');19
}20
}, false);21
</script>22