Solved

textbox and jquery/ajax

Posted on 2014-02-25
17
394 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 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
Comment Utility
ok, let me try, i will be back
0
 
LVL 1

Author Comment

by:joyacv2
Comment Utility
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
 
LVL 1

Author Comment

by:joyacv2
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
Not without seeing the rest of your code.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:joyacv2
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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 51

Assisted Solution

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

$('#idoftextbox').val()

Open in new window

0
 
LVL 1

Author Comment

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

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
i found the answer, the problem is that i need to use .children with the input box
0
 
LVL 51

Expert Comment

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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
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…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now