HTML to jQuery to PHP, then from PHP to jQuery to HTML

Question

Ok, I have this code:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
 function get() {

    $.post('tt.php', { name : $(this).attr('id') }, function(output) {
        $('#age').html(output).show();
    });
}

</script>
</head>
<body>

<input type="text" id="name"/>
<a id="grabe" href="javascript: get()">haller</a>
<div id="age">See your name</div>
</body>
</html>

Here's what I want: get the id of an anchor tag from the anchor tag that has been clicked by the user via jQuery and then past that to a PHP file. The PHP file will then echo the id name of the anchor tag that was clicked by the user back to the jQuery which will then display the output into the specified element.

Here's the PHP file:

<?
$name=$_POST['name'];

if ($name==NULL)
{
echo "No text";
}
else
{
echo $name;
}
?>

So the id goes from the HTML to the JQuery, then to PHP, and then back to JQuery? — rcplusplus
– rcplusplus, Commented Apr 3, 2012 at 4:05
@rcplusplus he's just trying to get it working at this point. i doubt this is going to be the final implementation of his code. — dqhendricks
– dqhendricks, Commented Apr 3, 2012 at 4:18
@dqhendricks: yes, this code is just an expirement actually, once this expirement is successful then i will implement this into my project, a cms project. — Juliver Galleto
– Juliver Galleto, Commented Apr 4, 2012 at 0:56

Malitta N · Accepted Answer · 2012-04-03 04:11:35Z

1

Bind your event like this, since you are using jQuery

$('a').click(function(){
    $.post('tt.php', { name : $(this).attr('id') }, function(output) {
        $('#age').html(output).show();
    });
});

And remove the javascript from the href

<a id="grabe" href="#">haller</a>
<a id="kane" href="#">haller 2</a>

answered Apr 3, 2012 at 4:11

Malitta N

3,42325 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andreas Wong · Accepted Answer · 2012-04-03 04:04:32Z

1

$('#grabe').click(function() {
   $('#age').load('yourphp.php', {'name':$(this).prop('id')});
});

answered Apr 3, 2012 at 4:04

Andreas Wong

60.7k19 gold badges112 silver badges123 bronze badges

Comments

Krista K · Accepted Answer · 2012-04-03 04:04:01Z

0

You can use $(this) to access almost anything about "what brought you here" in the code. You'll also need a listener for the event. In this way too brief example below, I have it listening for any clicks to <span class="edit_area"> spans.

<script>
$(document).ready(function(){
    $('span.edit_area').click( function(){
        var fieldname = $(this).attr('id');
        ... 
    });
});

answered Apr 3, 2012 at 4:04

Krista K

22k3 gold badges34 silver badges44 bronze badges

Comments

Shyju · Accepted Answer · 2012-04-03 04:16:53Z

I dont know why you want to send an id to a server and then receive that id back again from the ajax call as it is already there in your client script. Anyway this is the code.

This code will does this functionalirty for all a tag with a class called"crazyLink" and show the data received from the server page in a div with id anotherCrazyDiv

HTML

<a class="crazyLink" href="#">I am crazy</a>
<a class="crazyLink" href="#">I am crazy2</a>
<div id="anotherCrazyDiv"></div>

Script

$(function(){
  $(".crazyLink").click(function(){
    var id=$(this).attr("id");
     $.post("data.php", { name : id } ,function(data){
       $("#anotherCrazyDiv").html(data);
     });
     return false; // to prevent normal navigation if there is a valid href value
   });
});

Keep in mind that, in your scenario, the value in id variable and value in data variable (after getting response from ajax call ) are same.

dqhendricks · Accepted Answer · 2012-04-03 04:33:06Z

0

you may want to separate your javascript from your html. it makes things easier. it should probably look something like this.

HTML

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">        </script>
<script type="text/javascript" src="javascript/somescript.js"></script>
</head>
<body>

<input type="text" id="name"/>
<a id="grabe" class="someclass">haller</a>
<div id="age">See your name</div>
</body>
</html>

javascript

$(document).ready(function() {
   $('.someclass').click(function() {
      $('#age').load(
         url: 'tt.php',
         data: { name: $(this).attr('id')}
      );
   });
});

edited Apr 3, 2012 at 4:33

answered Apr 3, 2012 at 4:14

dqhendricks

19.2k11 gold badges54 silver badges88 bronze badges

Collectives™ on Stack Overflow

HTML to jQuery to PHP, then from PHP to jQuery to HTML

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related