AJAX - Problema : Formulario dentro de una tabla html cargado con ajax

   
Vista:

Problema : Formulario dentro de una tabla html cargado con ajax

Publicado por Julian (1 intervención) el 08/10/2014 23:53:08
Hola disculpen la molestia, estoy haciendo una grilla php y msql que se carga con ajax el problema es cuando empiezo a filtrar (buscar) un usuario. y cargo el resultado con ajax en la pagina no me funciona el submit del formulario cuando le doy click. Para no subir todo el codigo completo que es muy largo hice una simple programita para ver donde esta el error, donde con un <input> pongo una palabra y eso lo mando por ajax a un archivo php que carga una tabala con un formulario, y tampoco anda, lo raro es que si saco el formulario afuera de la tabla funciona, o si lo cargo sin ajax tambien funciona, Gracias por la ayuda. Dejo el código simple que es igual a lo que necesito pero sin la query.

Este llama al ajax
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
<DOCTYPE HTML!>
<html>
	<head><script type="text/javascript" src="jquery-2.1.1.js"></script></head>
	<body>
		<div>
			<p>Buscar</p>
			<input type="text" id="bus" name="buscar" onkeyup="mostrarSugerencias(this.value)"></input><br>
				<div class="contacto" id="txtSugerencias"></div>
		</div>
		<div id="resultado"></div>
	</body>
	<script>
	function mostrarSugerencias(nombre)
	{
		$.ajax({
			type: 'POST',
			url: 'ajax.php',
			data: {
				buscar_user:nombre
			}
			}).done(function(respuesta) {
				$('#txtSugerencias').html(respuesta);
			});
	}
	</script>
</html>

Este es el ajax y lo que devuelve

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php if(isset($_POST["buscar_user"])){ ?>
	<table>
		<form id = "ff" action='prueba.php' method='get'>
			<tr><td> Nombre </td></tr>
			<tr>
				<td><input type='text' name='nombre' value='nombre' /></td>
				<td><input type='submit' name='submit' value="enviar" /></td>
			</tr>
		</form>
	</table>
<?php
}
?>


MUCHAS GRACIAS!!!!!!!
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

Problema : Formulario dentro de una tabla html cargado con ajax

Publicado por xve (167 intervenciones) el 09/10/2014 08:17:12
Hola Julian, tienes que sacar el formulario de dentro de la tabla... algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php if(isset($_POST["buscar_user"])){ ?>
	<form id = "ff" action='prueba.php' method='get'>
		<table>
			<tr><td> Nombre </td></tr>
			<tr>
				<td><input type='text' name='nombre' value='nombre' /></td>
				<td><input type='submit' name='submit' value="enviar" /></td>
			</tr>
		</table>
	</form>
<?php
}
?>

Coméntanos si funciona, ok?
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 angel

Problema : Formulario dentro de una tabla html cargado con ajax

Publicado por angel (2 intervenciones) el 13/07/2016 23:06:23
xve, yo tengo el mismo problema saque el form fuera de la tabla me pincha el sumbit pero no me coge los datos de los campos.

sabes q puede ser
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

Problema : Formulario dentro de una tabla html cargado con ajax

Publicado por xve (167 intervenciones) el 14/07/2016 07:38:21
Nos puedes mostrar tu código? en principio debería de funcionar!!!
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

Problema : Formulario dentro de una tabla html cargado con ajax

