0

This may sound confusing, but I am unsure as where to start looking for an answer. This is the scenario: I have a webpage with a table created using PHP and inside each cell is a randomly selected word. What I would like to do is allow a user to click one of the cells and it would return the definition of the word, and refresh the table/page. From what I found so far was to make use of _POST/_REQUEST, however I am unsure how to find out what the user clicked, and pass that into a function to find the definition. Is my logic correct here, how would you go about this? I was thinking of having an onclick function to identify the element clicked, but don't know how to handle it.

<body>
<form method="post" action="
<table border="1">

<?php

$f="/words.txt";    //definitions also included in this file
$o=file($f);
$len=count($o);

$i=0;
while( $i < 18){
    $rnum= rand(2,$len);
    $rword= $o[$rnum];
    $piece= explode(" ",$rword);      //get just the word on the line

    if($i%3==0){
            echo "<tr>";
    }
echo "<td id='$i' onclick='about()'>".$piece[2]."</td>";
    $i++;
    if($i%3==0){
        echo "</tr>";
    }
}
?>

</table>
</body>
</html>
swam
  • 293
  • 6
  • 19
  • What you can do is to store the word, which I believe is stored in the variable `$piece[2]`, as a HTML5 data attribute (e.g. `data-word` or the likes), so you can [use JS (via `.dataset`) to retrieve it](https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/). For the AJAX call, you can either [use native JS](http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery), or rely on an external library (e.g. [jQuery's `.ajax()`](http://api.jquery.com/jquery.ajax/)). – Terry Nov 26 '14 at 23:06
  • On a side note, I would encourage avoid using inline JS (e.g. `onclick='about()'`), but use event listeners instead. That will help you to separate markup from function. – Terry Nov 26 '14 at 23:08
  • Thanks for the suggestion, I'm looking into it now! – swam Nov 26 '14 at 23:20

2 Answers2

0

The simplest thing you may done without need to any javascript is to make number forms equals to the number of cells you have. It is something like the following:

//Remove the form tag
<table border="1">

<?php

$f="/words.txt";    //definitions also included in this file
$o=file($f);
$len=count($o);

$i=0;
while( $i < 18){
    $rnum= rand(2,$len);
    $rword= $o[$rnum];
    $piece= explode(" ",$rword);      //get just the word on the line

    if($i%3==0){
            echo "<tr>";
    }
?>
<td id='<?php echo $i; ?>'><form method="post"><input type="hidden" name="word" value="<?php echo $piece[2];?> /><input type="submit" value="<?php echo $piece[2];?> /></form></td>;
<?php
    $i++;
    if($i%3==0){
        echo "</tr>";
    }
}
?>

</table>

By this way you have a submit button for each word you have that submit its own form's hidden element with the name word to be precessed on the server side.

SaidbakR
  • 13,303
  • 20
  • 101
  • 195
0

I suggest you to create a form that contains your word. Then you can simply specify action=”yourpagewithresponse.php” onclick="submit()" in the attributes of the form. In this way you don't need the submit button, you can simply click on the word. Obviously you can iterates the form creation in php language for having more word containers.

<form method="post" action=”yourpagewithresponse.php”  onclick="submit()"><input type="hidden" name="word" value="<?php echo $piece[2];?>" /><?php echo $piece[2];?></form>
ste.cape
  • 45
  • 11
  • What would I be requesting on the response page? Or in other words, how will I know which cell is clicked? (_REQUEST[' '] ) – swam Nov 27 '14 at 00:23
  • You will know what word was clicked because with the post you pass to the yourpagewithresponse.php the word itself: if into yourpagewithresponse.php you write $pippo = $_POST [`word'], $pippo will contains the word you have clicked. – ste.cape Nov 27 '14 at 00:34
  • Maybe I can't explain what I ment with my suggestion. The easiest way to post a form passing the word as argument is to create a form for every single word, including an hidden input named 'word' with value 'yourfirstword...', and add onclick="submit()" in every form, with action="yourpagewithresponse.php". Now into yourpagewithresponse.php write . Now if you click on the word into your main page will be opened yourpagewithresponse.php with the word you have clicked on writed inside. – ste.cape Nov 27 '14 at 00:51