user9739730
Reputation: 21
Required tag not working in HTML form
What I want to achieve:
- HTML form to order items.
- QTY field to only appear when the respective item is selected.
- Make it required.
What problems I'm facing:
- I was trying out the required tag for the NAME, however when I submit my form without filling up the name, the form allows me to submit and does not prompt me to fill up the name field.
- Have not come up with the code for "What I want to achieve: 2"
<form>
NAME
<input type="text" name="NAME" id="NAME" required/> <br />
<br>
EMAIL
<input type="email" name="EMAIL" id="EMAIL"> <br />
<br>
DEPARTMENT
<select name="DEPARTMENT" id="DEPARTMENT">
<option>HR</option>
<option>DMS</option>
<option>RIM</option>
</select><br />
<br>
PURPOSE
<select name="PURPOSE" id="PURPOSE">
<option>NEW KIT</option>
<option>EXCHANGE KIT</option>
</select><br/>
<br>
SHIRT 1
<select name="SHIRT1" id="SHIRT1">
<option></option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>2XL</option>
<option>3XL</option>
<option>4XL</option>
<option>5XL</option>
<option>6XL</option>
<option>7XL</option>
</select><br />
<br>
QTY
<SELECT name="QTY1" id="QTY1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</SELECT> <br />
<br>
PANT 1
<select name="PANT1" id="PANT1">
<option></option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
<option>44</option>
<option>45</option>
<option>46</option>
<option>47</option>
<option>48</option>
</select><br />
<br>
QTY
<select name="QTY2" id="QTY2">
<option></option>
<option>1</option>
<option>2</option>
</select>
<br />
<br>
SHIRT 2
<select name="SHIRT2" id="SHIRT2">
<option></option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>2XL</option>
<option>3XL</option>
<option>4XL</option>
<option>5XL</option>
</select>
<br />
<br>
QTY
<SELECT name="QTY3" id="QTY3">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</SELECT>
<br />
<br>
PANT 2
<select name="PANT2" id="PANT2">
<option></option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
<option>44</option>
<option>45</option>
<option>46</option>
<option>47</option>
<option>48</option>
</select>
<br />
<br>
QTY
<select name="QTY4" id="QTY4">
<option></option>
<option>1</option>
<option>2</option>
</select>
<br />
<br>
SAFETY SHOES
<select name="SAFETYSHOES" id="SAFETYSHOES">
<option></option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<br />
<br>
QTY
<select name="QTY5" id="QTY5">
<option></option>
<option>1</option>
</select>
<br />
<br>
JACKET
<select name="JACKET" id="JACKET">
<option></option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<br />
<br>
QTY
<select name="QTY6" id="QTY6">
<option></option>
<option>1</option>
</select>
<br />
<br>
SAFETY VEST
<select name="SAFETYVEST" id="SAFETYVEST">
<option></option>
<option>1</option>
</select>
<br />
<br>
POUCH
<select name="POUCH" id="POUCH">
<option></option>
<option>1</option>
</select>
<br />
<br>
LANYARD
<select name="LANYARD" id="LANYARD">
<option></option>
<option>1</option>
</select>
<br />
<br>
REASONS/REMARKS
<br >
<textarea name="RR" id="RR" cols="40" rows="8" placeholder="Fill this if you are exchanging kit"></textarea>
</form>
<input type="button" id="b1" onClick="insert_value()" value="Insert"></input>Upvotes: 0
Views: 171
Answers (1)
kush_dev
Reputation: 31
I have changed input type button to submit and it should be inside the form element. This is the updated code.
<form>
NAME
<input type="text" name="NAME" id="NAME" required/> <br />
<br>
EMAIL
<input type="email" name="EMAIL" id="EMAIL"> <br />
<br>
DEPARTMENT
<select name="DEPARTMENT" id="DEPARTMENT">
<option>HR</option>
<option>DMS</option>
<option>RIM</option>
</select><br />
<br>
PURPOSE
<select name="PURPOSE" id="PURPOSE">
<option>NEW KIT</option>
<option>EXCHANGE KIT</option>
</select><br/>
<br>
SHIRT 1
<select name="SHIRT1" id="SHIRT1">
<option></option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>2XL</option>
<option>3XL</option>
<option>4XL</option>
<option>5XL</option>
<option>6XL</option>
<option>7XL</option>
</select><br />
<br>
QTY
<SELECT name="QTY1" id="QTY1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</SELECT> <br />
<br>
PANT 1
<select name="PANT1" id="PANT1">
<option></option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
<option>44</option>
<option>45</option>
<option>46</option>
<option>47</option>
<option>48</option>
</select><br />
<br>
QTY
<select name="QTY2" id="QTY2">
<option></option>
<option>1</option>
<option>2</option>
</select> <br />
<br>
SHIRT 2
<select name="SHIRT2" id="SHIRT2">
<option></option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>2XL</option>
<option>3XL</option>
<option>4XL</option>
<option>5XL</option>
</select> <br />
<br>
QTY
<SELECT name="QTY3" id="QTY3">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</SELECT>
<br />
<br>
PANT 2
<select name="PANT2" id="PANT2">
<option></option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
<option>44</option>
<option>45</option>
<option>46</option>
<option>47</option>
<option>48</option>
</select>
<br />
<br>
QTY
<select name="QTY4" id="QTY4">
<option></option>
<option>1</option>
<option>2</option>
</select>
<br />
<br>
SAFETY SHOES
<select name="SAFETYSHOES" id="SAFETYSHOES">
<option></option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<br />
<br>
QTY
<select name="QTY5" id="QTY5">
<option></option>
<option>1</option>
</select>
<br />
<br>
JACKET
<select name="JACKET" id="JACKET">
<option></option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<br />
<br>
QTY
<select name="QTY6" id="QTY6">
<option></option>
<option>1</option>
</select>
<br />
<br>
SAFETY VEST
<select name="SAFETYVEST" id="SAFETYVEST">
<option></option>
<option>1</option>
</select>
<br />
<br>
POUCH
<select name="POUCH" id="POUCH">
<option></option>
<option>1</option>
</select>
<br />
<br>
LANYARD
<select name="LANYARD" id="LANYARD">
<option></option>
<option>1</option>
</select>
<br />
<br>
REASONS/REMARKS
<br >
<textarea name="RR" id="RR" cols="40" rows="8" placeholder="Fill this if you are exchanging kit"></textarea>
<input type="submit" id="b1" onClick="insert_value()" value="Insert"></input>
</form>
To enable quantity on select change, These are the changes I have made in 1 of your select box, you can replicate the same for others
<select name="SHIRT1" id="SHIRT1" onchange="enableQuantity(this.value, 'QTY1')">
<option value=""></option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
</select><br />
<br>
QTY
<SELECT name="QTY1" id="QTY1" disabled>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</SELECT>
and javascript
function enableQuantity(selectValue, qtyEle) {
document.getElementById(qtyEle).disabled = selectValue ? false : true;
}
Hope this works
Upvotes: 3
Related Questions
- Why does my validation not work when I change an input to an anchor?
- HTML Input Required not working as expected
- required attribute is not working in html form
- required is not working for the text field
- Required in HTML form not working
- form field required not working
- "Required" HTML5 tag not working
- HTML Required attribute not working on a simple Input
- html required tag doesn't work for form submission
- Why required option is not working in text field?