Ajax code is not taking the value of the inputs

Question

Ajax code is not taking the value of the inputs

Navigation

#1 by (1 votes)

0

I have a problem with ajax, which is not picking up the data entered in the email form, even though it is sending the emails.

Follow the form code:

      $(function(){
$('#nome, #email, #assunto, #message').on('keypress', function(e){
    if (e.keyCode == 13) {
        e.preventDefault();
        $('#envia').click();
    }
});

$("#envia").click(function(){
	var name = $("#nome").val(),
    	emai = $("#email").val(),
    	ass  = $("#assunto").val(),
   		mess = $("#message").val();
   	
    var campo = {
        nome: $("#nome").val(),
        email: $("#email").val(),
        assunto: $("#assunto").val(),
        message: $("#message").val()
    };

    if(!campo.nome || !campo.assunto || !campo.email || !campo.message){
        $.alert({
        title: 'Atenção',
        content: 'Todos os campos sao obrigatorios!',
        animation: 'bottom',
        icon: 'fa fa-warning',
        animationSpeed: 700,
        keyboardEnabled: true,
        columnClass: 'col-md-4 col-md-offset-4'
        });
        return;
    }
    
	$.ajax("email.php",{
		type: "POST",
		data:{'nome': name, 'email': emai, 'assunto': ass, 'mensagem': mess} }).done(function(){
			$.alert({
	            title: 'Sucesso',
	            content: 'E-mail enviado com sucesso!',
	            animation: 'bottom',
	            icon: 'fa fa-warning',
	            animationSpeed: 700,
	            keyboardEnabled: true,
	            columnClass: 'col-md-4 col-md-offset-4'
	            });
	            return;
		}).fail(function(){
			$.alert({
	            title: 'Opss..',
	            content: 'Ocorreu um erro durante o processo tente novamente!',
	            animation: 'bottom',
	            icon: 'fa fa-warning',
	            animationSpeed: 700,
	            keyboardEnabled: true,
	            columnClass: 'col-md-4 col-md-offset-4'
	            });
	            return;
		});
	});
});

<div class="form-group col-md-6">
  <input type="text" name="name" id="nome" class="form-control" required placeholder="Nome">
</div>
<div class="form-group col-md-6">
  <input type="email" name="email" id="email" required class="form-control" placeholder="E-mail">
</div>
<div class="form-group col-md-12">
  <input type="text" name="subject" id="assunto" required class="form-control" placeholder="Assunto">
</div>
<div class="form-group col-md-12">
  <textarea name="message" id="message" id="message" required class="form-control" rows="8" placeholder="Sua Mensagem. "></textarea>
</div>
<div class="form-group col-md-12">
  <button name="submit" id="envia" class="btn btn-primary pull-right">Enviar</button>
</div>

javascript jquery

asked by anonymous 09.11.2015 / 23:44

1 answer

$ scope Form Angular Directive Error giving spaces between divs

score 1 · Accepted Answer

Change the json that you are populating manually in data within ajax and remove the additional comma:

Your code looks like this:

 $.ajax({
             url: 'email.php',
             type: 'POST',
             data: {
               a: 'name',
               b: 'emai',
               c: 'ass',
               d: 'mess'
             },
           })

Change to:

 $.ajax({
             url: 'email.php',
             type: 'POST',
             data: {
               a: name,
               b: emai,
               c: ass,
               d: mess
             }
           })

And to get the data in email.php , use the json indices as the index of the global variable $_POST . Example:

$name = $_POST['a'];
$email = $_POST['b'];
$assunto = $_POST['c'];
$messagem = $_POST['d'];