Passing AJAX parameters

Question

Passing AJAX parameters

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I'm developing a web application and I'm using AJAX and JSP would like that when I register the client data send by parameter to another page the name and the email of the client plus it sends with an error, it even sends the parameters but with these quotes' ''

HTML

<form >
 <div class="container-fluid">
 <div class="row">
 <div class="col-sm-6 col-md-4">
Nome Completo:<input type="text" id="nome" name="nome"><br/><br/>
</div>


 <div class="col-sm-6 col-md-4">

 CEP:<input type="text" id="cep" name="cep"><button type="button" id="buscar_cep"><i class="fa fa-search" action="" ></i></button> <br/><br/>
 </div>

  <div class="col-sm-6 col-md-4">
Celular:<input type="text" id="nr_celular" name="celular"><br/><br/>
 </div>

 <div class="col-sm-6 col-md-4">
CPF:<input type="text" id="cpf" name="cpf" ><br/><br/>
 </div>

 <div class="col-sm-6 col-md-4">
UF:<input type="text" id="uf" name="uf" ><br/><br/>
 </div>

 <div class="col-sm-6 col-md-4">
Cidade:<input type="text" id="cidade" name="uf"><br/><br/>
 </div>
</div>

  <div class="row">

    <div class="col-sm-6 col-md-4">
  Rua:<input type="text" id="rua" name="endereco"><br/><br/>
</div>

       <div class="col-sm-6 col-md-4">
  RG:<input type="text" id="rg" name="endereco"><br/><br/>
 </div>

     <div class="col-sm-6 col-md-4">
Bairro:<input type="text" id="bairro" name="endereco"><br/><br/>
   </div>
    <div class="col-sm-6 col-md-4">
Telefone:<input type="text" id="telefone" name="telefone"><br/><br/>
    </div>

    <div class="col-sm-6 col-md-4">
Login:<input type="text" id="login" name="login"><br/><br/>
    </div>

    <div class="col-sm-6 col-md-4">
        Senha:<input type="password" id="senha" name="senha"><br/><br/>
    </div>

    <div class="col-sm-6 col-md-4">
        Confirmar Senha:<input type="password" id="confirma_senha" name="confirma_senha"><br/><br/>
    </div>
    <div class="col-sm-6 col-md-4">
Data de Nascimento:<input type="text" id="nascimento_dt" name="nascimento"><br/><br/>
  </div>

     <div class="col-sm-6 col-md-4">
    Email:<input type="text" id="email" name="email" ><br/><br/>
  </div>
        <div class="col-sm-6 col-md-4">
Estado Civil:  <label for="s1">Solteiro(a)</label>
    <input type="radio" id="solt" name="status"  value="solteiro"/>

    <label for="s2">Casado(a)</label>
    <input type="radio" id="estado_civil" name="status" value="casado"/><br/><br/>
        </div>

         <div class="col-sm-6 col-md-4">
Sexo:  <label for="s4">Masculino</label>
    <input type="radio" id="masc" name="sexo" value="masculino"/>

    <label for="s6">Feminino</label>
    <input type="radio" id="fem" name="sexo" value="feminino"/><br/><br/>

    </div>
</div>

    <button type="button" onclick="cadastrar()" >Cadastrar</button> 
</div>

</form>

AJAX

<script type="text/javascript">

   function cadastrar(){


       $.ajax({  
type: "POST",  
url: "CadastroCliente",  
 data: {
nome: $("input[id=nome]").val(),
cep: $("input[id=cep]").val(),
celular: $("input[id=nr_celular]").val(),

cpf: $("input[id=cpf]").val(),
uf: $("input[id=uf]").val(),

cidade: $("input[id=cidade]").val(),
rua: $("input[id=rua]").val(),
rg: $("input[id=rg]").val(),

bairro: $("input[id=bairro]").val(),
telefone: $("input[id=telefone]").val(),
login: $("input[id=login]").val(),
 senha: $("input[id=senha]").val(),
confirmar_senha: $("input[id=confirma_senha]").val(),
data_nascimento: $("input[id=nascimento_dt]").val(),
 estado_civil: $("input[name='status']:checked").val(),
 sexo: $("input[name='sexo']:checked").val(),
 email: $("input[id=email]").val(),

  },

  success: function(result){   
var email = $("input[id=email]").val();
 var nome= $("input[id=nome]").val();
 window.location.href = "ConfirmacaoCadastro.jsp?email="+email+"'"+" nome='"+nome+"'";

 },
 error:function(){
  window.location.href = "erro.jsp";

    },
    });

   } 


</script>

Error page that receives the parameters.

java ajax java-ee servlet

asked by anonymous 29.10.2017 / 02:40

2 answers

Execute javascript function in php Pick up time and tell the user

score 0 · Answer 1

<form id="form">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 col-md-4">
                Nome Completo:<input type="text" id="nome" name="nome"><br/><br/>
            </div>


            <div class="col-sm-6 col-md-4">

                CEP:<input type="text" id="cep" name="cep"><button type="button" id="buscar_cep"><i class="fa fa-search" action="" ></i></button> <br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Celular:<input type="text" id="nr_celular" name="celular"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                CPF:<input type="text" id="cpf" name="cpf" ><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                UF:<input type="text" id="uf" name="uf" ><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Cidade:<input type="text" id="cidade" name="uf"><br/><br/>
            </div>
        </div>

        <div class="row">

            <div class="col-sm-6 col-md-4">
                Rua:<input type="text" id="rua" name="endereco"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                RG:<input type="text" id="rg" name="endereco"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Bairro:<input type="text" id="bairro" name="endereco"><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                Telefone:<input type="text" id="telefone" name="telefone"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Login:<input type="text" id="login" name="login"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Senha:<input type="password" id="senha" name="senha"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Confirmar Senha:<input type="password" id="confirma_senha" name="confirma_senha"><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                Data de Nascimento:<input type="text" id="nascimento_dt" name="nascimento"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Email:<input type="text" id="email" name="email" ><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                Estado Civil:  <label for="s1">Solteiro(a)</label>
                <input type="radio" id="solt" name="status"  value="solteiro"/>

                <label for="s2">Casado(a)</label>
                <input type="radio" id="estado_civil" name="status" value="casado"/><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Sexo:  <label for="s4">Masculino</label>
                <input type="radio" id="masc" name="sexo" value="masculino"/>

                <label for="s6">Feminino</label>
                <input type="radio" id="fem" name="sexo" value="feminino"/><br/><br/>

            </div>
        </div>

        <button type="button" onclick="cadastrar()" >Cadastrar</button> 
    </div>

</form>



<script type="text/javascript">

    function cadastrar() {


        $.ajax({
            type: "POST",
            url: "CadastroCliente",
            /* Use o serialize para pega todos os campos do form de id #form*/
            data: $("#fom").serialize(),
            /* Aqui no success o result no seu caso voce nao esta chamando ele em nada  */
            success: function (result) {

                /* Para chamar qualquer element com o id="tal" pode ser assim */
                var email = $("#email").val();
                var nome = $("#nome").val();
                /*E nao assim 
                 var nome = $("input[id=nome]").val();
                 */
                window.location.href = "ConfirmacaoCadastro.jsp?email="+email+"&nome=" + nome + ";

            },
            error: function () {
                window.location.href = "erro.jsp";

            }
        });
    }


</script>

score 0 · Answer 2

You are doing the reference in the wrong way, you actually have three ways to make these parameters work. Using name as selector, ID, or even defining a class. I'll drop the two most common forms first by name and then by ID, so you can learn and never have a problem again.

Here below the way to reference using the given name in the input, notice that I gave names unique to each input, you already in your question, is giving name identical to the fields City and UF, and also to the fields Street, RG and Bairro

<div>   
        <div class="col-sm-6 col-md-4">
            Nome Completo:<input type="text" id="nome" name="nome"><br/><br/>
        </div>


        <div class="col-sm-6 col-md-4">

            CEP:<input type="text" id="cep" name="cep"><button type="button" id="buscar_cep"><i class="fa fa-search" action="" ></i></button> <br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Celular:<input type="text" id="nr_celular" name="celular"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            CPF:<input type="text" id="cpf" name="cpf" ><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            UF:<input type="text" id="uf" name="uf" ><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Cidade:<input type="text" id="cidade" name="cidade"><br/><br/>
        </div>
    </div>

    <div class="row">

        <div class="col-sm-6 col-md-4">
            Rua:<input type="text" id="rua" name="rua"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            RG:<input type="text" id="rg" name="rg"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Bairro:<input type="text" id="bairro" name="bairro"><br/><br/>
        </div>
        <div class="col-sm-6 col-md-4">
            Telefone:<input type="text" id="telefone" name="telefone"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Login:<input type="text" id="login" name="login"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Senha:<input type="password" id="senha" name="senha"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Confirmar Senha:<input type="password" id="confirma_senha" name="confirma_senha"><br/><br/>
        </div>
        <div class="col-sm-6 col-md-4">
            Data de Nascimento:<input type="text" id="nascimento_dt" name="nascimento"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Email:<input type="text" id="email" name="email" ><br/><br/>
        </div>
        <div class="col-sm-6 col-md-4">
            <label>Estado Civil:</label>
                <select name='status'>
                        <option value='solteiro'>Solteiro(a)</option>
                        <option value='casado'>Casado(a)<option>
                </select>
        </div>

        <div class="col-sm-6 col-md-4">
             <label>Sexo: </label>
                <select name='sexo'>
                        <option value='masculino'>Masculino</option>
                        <option value='feminino'>Feminino<option>
                </select>
        </div>
    </div>



