Solved

textbox and jquery/ajax

Posted on 2014-02-25
17
396 Views
Last Modified: 2014-03-10
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?
0
Comment
Question by:joyacv2
  • 9
  • 7
17 Comments
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39885662
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
 
LVL 1

Author Comment

by:joyacv2
ID: 39885678
ok, let me try, i will be back
0
 
LVL 1

Author Comment

by:joyacv2
ID: 39885719
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 1

Author Comment

by:joyacv2
ID: 39885739
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39885772
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
 
LVL 1

Author Comment

by:joyacv2
ID: 39885907
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
 
LVL 1

Author Comment

by:joyacv2
ID: 39885920
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39886085
Not without seeing the rest of your code.
0
 
LVL 1

Author Comment

by:joyacv2
ID: 39886103
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39886211
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
 
LVL 1

Author Comment

by:joyacv2
ID: 39886272
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
 
LVL 54

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 39886325
To get the value of a text box

$('#idoftextbox').val()

Open in new window

0
 
LVL 1

Author Comment

by:joyacv2
ID: 39886336
ok, but how to create different id's for all the input text in the each function?
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39887198
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
 
LVL 1

Author Comment

by:joyacv2
ID: 39887244
i found the answer, the problem is that i need to use .children with the input box
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39887980
@joyacv2 please read the grading guidelines here regarding giving a C grade (http://support.experts-exchange.com/customer/portal/articles/481419)
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question