JQuery - Enviar formulario con ajax recarga página

   
Vista:
Imágen de perfil de Diego

Enviar formulario con ajax recarga página

Publicado por Diego (12 intervenciones) el 05/08/2016 12:57:16
Que tal!
Tengo este pequeño problema y quisiera que me apoyarán a resolverlo.

Tengo una lista donde se muestran los productos ingresados a la base de datos mediante la recuperación de la consulta con jQuery, esto me ha funcionado muchas veces pero esta vez es distinto ya que anteriormente solo se utilizó un formulario, ahora tengo muchos formularios en la misma página y en cada formulario se encuentra la información de cada producto pero al guardar el producto me recarga la página y quisiera saber como obtener el id del formulario del cual estoy enviando los datos.

Este es mi código jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
	$(function(){
		$('body').on('click', '#productsQuote button', function(e){
			var formID = $(this).parent().parent().parent().find('form').attr('id');
			$(formID).submit(function(){
			  $.ajax({
			  cache: false,
			  type: 'POST',
			  url: '../data/includes/functions.php',
			  data: $(this).serialize(),
			  success: function(add){
			    $("#listProductsQuote").empty();
			    $("#emptyProductsQuote").remove();
			    $("#listProductsQuote").append(add);
					closeModalWindowLarge();
			  }
		  });
			return false;
		});
	});
});
}
</script>

En este código muestro el while que tengo de los productos para insertarlos en la DB con su respectivo formulario:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$contador = 1;
<?php do { ?>
	<form method="post" id="formProducts<?php echo($contador++); ?>">
		<input type="hidden" name="section" value="productsQuotes">
		<input type="hidden" name="action" value="add">
		<input type="hidden" name="folio" value="<?php echo($numFolio); ?>">
		<input type="hidden" name="picture" value="<?php echo($row_productsQuotes['picture']); ?>">
		<input type="hidden" name="product" value="<?php echo($row_productsQuotes['name']); ?>">
		<input type="hidden" name="code" value="<?php echo($row_productsQuotes['code']); ?>">
		<tr>
			<td><?php echo($contador++); ?></td>
			<td><img src="../../../img/products/<?php echo($row_productsQuotes['picture']); ?>"></td>
			<td><?php echo(htmlentities($row_productsQuotes['name'], ENT_COMPAT, 'utf-8')); ?></td>
			<td><textarea style="width: 90%"; name="description" rows="3"><?php echo($row_productsQuotes['description']); ?></textarea></td>
			<td><input class="inputItemCant" type="text" name="price" value="<?php echo($row_productsQuotes['price']); ?>"></td>
			<td><input class="inputItemCant" type="text" name="cant" value="1"></td>
			<td>
				<select class="simpleSelect" name="unity">
					<option value="Pza">Pieza</option>
					<option value="N/A">No Aplica</option>
				</select>
			</td>
			<td><button type="submit" class="addItemQuote"><i class="fa fa-plus-circle"></i>&nbsp;&nbsp;Añadir</button></td>
		</tr>
	</form>
<?php }while($row_productsQuotes = mysql_fetch_assoc($productsQuotes)); ?>

Espero que puedan ayudarme.

Saludos!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Enviar formulario con ajax recarga página

Publicado por xve (557 intervenciones) el 05/08/2016 16:43:31
Hola Diego, yo creo que te sobra el find en esta linea:
1
var formID = $(this).parent().parent().parent().find('form').attr('id');

Creo que tendria que ser así:
1
var formID = $(this).parent().parent().parent().attr('id');

No lo he probado... nos puedes comentar?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Diego

Enviar formulario con ajax recarga página

Publicado por Diego (12 intervenciones) el 06/08/2016 05:35:00
Gracias xve por tu respuesta, después de tanto intentarlo me quedo de la siguiente manera

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function insertProduct(id){
$(function(){
	$(id).submit(function(){
		$.ajax({
			cache: false,
			type: 'POST',
			url: '../../data/includes/functions.php',
			data: $(this).serialize(),
			success: function(add){
				$("#listProductsQuotes").empty();
				$("#emptyProductsQuote").remove();
				$("#listProductsQuotes").append(add);
				closeModalWindowLarge();
				$(id).reset();
			}
		});
			return false;
	});
});
}

Tuve que realizar una función onclick en el botón de cada submit y como parámetro el id del formulario

Saludos!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Enviar formulario con ajax recarga página

Publicado por xve (557 intervenciones) el 06/08/2016 09:07:21
Es una buena solución, aunque creo que la anterior estaba mejor...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Enviar formulario con ajax recarga página

Publicado por Vainas (96 intervenciones) el 06/08/2016 12:17:55
Buenas:

Me he equivocado y te he respondido en otro post: http://www.lawebdelprogramador.com/foros/AJAX/1561483-recorrer-tabla-con-jquery-para-insertar-registros.html#last


Copio y pego lo que puedes usar:

http://www.lawebdelprogramador.com/codigo/JQuery/3622-Enviar-formularios-independientes-en-jquery.html

Espero que sirva. Es rapido y no es necesario un foreach o each.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar