I'm having trouble creating a wizard form for a Combobox of neighborhoods and streets ...
Ex: Neighborhood_1: Downtown Street_1 (Neighborhood_1) Street_2 (Neighborhood_1) Street_3 (Neighborhood_1)
Neighborhood_2: Progress Street_1 (Neighborhood_2) Street_2 (Neighborhood_2) Street_3 (Neighborhood_2)
When I choose the neighborhood, it is necessary to pass the ID to the next page of the wizard making a _POST submit in
<input class="icheck" type="radio" id="id_bairro" name="id_bairro" value="ID_SELECIONADO" />
Follow the code below:
$(document).on('click', '.cadastro_cep', function(){
$('#modalCadastroCep').modal('show');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="modal fade" id="modalCadastroCep" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
<div class="modal-wrapper">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel4">Cadastro</h4>
</div>
<!-- BEGIN MAIN CONTENT -->
<section class="content">
<div class="row">
<!-- BEGIN FORM WIZARD -->
<div class="col-md-12">
<div class="grid">
<div class="grid-body">
<div id="rootwizard">
<div class="navbar">
<ul>
<li><a href="#tab2" data-toggle="tab">2</a><span>Bairro</span></li>
<li><a href="#tab3" data-toggle="tab">3</a><span>Rua</span></li>
<li><a href="#tab4" data-toggle="tab">4</a><span>FIM!</span></li>
</ul>
</div>
<div id="bar" class="progress progress-striped active">
<div class="bar progress-bar progress-bar-primary"></div>
</div>
<form method="post">
<div class="tab-content">
<div class="tab-pane" id="tab2">
<div class="form-horizontal">
<div class="text-center form-group">
<label class="control-label"><h3>Selecione um bairro</h3></label>
<div class="row">
<div class="text-center col-md-12">
<div class="grid no-border">
<div class="grid-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Selecionar</th>
<th>Nome</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="icheck" type="radio" id="id_bairro" name="id_bairro" value="1" /></td>
<td>Centro</td>
<td><input class="icheck" type="radio" id="id_bairro" name="id_bairro" value="2" /></td>
<td>Progresso</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="form-horizontal">
<div class="text-center form-group">
<label class="control-label"><h3>Selecione um a rua</h3></label>
<div class="row">
<div class="text-center col-md-12">
<div class="grid no-border">
<div class="grid-body">
<div class="table-responsive">
<?php
//ID DO BAIRRO SELECIONADO
$cod_bairro = $_POST["id_bairro"];
if(isset($_POST["id_bairro"])){
$cod_bairro = $_POST["id_bairro"];
$queryRuas = "SELECT *
FROM rua
WHERE cod_bairro='$cod_bairro' AND id_usuario='$id_usuario'";
$resultadoRuas = mysql_query($queryRuas,$conexao)or die(mysql_error());
while ($linhaRuas = mysql_fetch_array($resultadoRuas)) {
?>
<table class="table">
<thead>
<tr>
<th>Selecionar</th>
<th>Nome</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="icheck" type="radio" id="id_bairro" name="id_bairro" value="<?php $linhaRuas['id']; ?>" /></td>
<td><?php echo $linhaRuas['nome']; ?></td>
</tr>
</tbody>
</table>
<?php }else{?>
<label class="control-label"><h3>Volte e selecione um bairro | ID:<?php echo $cod_bairro;?></h3></label>
<?php }?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab4">
<div class="finish">
<h1><i class="fa fa-thumbs-o-up text-light-blue"></i>Cadastrado com sucesso.</h1>
<button type="button" class="btn btn-success">Visitar</button>
</div>
</div>
<hr>
<ul class="pager wizard">
<li class="previous"><a href="#">Voltar</a></li>
<li class="next"><a type="submit" >Avançar</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>Any doubts, just talk. Thank you!