Problem in Form with Ajax and Codeigniter

Asked

Viewed 44 times

0

Good night,

I am using Codeigniter 3.1.9 on my default server. I have a form that is below. In the case , I can’t let the State stay in a Select and the City update itself with ajax according to the state chosen. I already have all Cities and States in the bank (with id of each State). Nothing returns in Alert.

I’d really appreciate a little help!

Thank you.

    <?php
      defined('BASEPATH') OR exit('No direct script access allowed');
    ?>

    <!DOCTYPE html>
    <html lang="pt-BR">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.js"integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="crossorigin="anonymous"></script>
        <title>Cadastrar novos Médicos</title>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      </head>

      <style>
    .centralize {
      justify-content:center;
      align-items:center;
      flex-direction:column;
    }
      </style>

      <body>    

    <div class="container">

      <div class="row centralize">

        <h1>Cadastrar Novos Produtos</h1>       

        <form action="ativar/salvar" name="form_add" method="post" class="col-md-12">


          <div class="row">
            <div class="col-md-12">
              <label>Nome</label>
              <input type="text" name="nome" value="" class="form-control">
            </div>
          </div> 


          <div class="row">
            <div class="col-md-12">
              <label>telefone</label>
              <input type="text" name="telefone" value="" class="form-control">
            </div>
          </div>,
          <div class="row">
            <div class="col-md-12">
            <select name="estado" class="form-control" id="estados">
            <?php 
            foreach ($estados as $estado) : ?>
                <option>
                  <php $estado['nome'] ?>
                <?php endforeach ?>
                </option>
            </select>
            </div>
          </div>

          <script>
              jQuery("#estados").on("change",function() {
                  var idEstado = jQuery("#estadoid").val();
                  alert(idEstado);
              });
          </script>



          <div class="row">
            <div class="col-md-12">
              <button type="submit" class="btn btn-primary">Cadastrar</button>
            </div>
          </div>


        </form>

      </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    </body>
    </html>
  • Try it like this: var idEstado = this.value;

1 answer

0

Replace your script with this:

<script>
    $("#estados").on("change",function() {
        var idEstado = $(this).val();
        alert(idEstado);
    });
</script>

Some examples: insert link description here

  • Dear Morning! Thank you for the reply. Now appeared the name of the right cities but in my database I need to return the ID I am calling in this input > <input type="Hidden" <?php foreach ($states as $status) : ? > <input type="Hidden" id="estadoid"<?= $status['id'] ? > <?php endforeach ?>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.