Sending form via jquery ajax

Question

I have a form I need to send whenever I give a focusout in the input of the value. However I’m not getting it to give the Submit.

Any tips for doing this? Thanks in advance.

<?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){

            }
        });
    });
});
});

Answer 1

You are printing countless <form> with the same ID. This is invalid HTML.

Suggestion:

<?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) {

         }
     });
 });

So every time you do foucusout it makes an ajax call. In practice without submitting the form, without reloading the page.

Answer 2

In the documentation of $.submit() is written:

Bind an Event Handler to the "Submit" Javascript Event, or Trigger that Event on an element.

That is, assigns an Handler to the Submit OU event activates the Submit event in the element. Since you are passing a function to Submit, it will not activate the event.

A possible solution:

$("#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();
});