<script type="text/javascript">

   function cadastrar(){


   $.ajax({  
    type: "POST",  
    url: "CadastroCliente",  
     data: {
        nome: $("input[name='nome']").val(),
        cep: $("input[name='cep']").val(),
        celular: $("input[name='celular']").val(),

        cpf: $("input[name='cpf']").val(),
        uf: $("input[name='uf']").val(),

        cidade: $("input[name='cidade']").val(),
        rua: $("input[name='rua']").val(),
        rg: $("input[name='rg']").val(),

        bairro: $("input[name='bairro']").val(),
        telefone: $("input[name='telefone']").val(),
        login: $("input[name='login']").val(),
        senha: $("input[name='senha']").val(),
        confirmar_senha: $("input[name='confirma_senha']").val(),
        data_nascimento: $("input[name='nascimento']").val(),
        email: $("input[name='email']").val(),
        estado_civil: $("select[name='status']").val(),
        sexo: $("select[name='sexo']").val(),
        

      },

      success: function(result){   
    var email = $("input[name='email']").val();
     var nome= $("input[name='nome']").val();
     window.location.href = "ConfirmacaoCadastro.jsp?email="+email+"'"+" nome='"+nome+"'";

     },
     error:function(){
      window.location.href = "erro.jsp";

},
});
</script>

Here is a way to reference the id that is set in the input field.

<div>   
            <div class="col-sm-6 col-md-4">
                Nome Completo:<input type="text" id="nome" name="nome"><br/><br/>
            </div>


            <div class="col-sm-6 col-md-4">

                CEP:<input type="text" id="cep" name="cep"><button type="button" id="buscar_cep"><i class="fa fa-search" action="" ></i></button> <br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Celular:<input type="text" id="nr_celular" name="celular"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                CPF:<input type="text" id="cpf" name="cpf" ><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                UF:<input type="text" id="uf" name="uf" ><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Cidade:<input type="text" id="cidade" name="cidade"><br/><br/>
            </div>
        </div>

        <div class="row">

            <div class="col-sm-6 col-md-4">
                Rua:<input type="text" id="rua" name="rua"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                RG:<input type="text" id="rg" name="rg"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Bairro:<input type="text" id="bairro" name="bairro"><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                Telefone:<input type="text" id="telefone" name="telefone"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Login:<input type="text" id="login" name="login"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Senha:<input type="password" id="senha" name="senha"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Confirmar Senha:<input type="password" id="confirma_senha" name="confirma_senha"><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                Data de Nascimento:<input type="text" id="nascimento_dt" name="nascimento"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Email:<input type="text" id="email" name="email" ><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                <label>Estado Civil:</label>
                    <select name='status' id='status'>
                            <option value='solteiro'>Solteiro(a)</option>
                            <option value='casado'>Casado(a)<option>
                    </select>
            </div>

            <div class="col-sm-6 col-md-4">
                 <label>Sexo: </label>
                    <select name='sexo' id='sexo'>
                            <option value='masculino'>Masculino</option>
                            <option value='feminino'>Feminino<option>
                    </select>
            </div>
        </div>



<script type="text/javascript">

   function cadastrar(){


       $.ajax({  
        type: "POST",  
        url: "CadastroCliente",  
         data: {
            nome: $("#nome").val(),
            cep: $("#cep").val(),
            celular: $("#nr_celular").val(),

            cpf: $("#cpf").val(),
            uf: $("#uf").val(),

            cidade: $("#cidade").val(),
            rua: $("#rua").val(),
            rg: $("#rg").val(),

            bairro: $("#bairro").val(),
            telefone: $("#telefone").val(),
            login: $("#login").val(),
            senha: $("#senha").val(),
            confirmar_senha: $("#confirma_senha").val(),
            data_nascimento: $("#nascimento_dt").val(),
            email: $("#email").val(),
            estado_civil: $("#status").val(),
            sexo: $("#sexo").val(),
            

          },

          success: function(result){   
        var email = $("#'email']").val();
         var nome= $("#'nome']").val();
         window.location.href = "ConfirmacaoCadastro.jsp?email="+email+"'"+" nome='"+nome+"'";

         },
         error:function(){
          window.location.href = "erro.jsp";

    },
    });
    </script>