Sending form via jquery ajax

Question

Sending form via jquery ajax

Navigation

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

0

I have a form that I need to submit whenever I give a focusout to input of the value. But I'm not getting him to give the submit.

Any tips for doing this? Thank you 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){

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

jquery ajax

asked by anonymous 11.06.2014 / 14:57

2 answers

2

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 make foucusout it makes an ajax call. In practice without submitting the form, without reloading the page.

11.06.2014 / 15:13

Tabhost does not call the onTabChanged () method Call to a member function fetch_assoc () on a non-object

score 2 · Accepted Answer

In documentation of $.submit() is written:

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

That is, assigns a handler to the submit event OR activates the submit event on the element. Since you are passing a function to the submit, it will not activate the event.

One 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();
});