Returning the data for clicked-on table

[voodoodan]

Hello,

 

Is there any way in Javascript of returning the table row ID that a user has clicked on, and then returning the data in that row to be sent in a direct email (ie not through local email system)?

 

I have the following row of data, which is repeated a number of times for each line but with different data.

 

<! -- This info is shown as a single line until clicked -->

<tr class="booked" onclick='document.getElementById("bookCaravan0").style.display="table-row"'>

<td>Sat 8th August 2015</td>

<td>Sat 15th August 2015</td>

<td>7</td>

<td>£575</td>

<td>Booked</td>

<td>Booked</td>

</tr>

<!-- This info is hidden under the above data by CSS until the above is clicked. It is hidden again once you mouse out -->

<tr id="bookCaravan0" onmouseout="document.getElementById('bookCaravan0').style.display='none';">

<td colspan="6" onmouseover='document.getElementById("bookCaravan0").style.display="table-row"' id="tdText">Please enter your phone number and we will call to arrange a booking: <br>

<label for="fone"></label>

<input type="text" name="book" id="book" value="Enter phone number" onclick="removeText(this)" onblur="addText(this)"><br /><br />

<input type="button" name="bookButton" value="Submit" id="priceSubmit" onclick="openBooking(this)">

<label for="bookingPeriod"></label>

<!-- Hidden Text -->

<input type="hidden" id="hiddenData" name="hidden" value="8th-15th August">

</td>

</tr>

I figured instead maybe another way of doing it would be to just put some cut-down info in as hidden text (as above) and try to send it on from that.

For the email side of things I have created a PHP file, but something isn't working. Actually nothing is working - when I click on the submit button absolutely nothing happens at all.

<?php

$fone = $_POST['book'];

$bookingPeriod = $_POST['hiddenData'];

$email_message = "

Phone Number: ".$fone."

Dates: ".$bookingPeriod."

";

mail("somewhere@googlemail.com","Contact request", $email_message);

?>

Hoping someone can give me some pointers, please?

Many thanks,Dan.

[justsomeguy]

Any event handler will have access to an event object describing the event which happened (although getting that object may differ if you're using an older browser). Among other things, the event object will contain a reference to the element which fired the event. So, if you have a click event on a tr element, then the event object will have a reference to that tr element. You can use that to access child or parent elements and their contents. Also, when you write event handlers inline in attributes like you're doing then this refers to the target element. Although, using inline events like that is a pretty old way to do things, these days most events are attached using Javascript code rather than attributes.It looks like you might have duplicate IDs though. If you have multiple elements on the same page with the same ID (like tdText, book, hiddenData, etc) then that's a problem. IDs are supposed to be unique on a page. You won't be able to use Javascript to refer to all of those elements by ID, each ID will only refer to one element.

Actually nothing is working - when I click on the submit button absolutely nothing happens at all.

You're missing a form tag.

[voodoodan]

Thanks very much for your detailed info, I will look into this. I forgot to include the form tags, which lie just outside the table tags in the full code.Thanks, Dan.