jeudi 10 août 2017

Making a multiple checkbox form answered before submit

I am creating a form. It has multiple text inputs, as well as checkbox inputs. I need all questions on the form to be required before the user can submit the form to a mailto:. I used the "required" tag on all the text inputs, but if it is used on the checkbox inputs it makes the user select all checkboxes, not just one answer.

Here is a sample of the checkbox form code:

<form action="mailto:name@email.com" method="post" enctype="text/plain" id="main-form">

  <div class="half-element">
    <label>Are you willing to accept misprinted samples that have been previously printed?</label>
    <div class="yes-no-block">
      <input type="checkbox" name="samples" value="yes">
      <p class="yes-no-text">Yes</p>
    </div>
    <div class="yes-no-block">
      <input type="checkbox" name="samples" value="no">
      <p class="yes-no-text">No</p>
    </div>
  </div>

  <div class="half-element">
    <label>Do you offer sponsor recognition online?     *This is not required for eligibility</label>
    <div class="yes-no-block"><input type="checkbox" onclick="javascript:yesnoCheck();" name="sponsors" id="yesCheck"><p class="yes-no-text">Yes</p></div>
    <div class="yes-no-block"><input type="checkbox" onclick="javascript:yesnoCheck();" name="sponsors" id="noCheck"><p class="yes-no-text">No</p></div><br>
    <div id="ifYes" style="display: none;">
      If yes, where can we find current sponsor recognition online? <input type='text' id='yes' name='Online sponsor recognition found here'><br>
    </div>
  </div>

  <div class="half-element">
    <label>Can we feature your organization or cause on our <a href="#">Charitable Giving</a> page?</label>
    <div class="yes-no-block"><input type="checkbox" name="Yes you can feature my organization" id="yes"><p class="yes-no-text">Yes</p></div>
    <div class="yes-no-block"><input type="checkbox" name="No do not feature my organization" id="no" style="margin-left: 10%;"><p class="yes-no-text">No</p>
    </div>
  </div>

  <div class="submit-button">
    <input type="submit" value="Submit" style="font-family: century gothic;">
  </div>

</form>

I already have some javascript being used for a "if yes," question, and I am new to javascript so I am unsure of how to make sure at least one checkbox is checked for each question before the form can be submitted, without disrupting the already included javascript.




Aucun commentaire:

Enregistrer un commentaire