Jump to content

Submeter formularios usando AJAX/JQuery


sirMk
 Share

Recommended Posts

Boas pessoal estou com um problema estou a desenvolver uma loja online e quando listo todos os produtos de uma categoria crio para cada produto um form com a mesma class(.formulario) o meu script funciona bem mas só adiciona os valores do primeiro form gostava de saber alguma maneira de o meu script saber qual é o form em questão para submeter algo como passar o próprio formulário por parâmetro usando 'this' mas sou novo no jquery e não sei adicionar parâmetros a funções jquery se pudessem ajudar :$

Aqui fica o meu código JQUERY E AJAX

<script type="text/javascript" language="javascript">
$(document).ready(function(){  
$(".formulario").submit(function() {  
   // we want to store the values from the form input box, then send via ajax below  
     var idc     = $('.idc').attr('value');
     var idp     = $('.idp').attr('value'); 
 var adiciona = $('.adiciona').attr('value');
    $.ajax({  
     type: "POST",  
     url: "carrinho.php",  
     data: "idp="+ idp +"& idc="+ idc +"& adiciona=" + adiciona,  
     success : function(data) {
   $(".carrinho").hide().html(data).fadeIn('slow');
}
        });  
    return false;   
}); }); 
</script>

Obrigado desde já! []

Link to comment
Share on other sites

Em primeiro lugar, podes fazer o seguinte para buscar os valores dos inputs :

var idc     = $('.idc').val();

Penso que seja mais prático assim.

Para saberes que form estás a usar, defines um ID para o submit, por exemplo, e procura-lo dentro do jQuery assim :

var idf     = $(this).attr('id');
Link to comment
Share on other sites

Obrigado já me ajudaste a compreender uma cena 🙂 mas agora quando faço assim com esta funcão passa valores indefinidos :S porque será?

<script type="text/javascript" language="javascript">
$(document).ready(function(){  
$(".formulario").submit(function() {  
   // we want to store the values from the form input box, then send via ajax below  
     var idc     = $(this).attr('.idc');
     var idp     = $(this).attr('.idp');
 var adiciona = $(this).attr('.adiciona');
 alert("idc="+idc);
 alert("idp="+idp);
 alert("adiciona="+adiciona);
    $.ajax({  
     type: "POST",  
     url: "carrinho.php",  
     data: "idp="+ idp +"& idc="+ idc +"& adiciona=" + adiciona,  
     success : function(data) {
   $(".carrinho").hide().html(data).fadeIn('slow');
}
        });  
    return false;   
}); }); 
</script>
Link to comment
Share on other sites

o idc, o idp e adiciona o valor returnado é undifined aqui fica o meu formulario para teres uma ideia

<form method='post' name='addprod' class='formulario'>
<input type='hidden' name='idc' value='1' class='idc'/>
<input type='hidden' value='5' name='idp' class='idp'/>
<input style='text-align:center' maxlength='2' type='text' name='adiciona' class='adiciona' size='1' value='1'>
<input style='text-align:center; font-size:12px;' type='submit' value='Comprar'>
</form>

Agora eu tenho um formulario destes para cada produto mostrado na página

Link to comment
Share on other sites

Boas pessoal estou com um problema estou a desenvolver uma loja online e quando listo todos os produtos de uma categoria crio para cada produto um form com a mesma class(.formulario)

Crias um formulario para cada produto? Então se tiveres 100 produtos nessa categorias tens 100 formularios. Para cada formulario colocas:

<form id='form1' onsubmit="enviar('form1'); return false;">

'form1' para o 1º produto.... para o segundo chamas 'form2', etc... deve ser fácil fazeres isto pois deves gerar isto na linguagem do servidor...

A função enviar() pode ser algo como:

function enviar(nome) {
    var dados = $('#' + nome).serialize(); // Isto serve para por todos os campos do teu formulario na variavel dados como objecto
    $.ajax({ 
        type: "POST", 
        url: "carrinho.php",
        data: dados,
        success : function(data) {
             $(".carrinho").hide().html(data).fadeIn('slow');
        }
    });

Espero que funcione, só costumo fazer isto com o prototype  🙂

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.