Enviar formulário com campos ocultos

[roohmcd 0]

Galera, seguinte, eu tenho um formulário com dois selects ocultos, eles serão exibidos somente quando eu selecionar uma das opções no select pai, porém toda vez que faço o envio deste ele pega o valor de um select oculto. Tem alguma maneira de fazer com ele só pegue o valor se eu selecionar a opção no select pai ?

 

Este é meu formulário:

 

<form id="createusers" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" class="needs-validation" oninput='userrepassword.setCustomValidity(userrepassword.value != userpassword.value ? "Senhas não conferem." : "")' novalidate>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="fas fa-user-circle"></i></div>
          </div>
          <input id="username" name="username" placeholder="Usuário" type="text" aria-describedby="usernameHelpBlock" required="required" class="form-control">
          <div class="invalid-feedback">Por favor, digite um nome de usuário válido.</div>
        </div>
        <small id="usernameHelpBlock" class="form-text text-muted">Digite um nome de usuário.</small>
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="fa fa-lock"></i></div>
          </div>
          <input id="userpassword" name="userpassword" placeholder="Senha" type="password" required="required" class="form-control" aria-describedby="userpasswordHelpBlock">
          <div class="invalid-feedback">Por favor, digite uma senha.</div>
        </div>
        <small id="userpasswordHelpBlock" class="form-text text-muted">Digite uma senha para o usuário. Sua senha deve ter no mínimo 6 caracteres.</small>
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="fa fa-lock"></i></div>
          </div>
          <input id="userrepassword" name="userrepassword" placeholder="Confirme a senha" type="password" required="required" class="form-control" aria-describedby="userrepasswordHelpBlock">
          <div class="invalid-feedback">Por favor, confirme a senha.</div>
        </div>
        <small id="userrepasswordHelpBlock" class="form-text text-muted">Confirme a senha.</small>
      </div>
      <div class="form-group">
        <label>Informe o grupo do usuário</label>
        <select id="usergroup" name="usergroup" class="form-control" required>
          <option value="">-- Selecione uma opção --</option>
          <option value="neg">Negado</option>
          <option value="tot">Total</option>
          <option value="controlado">Controlado</option>
          <option value="restrito">Restrito</option>
          <option value="lib">Liberado</option>
          <option value="noc">No Cache</option>
        </select>
        <div class="invalid-feedback">Por favor, selecione uma opção para informar o grupo do usuário.</div>
        <small id="usergroupHelpBlock" class="form-text text-muted">Selecione um grupo para o usuário.</small>
      </div>
      <div class="form-group">
        <label>Selecione o grupo controlado para o usuário</label>
        <select id="usergroup-controlado" name="usergroup" class="form-control">
          <option value="c01">Controlado 01</option>
          <option value="c02">Controlado 02</option>
          <option value="c03">Controlado 03</option>
        </select>
      </div>
      <div class="form-group">
        <label>Selecione o grupo restrito para o usuário</label>
        <select id="usergroup-restrito" name="usergroup" class="form-control">
          <option value="r01">Restrito 01</option>
          <option value="r02">Restrito 02</option>
          <option value="r03">Restrito 03</option>
          <option value="r04">Restrito 04</option>
          <option value="r05">Restrito 05</option>
          <option value="r06">Restrito 06</option>
          <option value="r07">Restrito 07</option>
          <option value="r08">Restrito 08</option>
          <option value="r09">Restrito 09</option>
        </select>
      </div>
      <div class="form-group">
        <button id="submitcreateuser" name="submitcreateuser" type="submit" class="btn btn-primary">Criar Usuário</button>
      </div>
    </form>

E para ocultar estes selects uso os seguintes scripts:

 

<script type="text/javascript">
(function( $ ){
  $.fn.dependsOn = function(element, value,callback) {
    var elements = this;
    var isContainer = false;
    //add change handler to element
    $(element).change(function(){
      var $this = $(this);
      var showEm = false;
      if ( $this.is('select') ) {
        var fieldValue = $this.find('option:selected').val();
        if ( !value ) {
          showEm = fieldValue && $.trim(fieldValue) != '';
        } else if (typeof(value) === 'string') {
          showEm = value == fieldValue;
        } else if ($.isArray(value)) {
          showEm = ($.inArray(fieldValue, value) !== -1);
        }
      } else if ($this.is('input[type="text"]')){
        var fieldValue = $this.val();
        if ( !value ) {
          showEm = fieldValue && $.trim(fieldValue) != '';
        } else if (typeof(value) === 'string') {
          showEm = value == fieldValue;
        } else if ($.isArray(value)) {
          showEm = ($.inArray(fieldValue, value) !== -1);
        }
      }
      // add containers for input
      else if ($this.hasClass('depends-container')){ 
        isContainer=true;
        var target = $this.find('input[type="text"]');
        var fieldValue = target.val();
        if ( !value ) {
          showEm = fieldValue && $.trim(fieldValue) != '';
        } else if (typeof(value) === 'string') {
          showEm = value == fieldValue;
        } else if ($.isArray(value)) {
          showEm = ($.inArray(fieldValue, value) !== -1);
        }
      }

      if(isContainer){

        elements.each(function(){
          $(this).toggle(showEm);
          if(callback){
            callback();
          }
        });

      }else{
        elements.closest('div').toggle(showEm);
        if(callback){
          callback();
        }
      }

    });

    //hide the dependent fields
    return elements.each(function(){

      var $this= $(this);
      var isContainer= false;
      $(element).each(function(index){
        var el = $(this); 
        if(el.hasClass('depends-container') && el.find('input[type="text"]').length){
          isContainer = true;
          el = el.find('input[type="text"]');
          if(el.val() != '' && $this.is('visible') == false ){
            $this.show();
            if(callback){
              callback();
            }
          }
        }
      });

      if(!isContainer){
        $(this).closest('div').hide();
      }

    });
  };
})( jQuery );
</script>
<script type="text/javascript">
$('#usergroup-controlado').dependsOn('#usergroup', ['controlado']);
$('#usergroup-restrito').dependsOn('#usergroup', ['restrito']);
</script>

E este é o script que faz o envio do formulário, onde obtenho as informações preenchidas:

 

<?php
        if(isset( $_POST['submitcreateuser'] )) {
            $fullname = $_POST["fullname"];
            $username = $_POST["username"];
            $userpassword = $_POST["userpassword"];
            $userrepassword = $_POST["userrepassword"];
            $networkaccess = $_POST["networkaccess"];
            $usergroup = $_POST["usergroup"];
            $createuser = "$username $fullname $networkaccess $usergroup $userpassword $userrepassword s -a; echo $?";

            echo "<pre> >> $createuser << </pre>";

        }
    ?>

Os selects ocultos são os do grupo Controlado e Restrito, quando selecionar essas opções ele abre outro select com as opções respectivas, tipo Controlado ele irá exibir o select Controlado 01, Controlado 02, Controlado 03. E assim serve também para a opção Restrito.

 

Tem algo de errado no meu formulário ?