Enviar formulário com campos ocultos
06/10/2019
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:
E para ocultar estes selects uso os seguintes scripts:
E este é o script que faz o envio do formulário, onde obtenho as informações preenchidas:
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">
<div>
<div class="custom-control custom-checkbox">
<input id="userconfirm_0" name="userconfirm" type="checkbox" required="required" class="custom-control-input" value="userconfirm">
<label for="userconfirm_0" class="custom-control-label">Confirme para criar o usuário</label>
<div class="invalid-feedback">Por favor, confirme para criar o usuário.</div>
</div>
</div>
</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 = $
Rodrigo
Curtir tópico
+ 0
Responder
Posts
06/10/2019
Rodrigo
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 ?
Tem algo de errado no meu formulário ?
Responder
09/10/2019
Rodrigo
Alguém com alguma ideia brilhante que possa me ajudar nesse projeto ?
Responder
Clique aqui para fazer login e interagir na Comunidade :)