CODEWITHSUNDEEP
javascripthtmlcss
Avye Le
Avye Le

Reputation: 41

How to add required to select field without input tag in html

I have this gender selector code how do i add a required attribute to it just like the input text field above it . The code for gender has no input tag to add the required tag name and id for evaluation by php. How will the data for gender be sent to next processing page as normal select field. Question is by a 2 weeks old programmer.

$('.gender-selector .item').on('click', function() {
  $('.gender-selector .item').removeClass('active');
  $(this).addClass('active')
})
.gender-selector {
  width: 300px;
}

.gender-selector h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  width: 100%;
  height: 65px;
  align-items: center;
  display: flex;
  justify-content: center;
  font-weight: normal;
}

.gender-selector .container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.gender-selector .container .item {
  width: 140px;
  height: 150px;
  border: 2px solid #eceff1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: inset 0px 0px 0px #000 42;
  transition: all linear 0.1s;
}

.gender-selector .container .item.girl.active {
  border: 2px solid #e91e63;
}

.gender-selector .container .item.girl.active .circle {
  width: 15px;
  height: 15px;
  background: #e91e63;
}

.gender-selector .container .item.girl:hover {
  cursor: pointer;
  border: 2px solid #e91e63;
}

.gender-selector .container .item.boy.active {
  border: 2px solid #2196f3;
}

.gender-selector .container .item.boy.active .circle {
  width: 15px;
  height: 15px;
  background: #2196f3;
}

.gender-selector .container .item.boy:hover {
  cursor: pointer;
  border: 2px solid #2196f3;
}

.gender-selector .container .item .icon {
  width: 64px;
  height: 64px;
  overflow: hidden;
  margin: 0 auto;
}

.gender-selector .container .item .icon img {
  max-width: 100%;
  max-height: 100%;
}

.gender-selector .container .item p {
  text-align: center;
  margin-top: 10px;
}

.gender-selector .container .item .checked {
  width: 20px;
  height: 20px;
  background: #eceff1;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gender-selector .container .item .checked .circle {
  width: 0px;
  height: 0px;
  background: #e91e63;
  border-radius: 50%;
  transition: all linear 0.1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" name="name" id="name" placeholder="My name is" required>
  <div class="gender-selector center">
    <h3>I am</h3>
    <div class="container">
      <div class="item girl">
        <div class="checked">
          <div class="circle"></div>
        </div>
        <div class="icon">
          <img src="https://image.flaticon.com/icons/svg/40/40739.svg" alt="">
        </div>
        <p>Female</p>
      </div>
      <div class="item boy">
        <div class="checked">
          <div class="circle"></div>
        </div>
        <div class="icon">
          <img src="https://image.flaticon.com/icons/svg/40/40541.svg" alt="">
        </div>
        <p>Male</p>
      </div>
    </div>
  </div>
  <input type="submit"></input>
</form>

Upvotes: 3

Views: 183

Answers (1)

marcogmonteiro
marcogmonteiro

Reputation: 2162

Your code is missing an input for each option. That input must be radio type and should have the same name on both with different values, like so:

<label>
    <input type="radio" required="required" value="boy"> Boy
</label>

<label>
     <input type="radio" required="required" value="girl"> Girl
</label>

You can place them in the same place you have your div.circle and style them to look the same way you have them.

If you want to make the input tag hidden just do that and in your JS add the selected to the one the user clicks when he does click on them.

Bare in mind that if the input is hidden you'll not be able to submit the form without the user clicking on it and the user wont know why the form is not submitting since you'll have a console error.

Upvotes: 2

Related Questions