Publicado por angel (2 intervenciones) el 15/07/2016 20:06:36
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<form method="POST" class="bs-example form-horizontal" action="<?=base_url() . 'invoices/items/add'?>" id="itemfrom">
	<table id="inv-details" class="table sorted_table" type="invoices"><thead>
		<tr >
			<th></th>
			<?php if ($showtax) : ?>
			<th width="11%" class="text-center"><?= lang('item_name') ?> </th>
			<th width="25%" class="text-left"><?= lang('item_desc') ?> </th>
			<th width="7%"  class="text-center"><?= lang('qty') ?> </th>
			<th width="12%" class="text-center"><?= lang('invoice_amount') ?> </th>
			<th width="12%" class="text-center"><?= lang('tax') ?> </th>
			<th width="22%" class="text-center"><?= lang('total') ?> </th>
			<?php else : ?>
			<th width="9%" class="text-center"> <?= lang('item_name') ?> </th>
			<th width="35%" class="text-center"><?= lang('item_desc') ?> </th>
			<th width="7%" class="text-center"><?= lang('qty') ?> </th>
			<th width="12%" class="text-center"><?= lang('invoice_amount') ?> </th>
			<th width="22%" class="text-center"><?= lang('total') ?> </th>
			<?php endif; ?>
			<th class="text-center inv-actions"></th>
		</tr> </thead> <tbody>
 
			<tr class="hidden-print" id="item_campo">
 
			<input type="hidden" name="invoice_id" id="invoice_id" value="<?= $inv->inv_id ?>">
			<input type="hidden" name="item_order" value="<?= count($invoice_items) + 1 ?>">
			<input id="hidden-item-name" type="hidden" name="item_name">
			<td></td>
			<td>
				<select name="item" class="form-control" id="item" required >
					<option value=""></option>
					<?php
					if (!empty($items)) {
					foreach ($items as $key => $item) { ?>
						<option value="<?=$item->item_id?>"><?=$item->ref_service?></option>
					<?php } } ?>
				</select>
			</td>
 
				<td><textarea id="auto-item-desc" value="<?=  isset($item_desc) ? $item_desc : NULL?>" rows="1" name="item_desc" id="item_desc" required placeholder="<?= lang('item_desc') ?>" class="form-control js-auto-size"></textarea></td>
				<td><input id="auto-quantity" value="<?= isset($quantity) ? $quantity : '1.00' ?>" type="text" name="quantity" id="quantity" required class="form-control text-center"></td>
				<td><input id="auto-unit-cost" value="<?= isset($unit_cost) ? $unit_cost : NULL ?>" type="text" name="unit_cost" id="unit_cost" required placeholder="50.56" class="form-control text-center"></td>
				<?php if ($showtax) : ?>
				<td><input type="text" name="tax" placeholder="0.00" value="<?= isset($tax) ? $tax : NULL ?>"  readonly="" id="tax"  class="form-control text-center"></td>
				<?php endif; ?>
				<td></td>
				<td><button type="submit" class="btn btn-<?=config_item('theme_color')?>"><i class="fa fa-check"></i> <?= lang('agre_articu') ?></button></td>
			</tr>
		</tbody>
	</table>
</form>
 
 
<script  type="text/javascript">
 
  $("#item").click(function(){
    var item_id = document.getElementById("item").value;
    var invoice_id = document.getElementById("invoice_id").value;
    var base_url = document.getElementById("base_url").value;
    var co_id = document.getElementById("co_id").value;
    var url = base_url + "invoices/items/items_campos/"+item_id+'/'+invoice_id+'/'+co_id;
    $("#item_campo").load(url, function(responseTxt, statusTxt, xhr){
 
    });
});
</script>
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

Problema : Formulario dentro de una tabla html cargado con ajax

Publicado por Bryan villalonos (1 intervención) el 15/10/2016 08:20:07
Buenas noches tardes o dias, Poseo el mismo inconvenienete ya solucionaste algo ?
yo encontre la solucion con jquery pero no me detecta los id de los form no se que pueda pasar ;(
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// magic.js
$(document).ready(function() {
 
	// process the form
 
	$( 'form').submit(function( event ) {
 
 
		$('.form-group').removeClass('has-error'); // remove the error class
		$('.help-block').remove(); // remove the error text
 
		// get the form data
		// there are many ways to get this data using jQuery (you can use the class or id also)
		var formData = {
			'user' 				: $('input[name=user]').val(),
			'email' 			: $('input[name=email]').val(),
			'superheroAlias' 	: $('input[name=superheroAlias]').val()
		};
 
		// process the form
		$.ajax({
			type 		: 'POST', // define the type of HTTP verb we want to use (POST for our form)
			url 		: 'process.php', // the url where we want to POST
			data 		: formData, // our data object
			dataType 	: 'json', // what type of data do we expect back from the server
			encode 		: true
		})
			// using the done promise callback
			.done(function(data) {
 
				// log data to the console so we can see
				console.log(data);
 
				// here we will handle errors and validation messages
				if ( ! data.success) {
 
					// handle errors for name ---------------
					if (data.errors.name) {
						$('#name-group').addClass('has-error'); // add the error class to show red input
						$('#name-group').append('<div class="help-block">' + data.errors.name + '</div>'); // add the actual error message under our input
					}
 
					// handle errors for email ---------------
					if (data.errors.email) {
						$('#email-group').addClass('has-error'); // add the error class to show red input
						$('#email-group').append('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input
					}
 
					// handle errors for superhero alias ---------------
					if (data.errors.superheroAlias) {
						$('#superhero-group').addClass('has-error'); // add the error class to show red input
						$('#superhero-group').append('<div class="help-block">' + data.errors.superheroAlias + '</div>'); // add the actual error message under our input
					}
 
				} else {
 
					// ALL GOOD! just show the success message!
					$('form').append('<div class="alert alert-success">' + data.message + '</div>');
 
					// usually after form submission, you'll want to redirect
					// window.location = '/thank-you'; // redirect a user to another page
 
				}
			})
 
			// using the fail promise callback
			.fail(function(data) {
 
				// show any errors
				// best to remove for production
				console.log(data);
			});
 
		// stop the form from submitting the normal way and refreshing the page
		event.preventDefault();
	});
 
});

El problema con este codigo es que me despues del submit me toma todos los forms ;(
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