0

Tenho um formulário que preciso enviar sempre que der um focusout no input do valor. Porem não estou conseguindo ele dar o submit.

Alguma dica para fazer isso? Agradeço desde já.

<?php foreach ($produtos as $produto) {
            echo "<div class='span5'>";
            echo form_open(base_url()."backend/home/alterar_preco/".$produto->id_produto, "id = salva_preco");
            echo "<div class='produtos'>
            <div style='float:left;'><img src=".base_url()."uploads/produtos/".$produto->foto." title=".$produto->nome."></div>
            <div class='descricao_produto'>
                <font size='4'>".$produto->nome."</font><br>
                <font size='2'>".$produto->descricao."</font><br>
                <input type='text' name='preco_produto' style='width:60px;' value='".number_format($produto->preco,2,",",".")."' placeholder='Preço' class='preco'>
            </div>
        </div>";
    echo form_close();
    echo "</div>";
} ?>

$(document).ready(function(){
$('.preco').focusout(function(){
    $("#salva_preco").submit(function(){
        var dados = jQuery( this ).serialize();
        $.ajax({
            url: CI_ROOT + "backend/home/salva_preco",
            data: {
                dados:dados,
            },
            dataType: "json",
            type: "POST",
            success: function(data){

            }
        });
    });
});
});
1
  • Pode colocar o HTML renderizado, ie o HTML do lado do cliente para o <form>?
    – Sergio
    Commented 11/06/2014 às 13:02

2 Respostas 2

2

Na documentação do $.submit() está escrito:

Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

Ou seja, atribui um handler ao evento de submit OU ativa o evento submit no elemento. Como você está passando uma função para o submit, ele não irá ativar o evento.

Uma possível solução:

$("#salva_preco").submit(function () {
  var dados = jQuery(this).serialize();
  $.ajax({
    url: CI_ROOT + "backend/home/salva_preco",
    data: {
      dados: dados,
    },
    dataType: "json",
    type: "POST",
    success: function (data) {
      // handler
    }
  });
});

$('.preco').focusout(function(){
   $("#salva_preco").submit();
});
2

Você está a imprimir inumeras <form> com o mesmo ID. Isso é HTML inválido.

Sugestão:

<?php 
    $formNr = 0;
    foreach ($produtos as $produto) {
            $formNr++;
            echo "<div class='span5'>";
            echo form_open(base_url()."backend/home/alterar_preco/".$produto->id_produto, "id = salva_preco_".$formNr);

jQuery:

 $('.preco').focusout(function () {
     var dados = $(this).closest('form').serialize();
     $.ajax({
         url: CI_ROOT + "backend/home/salva_preco",
         data: {
             dados: dados
         },
         dataType: "json",
         type: "POST",
         success: function (data) {

         }
     });
 });

Assim, cada vez que fizer foucusout ele faz uma chamada ajax. Na prática sem submeter a form, sem recarregar a página.

1
  • como fazer para enviar para o mysql via ajax sendo que o form é preenchida com dados vindo do mysql. Commented 3/02/2017 às 17:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .