Entrar

Jquery

diegoxxiii · · Solicitar retirada
Buenas noches!
Quisiera hacer una consulta sobre id dinamico, tengo una tabla en mysql la cual imprimo y cada consulta la pongo dentro de un formulario para enviar datos a otra pagina..

while($reg=mysqli_fetch_array($registro1)){
echo "<form action='' method='' enctype='multipart/form-data' id='fo3' name='fo3'>";
echo "
<tr>
<td width='150'><input type='text' id='cantidad' name='cantidad' placeholder='Cantidad' required></td>
<td width='150'><input type='text' id='talle' name='talle' placeholder='Talles'></td>
<td width='150'><input type='submit' name='enviar' id='enviar' class='agregar' value='Agregar a la Lista'><div id='message'></div></td>
</tr>";
echo "</form>";

los datos los envio a travez de ajax, para que no me recargue la pagina. Hasta ahi todo perfecto... lo que necesito ahora es que cada vez que envie el formulario me oculte el boton agregar correspondiente a esa parte de la tabla. Pero no puedo.. busque dos formas:

$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form, #fat, #fo3').submit(function() {
$.ajax({
type: 'POST',
url: 'pedido.php',
data: $(this).serialize(),
success: function(data) {
//este seria el codigo que borra el boton pero que no lo hace
$('input[id^="enviar"]').click(function(){
var id = $(this).css('display','none');
});

}
})
return false;
});
})

y la otra es esta:

$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form, #fat, #fo3').submit(function() {
$.ajax({
type: 'POST',
url: 'pedido.php',
data: $(this).serialize(),
success: function(data) {
$('input[id^="enviar"]').click(function(){
var id = $(this).css('display','none');
});

}
})
return false;
});
//lo coloco fuera del success, lo que sucede es que si apreto el boton me lo oculta aunque no se haya completado el formulario
$('input[id^="enviar"]').click(function(){
var id = $(this).css('display','none');
});

})

que estaria haciendo mal o que me faltaria?

muchas gracias
skaparate · · Solicitar retirada
Hola!

Primero que nada, los id de las etiquetas deben ser únicos; si quieres repetir un identificador, usa una clase.

<form id="form-unico" class="grupo-form">
</form>

<form class="grupo-form">
</form>

<form class="grupo-form">
</form>

<form class="grupo-form">
</form>

Esto es importante por dos motivos:

1.- Validación del HTML. Para que tu código cumpla con los estándares de la W3.
2.- Porque te ayudará cuando necesites aplicar CSS y Javascript a ciertos elementos o a todos.

Usualmente las etiquetas (<a>, <form>, etc.) se les asigna un id único y además una clase (class).

El problema con tu código es que estás escondiendo el botón después de que se ha enviado el formulario pero luego de que se ha presionado, por lo que el botón se tendría que presionar nuevamente para que se escondiera.

Una forma de hacer lo que quieres es esta:

[COLOR="#FF8C00"]// Según lo que mencioné anteriormente, deberías cambiar form id='form' por form class='form' y hacer referencia utilizando un punto: .form[/COLOR]
$('#form, #fat, #fo3').submit(function(e) {
  e.preventDefault();
  $this = $(this); [COLOR="#FF8C00"]// $(this) hace referencia al formulario que se envió y necesitas guardarlo en una variable porque dentro de $.ajax, [/COLOR]
                        [COLOR="#FF8C00"]// $(this) hará referencia a la función que se ejecuta y no al formulario que se envió.[/COLOR]

  $.ajax({
    type: 'POST',
    url: 'pedido.php',
    data: $(this).serialize(),
    success: function(data) {
      [COLOR="#FFA07A"]// Aquí seleccionas el input con type igual a submit y lo escondes (yo lo eliminaría si es que no modifica el diseño:[/COLOR]
      [COLOR="#FFA07A"]// $this.find("input[type='submit']").remove();[/COLOR]
      $this.find('input[type=submit]').css('display', none);
    }
  });
});

Espero que te sirva :)
diegoxxiii · · Solicitar retirada
Hola! Como estas? Muchas gracias por responder...
hice los cambios, en el form le agregue class="form" y luego en el ajax tambien y quedo asi:

