Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/04/2014, 20:57
malmonacid
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 11 años, 11 meses
Puntos: 0
Validación jQuery y Ajax para formularios generados dinámicamente con PHP

Estimados;

Mi problema es que no sé, y no encuentro info al respecto, para validar un formulario que lo tengo dentro de un ciclo do-while (en realidad son dos ciclos anidados), por lo cual el formulario se replica para cada instancia de la consulta. El jQuery que lo valida y el Ajax que envia la info sirve para el caso cuando es un sólo formulario, no formularios generados dinámicamente (me refiero generandolos usando la instancia do-while).
Por lo poco que sé (se debe notar!!) el problema es que se necesita asignar un índice, tb dinámico a la función Js para poder distinguir cada formulario.

Agradecería enormemente cualquier orientación. Si no estoy muy perdido y el tema es lo del id único, no sé como agregarlo al Script que tengo.

Adjunto mi código, a ver se se logra entender mejor.

Este extracto del código es un archivo que está inserto dentro de un ciclo do-while anidado dentro de otro ciclo do-while, la razón de eso, creo que es harina de otro costal.
Código PHP:
Ver original
  1. <div class="new-com-bt">
  2.         <span>Write a comment ...</span>
  3.     </div>
  4.     <div class="new-com-cnt">
  5.         <input type="hidden" id="name-com" name="name-com" value="<?php echo ObtenerNombreFull_Usuario($_SESSION['MM_IdUser']); ?>" />
  6.         <input type="text" id="mail-com" name="mail-com" value="" placeholder="Your e-mail adress" />
  7.         <textarea class="the-new-com" placeholder="Ingresa tu comentario"></textarea>
  8.         <div class="bt-add-com">Post comment</div>
  9.         <div class="bt-cancel-com">Cancel</div>
  10.     </div>
  11.     <div class="clear"></div>
  12. </div><!-- end of comments container "cmt-container" -->

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.    $(function(){
  3.         //alert(event.timeStamp);
  4.         $('.new-com-bt').click(function(event){    
  5.             $(this).hide();
  6.             $('.new-com-cnt').show();
  7.             $('#name-com').focus();
  8.         });
  9.  
  10.         /* when start writing the comment activate the "add" button */
  11.         $('.the-new-com').bind('input propertychange', function() {
  12.            $(".bt-add-com").css({opacity:0.6});
  13.            var checklength = $(this).val().length;
  14.            if(checklength){ $(".bt-add-com").css({opacity:1}); }
  15.         });
  16.  
  17.         /* on clic  on the cancel button */
  18.         $('.bt-cancel-com').click(function(){
  19.             $('.the-new-com').val('');
  20.             $('.new-com-cnt').fadeOut('fast', function(){
  21.                 $('.new-com-bt').fadeIn('fast');
  22.             });
  23.         });
  24.  
  25.         // on post comment click
  26.         $('.bt-add-com').click(function(){
  27.             var theCom = $('.the-new-com');
  28.             var theName = $('#name-com');
  29.             var theMail = $('#mail-com');
  30.  
  31.             if( !theCom.val()){
  32.                 alert('You need to write a comment!');
  33.             }else{
  34.                 $.ajax({
  35.                     type: "POST",
  36.                     url: "ajax/add-comment.php",
  37.                     data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val(),
  38.                     success: function(html){
  39.                         theCom.val('');
  40.                         theMail.val('');
  41.                         theName.val('');
  42.                         $('.new-com-cnt').hide('fast', function(){
  43.                             $('.new-com-bt').show('fast');
  44.                             $('.new-com-bt').before(html);  
  45.                         })
  46.                     }  
  47.                 });
  48.             }
  49.         });
  50.  
  51.     });
  52. </script>