textbox and jquery/ajax

hi

I have a form with a textbox. Then i need a code that when i update the textbox the code in jquery and ajax sends the text in that textbox in the background(ajax) to a php file. I have many textbox in the page so I need to use the individual textobox and runs the code every time that a textbox is updated.How can I do that?
LVL 1
joyacv2Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Julian HansenConnect With a Mentor Commented:
Here is a working sample
HMTL
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('#updateme').blur(function() {
    $.post('updateme.php',{text: $(this).val()}, function(response) {
      $('#result').html(response);
    });
  });
});

</script>
<style type="text/css">
</style>
</head>
<body>
  <textarea id="updateme"></textarea>
  <textarea id="dontupdateme"></textarea>
  
  <div id="result"></div>
</body>
</html>

Open in new window

PHP
<pre>
<?php
if ($_POST) {
	print_r($_POST);
}
?>
</pre>

Open in new window

If you need a line by line commentary let me know.
0
 
joyacv2Author Commented:
ok, let me try, i will be back
0
 
joyacv2Author Commented:
Hi,

I include a block of the code still don't work

$(".celdasHeaders").click(
	
	function (){
	$(".turno10-6,.turno2-10,.turno6-2").not(".celdasHeaders").each(function(){
		var idEste = "prueba" +$(this).attr("turnoAttr")+$(this).attr("diaAttr");
		$(this).html('<form id="crearTurnoForm"><input type="text" id="'+idEste+'" name="iniciales" value="'+$(this).html()+'"></form>');
		$(this).change(function(){
			
/*			alert($("#idEste").val());
			
	$.ajax({
		url:"crearTurnos.php",
		type:"POST",
		data: {iniciales:$("#idEste").val(),
      turnoAttr:$(this).attr("turnoAttr"),
	  diaAttr:$(this).attr("diaAttr"),
	  filaAttr:$(this).attr("filaAttr"),
	  tipoTurnoAttr:$(this).attr("tipoTurnoAttr")}});
	  */
	  	$(function() {
  $('#idEste').blur(function() {
    $.post('crearTurnos.php',{iniciales:$($this).val(),
      turnoAttr:$(this).attr("turnoAttr"),
	  diaAttr:$(this).attr("diaAttr"),
	  filaAttr:$(this).attr("filaAttr"),
	  tipoTurnoAttr:$(this).attr("tipoTurnoAttr")});
			
		});
		$(this).unbind("click");
		$(".celdasHeaders,.bloqueado,.vacaciones,.vacante").unbind("click");
		
	
  });

Open in new window


can you verify the commented code too?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
joyacv2Author Commented:
my code doesn't need to receive a response, because it sends the parameters and then the php execute a query to save data in a database. With my .ajax code the problem is that i don't know why it takes the value of the first cell always
0
 
Julian HansenCommented:
When you say does not work how - do you get an error or does it not call the script?

the problem is that i don't know why it takes the value of the first cell always
What first cell?

You need to post more code so we can see what yo uare referring to?

Your blur is on an id value - which must be unique so it is always only going to fire on a single element.

Post your code so we can see where it is binding to.
0
 
joyacv2Author Commented:
Hi,

In the code i try to assign an id to each item of text input, they are inside a table cell, then when i updated any text input i need to retreive the text that the user enters and send to php using ajax
0
 
joyacv2Author Commented:
but the problem is that i can't retreive this value, the other attributes works well and works in my php, but the text inside the text box can't be retreived, any idea?
0
 
Julian HansenCommented:
Not without seeing the rest of your code.
0
 
joyacv2Author Commented:
Hi,

This is the only code that i am using, the rest are prepare by PHP and HTML

$(".celdasHeaders").click(
	
	function (){
	$(".turno10-6,.turno2-10,.turno6-2").not(".celdasHeaders").each(function(){
		var idEste = "prueba" +$(this).attr("turnoAttr")+$(this).attr("diaAttr");
		$(this).html('<form id="crearTurnoForm"><input type="text" id="idEste" name="iniciales" value="'+$(this).html()+'"></form>');
		
		$(this).unbind("click");
		$(".celdasHeaders,.bloqueado,.vacaciones,.vacante").unbind("click");
		
	});
	
		$("input").blur(function(){
			
			alert($(this).val());
			
	$.ajax({
		url:"crearTurnos.php",
		type:"POST",
		data: {iniciales:$("#idEste").val(),
      turnoAttr:$(this).attr("turnoAttr"),
	  diaAttr:$(this).attr("diaAttr"),
	  filaAttr:$(this).attr("filaAttr"),
	  tipoTurnoAttr:$(this).attr("tipoTurnoAttr")}});
			
		});
	
	});

Open in new window


The only thing that i do is to capture the text of the input box generate in the $(this).html(<'form.....
0
 
Julian HansenCommented:
Yes but it is the HTML code (including that generated by PHP) that is important.

There is no reference point to link your code back to table cells so no way to tell why it is not doing what you expect.
0
 
joyacv2Author Commented:
ok, i understand, but i only need to know how to retrieve a value of the input box. This is a lot of code

$(".celdasHeaders").click(
	
	function (){
	$(".turno10-6,.turno2-10,.turno6-2").not(".celdasHeaders").each(function(){




		$(this).html('<form id="crearTurnoForm"><input type="text" class="idEste" name="iniciales" value="'+$(this).html()+'"></form>');	
		$(this).unbind("click");
		$(".celdasHeaders,.bloqueado,.vacaciones,.vacante").unbind("click");
		
			$("input").blur(function(){
			
			alert($(this).val());
			alert($(this).attr("turnoAttr"));
			
	$.ajax({
		url:"crearTurnos.php",
		type:"POST",
		data: {iniciales:$(this).val(),
      turnoAttr:$(this).attr("turnoAttr"),
	  diaAttr:$(this).attr("diaAttr"),
	  filaAttr:$(this).attr("filaAttr"),
	  tipoTurnoAttr:$(this).attr("tipoTurnoAttr")}});
			
		});
		
	});

	
	});

Open in new window


let me explain this code in detail:

this code are contained inside the $(document).ready (function(){.....

next if the user click one of the headers of the table class (.celdasHeaders) then run the each function in a group of selected cells identify by classes. Then after that the input boxes are created in each of the cells. In this moment all is ok, but after that I don't know how to mix the blur function with the actual code to retrieve the value that is enter by the user, because if i include the $("input").blur inside the each statement i got the function running the times that each runs, i think that i have a wrong knowledge of where i have to put the input. blur to work. Ask me if you don't understand something, thanks again
0
 
Julian HansenConnect With a Mentor Commented:
To get the value of a text box

$('#idoftextbox').val()

Open in new window

0
 
joyacv2Author Commented:
ok, but how to create different id's for all the input text in the each function?
0
 
Julian HansenCommented:
That is why I need to see your html code I can't answer the question until I see how you are constructing your html

For instance if your textboxes are in a form you could use the .serialize() function which will collect all the values in a form and put them into a query string - but I can't say whether that will work or not until I see the html.

At the very least post your table with the inputs.
0
 
joyacv2Author Commented:
i found the answer, the problem is that i need to use .children with the input box
0
 
Julian HansenCommented:
@joyacv2 please read the grading guidelines here regarding giving a C grade (http://support.experts-exchange.com/customer/portal/articles/481419)
0
All Courses

From novice to tech pro — start learning today.