$('.form, #fat, #fo3').submit(function(e) {
e.preventDefault();
$this = $(this);
$.ajax({
type: 'POST',
url: 'pedido.php',
data: $(this).serialize(),
success: function(data) {
$this.find('input').css('display', none);
}
})
pero no me lo oculta... de todas maneras seguire probando y lo publico.. muchas gracias!!!
diegoxxiii · · Solicitar retirada
Me fije en la consola de errores y me sale el error en la linea "$this.find('input').css('display', none);" y dice esto: "Uncaught ReferenceError: none is not defined"
diegoxxiii · · Solicitar retirada
Bueno el error es que none estaba sin comillas simples dentro de css: $this.find('input').css('display', 'none');
igual no me lo oculta, pero me tira el siguiente error: Failed to load resource: net::ERR_CACHE_MISS, igual este mensaje ya me aparecia antes.. ahora no me tira ningun error pero no lo oculta
diegoxxiii · · Solicitar retirada
Bueno he dado con el resultado al menos por ahora, je, lo seguire probando... al codigo que me pasaste le agrege $this.parent().find("input").hide();
Lo busque por otro foro... de JQuery nose mucho, y veo que tengo que ponerme a estudiar sobre el tema.. una vez agregado eso lo que hice fue cambiar las etiquetas <tr> de lugar y las puse por encima del <form>...
antes estaban asi:
while($reg=mysqli_fetch_array($registro1)){
echo "<form action='' method='' enctype='multipart/form-data' id='fo3' name='fo3'>";
echo "
<tr>
<td width='150'><input type='text' id='cantidad' name='cantidad' placeholder='Cantidad' required></td>
<td width='150'><input type='text' id='talle' name='talle' placeholder='Talles'></td>
<td width='150'><input type='submit' name='enviar' id='enviar' class='agregar' value='Agregar a la Lista'><div id='message'></div></td>
</tr>";
echo "</form>";

ahora:

while($reg=mysqli_fetch_array($registro1)){
echo "<tr>";
echo "<form action='' method='' enctype='multipart/form-data' id='fo3' name='fo3'>";
echo "

<td width='150'><input type='text' id='cantidad' name='cantidad' placeholder='Cantidad' required></td>
<td width='150'><input type='text' id='talle' name='talle' placeholder='Talles'></td>
<td width='150'><input type='submit' name='enviar' id='enviar' class='agregar' value='Agregar a la Lista'><div id='message'></div></td>";
echo "</form>";echo</tr>";

Porque haria eso, porque lo que buscaba es el submit despues de la clase .form pero pero el submit que estaba dentro de la etiqueta <td> no es hijo de .form es hizo de <tr> por ende tenia que poner el <td> como hijo de .form... quedand

$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('.form').submit(function(e) {
e.preventDefault();
$this = $(this);
$.ajax({
type: 'POST',
url: 'pedido.php',
data: $(this).serialize(),
success: function(data) {
$('#agregado').show(1000);
setTimeout(function() {
$("#agregado").fadeOut(1500);
},2000);
$this.parent().find('input[class^="agregar"]').hide();
}
})
return false;
});
})

Como dije no soy un especializado en el tema de jquery asique si llegase a estar mal explicado y alguien lo puede explicar mejor estaria bueno que lo explique, este fue mi razonamiento desde mi logica.. jeje
Asi logro ocultar el boton

Muchas gracias por la ayuda y por el tiempo..

Saludos!!
skaparate · · Solicitar retirada
Me alegro que lo hayas solucionado :).

Igualmente quería explicar algo.

El input submit, si bien no es hijo directo del form (hablando en el primer caso), sí es un descendiente del mismo. Esto es lo mismo que un árbol genealógico, donde html es nuestro primer antepasado, head y body son los hijos y ambos tienen descendencia distinta (head -> meta, style, link, title, etc.; body -> form, a, input, div, p, etc.).

jQuery, y los selectores CSS (jQuery utiliza los selectores CSS mayoritariamente), pueden encontrar los elementos dentro de otro sin importar la profundidad (cantidad de padre o descendientes):

<form id="miform">
  <div class="uno">
    <div class="dos">
      <div class="tres">
        <div class="cuatro">
          <input type="submit" />
        </div>
      </div>
    </div>
  </div>
</form>

jQuery(document).ready(function($) {
  // Asumiendo que sólo hay un input dentro del form
  console.log('Input: ' + $('#miform').find('input[type="submit"]'));
  console.log('Si sólo hay un form con un input: ' + $('form input'));
  // En realidad si hay más de un form o un input, jQuery devolverá un array con los elementos seleccionados en lugar de sólo uno.
});