tr onClick not working

[Hobbyist_PHPer]

Hello Everyone...

 

I'm hoping someone can help me with this table grid, I've been pulling out my hair for a couple days now...

 

I attempted a jQuery solution but could not make it work... So now I'm trying to make it work with just JavaScript...

 

What I'm trying to do is simply allow a user to click on a row to pass an "id" value which would then display the entire data for that "id" ... essentially just a master/detail...

 

Here's my current JavaScript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
    function SubmitThisForm() {
        location.href = 'statuses.php';
    }
</script>

 

And here's the form table row code, notice the onClick in the <tr>:

extract($row);
$rowCounter += 1;
echo '<form action="statuses.php" method="post">';
echo '<input type="hidden" id="ID" name="ID" value="'.$OrderTicketID.'" />';
echo '<tr class="'.OddOrEven($rowCounter).'" style="line-height: 1.75;" onClick="SubmitThisForm(this)">';
echo '<td style="padding-left: 5px;"> </td>';
echo '<td>'.$OrderTicketFirstName.' '.$OrderTicketLastName.'</td>';
echo '<td>'.$BrokerCompanyName.'</td>';
echo '<td>'.$InsuranceCarrier.'</td>';
echo '<td>'.$AgentCompanyName.' '.$AgentName.'</td>';
echo '<td>'.$OrderTicketPolicyType.'</td>';
echo '<td>'.number_format($OrderTicketPolicyAmount, 2).'</td>';
echo '<td>'.$OrderTicketCurrentStatus.'</td>';
echo '<td>'; if($OrderTicketScheduledDateTime != "0000-00-00 00:00:00"){echo date('n-d-Y @ g:i a', strtotime($OrderTicketScheduledDateTime -6));} echo '</td>';
echo '</tr>';
echo '</form>';

 

By the way, it currently does nothing...

[Mahngiel]

Take this fiddle and run with it. http://jsfiddle.net/Mahngiel/xuTXX/1/

[Adam]

Your JS is within a script tag that includes external code. You need separate script tags:

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
    function SubmitThisForm() {
        location.href = 'statuses.php';
    }
</script>

[Christian F.]

I'm surprised this produces something at all, as you have quite a few validation issues with your HTML code. Make sure your code is valid first, then monitor the developer tools of your browser to see if there's any JS errors in your code somewhere.

[Hobbyist_PHPer]

Take this fiddle and run with it. http://jsfiddle.net/Mahngiel/xuTXX/1/

 

Thank you for the link, however I have no idea what that was...

[Hobbyist_PHPer]

Your JS is within a script tag that includes external code. You need separate script tags:

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
    function SubmitThisForm() {
        location.href = 'statuses.php';
    }
</script>

 

Thank you... I thought I could just save code by putting it together... Obviously I was wrong... Your suggestion fixed it, thank you very much...

[Hobbyist_PHPer]

I'm surprised this produces something at all, as you have quite a few validation issues with your HTML code. Make sure your code is valid first, then monitor the developer tools of your browser to see if there's any JS errors in your code somewhere.

 

WHAT?!?

[Christian F.]

This:

echo '<input type="hidden" id="ID" name="ID" value="'.$OrderTicketID.'" />';
echo '<tr class="'.OddOrEven($rowCounter).'" style="line-height: 1.75;" onClick="SubmitThisForm(this)">';

Is very much invalid HTML, which forces the browser to go into quirks mode. When it does, all bets are off and anything could happen. Make sure your website actually validates as the intended HTML spec you want, and it's also highly recommended to use semantic markup. (No tables for layout purposes, etc.)