0
Is returning this error in the console when I send a form with Ajax
An invalid form control with name='' is not focusable.
empresas_cadastrar.php:1 An invalid form control with name='bairro1' is not focusable.
empresas_cadastrar.php:1 An invalid form control with name='bairro3' is not focusable.
empresas_cadastrar.php:1 An invalid form control with name='bairro4' is not focusable.
empresas_cadastrar.php:1 An invalid form control with name='bairro5' is not focusable.
empresas_cadastrar.php:1 An invalid form control with name='bairro19' is not focusable.
These bug Ids name='neighborhood...' comes from a jquery, with the code below
$(document).ready(function(){
$(document).on('change', '#sectionChooser', function(){
var myID = $(this).val();
$('.panel').each(function(){
//var form_data= new FormData('.panel');
myID === $(this).attr('id') ? $(this).show() : $(this).hide();
console.log("ok");
});
})
$(document).on('change', '[name^="bairro"]', function(){
var bairroID = $(this).val();
console.log("ok");
if(bairroID){
$.ajax({
type:'POST',
url:'ajax_data2.php',
data:'bairro_id='+bairroID,
success:function(html){
$('#rua[name^="rua"]').html(html);
}
});
}else{
$('#rua').html('<option value="">Select bairro first</option>');
}
});
});
this is the code for sending the values of the entered fields
$(document).ready(function(e){
$("#form_cadastros_empresa").on('submit', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'form_cadastro.php',
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend: function(){
$('.submitBtn').attr("disabled","disabled");
$('#form_cadastros_empresa').css("opacity",".5");
},
success: function(msg){
$('.resultado_form_cadastros_empresa').html('');
if(msg == 'ok'){
$('#form_cadastros_empresa')[0].reset();
$('.resultado_form_cadastros_empresa').html('<span style="font-size:18px;color:#34A853">Form data submitted successfully.</span>');
}else{
$('.resultado_form_cadastros_empresa').html('<span style="font-size:18px;color:#EA4335">Some problem occurred, please try again.</span>');
}
$('#form_cadastros_empresa').css("opacity","");
$(".submitBtn").removeAttr("disabled");
}
});
});
});
How would you solve this error problem?
Html
<div class="resultado_form_cadastros_empresa"></div>
<form method="post" action="javascript:;" id="form_cadastros_empresa" enctype="multipart/form-data" style="padding-left: 50px;">
<div class="form-group row">
<div class="col-sm-6">
<label for="Numero">Usuário</label>
<input type="text" class="form-control" id="nomeUsuario" placeholder="Usuário">
</div>
<div class="col-sm-6">
<label for="Complemento">Senha</label>
<input type="text" class="form-control" id="senha" placeholder="Senha">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="Nome">Categoria</label>
<select class="form-control" name="categoria" id="categoria" required>
<option value="">Selecione</option>
<?php //Open a new connection to the MySQL server $mysqli=n ew mysqli( xxx); //Output any connection error if ($mysqli->connect_error) { die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error); } //MySqli Select Query $results = $mysqli->query("SELECT * FROM categorias"); while($row = $results->fetch_assoc()) { echo '
<option value="'.$row[" id "].'">'.utf8_encode($row["nome_categoria"]).'</option>'; } // Frees the memory associated with a result $results->free(); // close connection $mysqli->close(); ?></select>
</div>
<div class="col-sm-6">
<label for="SobreNome">Subcategoria</label>
<select class="form-control" name="subcategoria" id="subcategoria" required></select>
</div>
</div>
<br>
<hr>
<br>
<div class="form-group row">
<div class="col-sm-12">
<label for="Nome">Nome da Empresa</label>
<input type="text" class="form-control" id="Nome" placeholder="Nome" required>
</div>
</div>
<br>
<hr>
<br>
<div class="form-group row">
<div class="col-sm-6">
<label for="funcionamento">Horário de Funcionamento</label>
<input type="text" class="form-control" id="funcionamento" placeholder="Horário de Funcionamento">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="descricao">Descrição da Empresa</label>
<textarea rows="20" cols="50" id="descricao" placeholder="Descrição da Empresa"></textarea>
</div>
<div class="col-sm-6">
<label for="Site">Site</label>
<input type="text" class="form-control" id="Site" placeholder="Site">
</div>
</div>
<br>
<hr>
<br>
<div class="form-group row">
<div class="col-sm-4">
<label for="Facebook">Facebook</label>
<input type="text" class="form-control" id="Facebook" placeholder="Facebook">
</div>
<div class="col-sm-4">
<label for="Intsagram">Instagram</label>
<input type="text" class="form-control" id="Instagram" placeholder="Intsagram">
</div>
<div class="col-sm-4">
<label for="Twitter">Twitter</label>
<input type="text" class="form-control" id="Twitter" placeholder="Twitter">
</div>
</div>
<br>
<hr>
<br>
<div class="form-group row">
<div class="col-sm-6">
<label for="Planos">Planos</label>
<select name="Planos" id="sectionChooser" class="form-control">
<option value="">Selecione</option>
<?php //Open a new connection to the MySQL server $mysqli=n ew mysqli( xxx); //Output any connection error if ($mysqli->connect_error) { die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error); } //MySqli Select Query $results = $mysqli->query("SELECT * FROM planos"); while($row = $results->fetch_assoc()) { echo '
<option value="'.$row[" id "].'">'.utf8_encode($row["nome_plano"]).'</option>'; } // Frees the memory associated with a result $results->free(); // close connection $mysqli->close(); ?></select>
<?php //Open a new connection to the MySQL server $mysqli=n ew mysqli( xxx); //Output any connection error if ($mysqli->connect_error) { die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error); } //MySqli Select Query $results_panos_2 = $mysqli->query("SELECT * FROM planos"); while($row_planos_2 = $results_panos_2->fetch_assoc()) {;?>
<div class="panel" id="<? echo $row_planos_2[" id "];?>">
<div class="col-sm-12">
<label><b><? echo utf8_encode($row_planos_2["nome_plano"]).'';?></b>
</label>
</div>
<div class="form-group ">
<div class="row">
<? if (($row_planos_2[ "endereco_buscaiuva"]=="1" )){?>
<div class="col-sm-12">
<label for="endereco_buscauiva">Endereço Buscauiva</label>
<input type="text" class="form-control" id="endereco_buscauiva" placeholder="http://buscaiuva.com.br/NomeDaEmpresa" required>
</div>
<?}?>
</div>
</div>
<div class="form-group ">
<div class="row">
<? if (($row_planos_2[ "logomarca"]=="1" )){?>
<div class="col-sm-12">
<label for="Logomarca">Logomarca</label>
<input type="file" class="form-control" id="Logomarca">
</div>
<? } ?>
</div>
</div>
<div class="form-group ">
<div class="row">
<? if (($row_planos_2[ "banner1"]=="1" )){?>
<div class="col-sm-4">
<label for="imagem1">Imagem banner 1</label>
<input type="file" class="form-control" id="imagem1">
</div>
<? }?>
<? if (($row_planos_2[ "banner2"]=="1" )){?>
<div class="col-sm-4">
<label for="imagem2">Imagem banner 2</label>
<input type="file" class="form-control" id="imagem2">
</div>
<? }?>
<? if (($row_planos_2[ "banner3"]=="1" )){?>
<div class="col-sm-4">
<label for="imagem3">Imagem banner 3</label>
<input type="file" class="form-control" id="imagem3">
</div>
<? }?>
</div>
</div>
<div class="form-group ">
<div class="row">
<? if (($row_planos_2[ "telefone1"]=="1" )){?>
<div class="col-sm-4">
<label for="Telefone1">Telefone 1</label>
<input type="text" class="form-control" id="Telefone1" placeholder="Telefone 1" required>
</div>
<? }?>
<? if (($row_planos_2[ "telefone2"]=="1" )){?>
<div class="col-sm-4">
<label for="Telefone2">Telefone 2</label>
<input type="text" class="form-control" id="Telefone2" placeholder="Telefone 2">
</div>
<? }?>
<? if (($row_planos_2[ "telefone3"]=="1" )){?>
<div class="col-sm-4">
<label for="Telefone3">Telefone 3</label>
<input type="text" class="form-control" id="Telefone3" placeholder="Telefone 3">
</div>
<? }?>
<hr>
</div>
</div>
<? if (($row_planos_2[ "endereco_empresa"]=="1" )){?>
<div class="form-group ">
<div class="row">
<div class="col-sm-6">
<label for="Bairro">Bairro</label>
<select class="form-control" name="bairro<? echo $row_planos_2[" id "];?>" id="bairro<? echo $row_planos_2[" id "];?>" required>
<option value="">Selecione</option>
<?php //Open a new connection to the MySQL server $mysqli=n ew mysqli( xxx); //Output any connection error if ($mysqli->connect_error) { die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error); } //MySqli Select Query $results = $mysqli->query("SELECT * FROM bairro"); while($row = $results->fetch_assoc()) { echo '
<option value="'.$row[" id "].'">'.utf8_encode($row["bairro"]).'</option>'; } // Frees the memory associated with a result $results->free(); // close connection $mysqli->close(); ?></select>
</div>
<div class="col-sm-6">
<label for="Rua">Rua</label>
<select class="form-control" name="rua<? echo $i++;?>" id="rua" required></select>
</div>
<br>
<br>
<br>
<br>
<div class="col-sm-4">
<label for="Numero">Número</label>
<input type="text" class="form-control" id="Numero" placeholder="Número">
</div>
<div class="col-sm-4">
<label for="Complemento">Complemento</label>
<input type="text" class="form-control" id="Complemento" placeholder="Complemento">
</div>
<div class="col-sm-4">
<label for="CEP">CEP</label>
<input type="text" class="form-control" id="CEP" placeholder="CEP">
</div>
</div>
</div>
<? }?>
<div class="form-group ">
<div class="row">
<? if (($row_planos_2[ "palavras_chave"]=="1" )){?>
<div class="col-sm-6">
<label for="palavras_chave">Palavras-chave</label>
<input type="text" class="form-control" id="palavras_chave" placeholder="Palavras-chave">
</div>
<? }?>
<? if (($row_planos_2[ "marcas"]=="1" )){?>
<div class="col-sm-6">
<label for="marcas">Marcas</label>
<input type="text" class="form-control" id="marcas" placeholder="Maras">
</div>
<? }?>
</div>
</div>
<div class="form-group ">
<div class="row">
<? if (($row_planos_2[ "blocos"]=="1" )){?>
<div class="col-sm-6 " style="margin-top:20px;">
<p>Tipo do Banner</p>
<select class="form-control" id="blocos">
<option value="nenhum_tipo">Nenhum</option>
<option value="Bloco_1">Bloco 1</option>
<option value="Bloco_2">Bloco 2</option>
<option value="Bloco_3">Bloco 3</option>
<option value="Bloco_4">Bloco 4</option>
<option value="Bloco_5">Bloco 5</option>
</select>
</div>
<div class="col-sm-6" style="margin-top:20px;">
<p>Aparecer por</p>
<select class="form-control" id="banner_tempo">
<option value="8_segundos">8 segundos</option>
</select>
</div>
<? }?>
</div>
</div>
</div>
<? } // Frees the memory associated with a result $results_panos_2->free(); // close connection $mysqli->close(); ?></div>
<div class="col-sm-6">
<div class="form-check" style="margin-top: 40px;text-align: center;">
<input type="checkbox" class="form-check-input" id="plano_congelado">
<label class="form-check-label" for="plano_congelado">Plano Congelado</label>
</div>
</div>
</div>
<input type="hidden" class="form-control" id="cadastros_empresa" placeholder="cadastros_empresa" value="cadastros_empresa">
<button type="submit" class="submitBtn">Cadastrar</button>
</form>
How is the page that receives the data sent by Ajax and makes the return?
– Sam