Andy Wong
Andy Wong

Reputation: 73

Why does my Javascript function not run/work when I call it in HTML?

So I've tried numerous ways of calling the function itself. I'm rather new to PHP/Javascript, so I'm trying to learn it as I go.

I've made a function that checks if a certain checkbox is checked or not. What I want the function to do is redirect the page to another page if the checkbox IS checked, while displaying an alert box if it is unchecked.

The variables I pass through the javascript function are from my PHP code, so I was thinking my issue might be related to how the two languages interact with each other.

Here is my code. I fetch the various variables from a SQL database and store it in PHP variables. I call the function just after the commented line in the PHP code:

function checkReceived(received, profEmail){
	if (received == checked){
		window.location.assign('https://someurl.php?email=' + profEmail');
	} else{
		alert("LOL HOW ABOUT NO");
	}
}
<?php
	//This loop populates the ticket display using the records in the database
	while($recordSet->EOF == false){
		$ticketNumber = $recordSet->Fields['TicketNumber'];
		$dateSubmitted = $recordSet->Fields['DateSubmitted'];
		$department = $recordSet->Fields['Department'];
		$courseNo = $recordSet->Fields['CourseNumber'];
		$instructorName = $recordSet->Fields['InstructorName'];
		$received = ($recordSet->Fields['Received']) ? "checked" : "unchecked";
		$sendReminder = ($recordSet->Fields['SendReminder']) ? "checked" : "unchecked";
		$email = $recordSet->Fields['Email'];
		$CC = $recordSet->Fields['CC'];


		$strHTML  = "<tr><td>$dateSubmitted</td>";
		$strHTML .= "<td>$department</td>";
		$strHTML .= "<td>$courseNo</td>";
		$strHTML .= "<td style='word-break: break-all'>$instructorName</td>";
		$strHTML .= "<td align='center'> <input type='checkbox' ".$received." class='receivedCheckbox' onchange='checkboxClicked(\"Received\", ".$ticketNumber.")'/> </td>";
		$strHTML .= "<td align='center'> <input type='checkbox' ".$sendReminder." class='sendReminderCheckbox' onchange='checkboxClicked(\"SendReminder\", ".$ticketNumber.")' data-email='".$email."'/> </td>";
		//$strHTML .= "<td style='word-break: break-all;' align='center'> <a href='javascript:checkReceived($received, $email)'>".$email."</a></td>";
		$strHTML .= "<td><button id='emailButton' onclick='checkReceived($received, $email)'>".$email."</button></td>";
		$strHTML .= "<td align='center'> <button onclick=\"window.open('https://someurl.php?ticketNumber=".$ticketNumber."')\">Print</button> </td>";
		$strHTML .= "</tr>";

		echo $strHTML;

		$recordSet->MoveNext;
	}
?>

As per request, here is my $strHTML:

<td>Psychology</td>
<td>1000</td>
<td style='word-break: break-all'>Some Name</td>
<td align='center'> <input type='checkbox' checked class='receivedCheckbox' onchange='checkboxClicked("Received", 31)'/> </td>
<td align='center'> <input type='checkbox' unchecked class='sendReminderCheckbox' onchange='checkboxClicked("SendReminder", 31)' data-email='[email protected]'/></td>
<td><button id='emailButton' onclick='checkReceived(checked, [email protected])'>[email protected]</button></td>
<td align='center'> <button onclick="window.open('https://someurl.php?ticketNumber=31')">Print</button> </td>
</tr>

Upvotes: 1

Views: 120

Answers (3)

Swashata Ghosh
Swashata Ghosh

Reputation: 1058

I am expanding my answer from the comment with better explanation.

First of all in JS, do not compare variable with checked, rather compare with "checked" (i.e, string) as @PaulH has mentioned.

So your JS should look like:

function checkReceived(received, profEmail){
    if (received == "checked"){
        window.location.assign('https://someurl.php?email=' + profEmail);
    } else{
        alert("LOL HOW ABOUT NO");
    }
}

Now for the PHP, in the line $strHTML .= "<td><button id='emailButton' onclick='checkReceived($received, $email)'>".$email."</button></td>"; you are not wrapping the output of $received and $email variable inside a quote ("). It is necessary because it would print HTML which will pass strings to the JS function. So your PHP code needs to look like this:

<?php
    //This loop populates the ticket display using the records in the database
    while($recordSet->EOF == false){
        $ticketNumber = $recordSet->Fields['TicketNumber'];
        $dateSubmitted = $recordSet->Fields['DateSubmitted'];
        $department = $recordSet->Fields['Department'];
        $courseNo = $recordSet->Fields['CourseNumber'];
        $instructorName = $recordSet->Fields['InstructorName'];
        $received = ($recordSet->Fields['Received']) ? "checked" : "unchecked";
        $sendReminder = ($recordSet->Fields['SendReminder']) ? "checked" : "unchecked";
        $email = $recordSet->Fields['Email'];
        $CC = $recordSet->Fields['CC'];


        $strHTML  = "<tr><td>$dateSubmitted</td>";
        $strHTML .= "<td>$department</td>";
        $strHTML .= "<td>$courseNo</td>";
        $strHTML .= "<td style='word-break: break-all'>$instructorName</td>";
        $strHTML .= "<td align='center'> <input type='checkbox' ".$received." class='receivedCheckbox' onchange='checkboxClicked(\"Received\", ".$ticketNumber.")'/> </td>";
        $strHTML .= "<td align='center'> <input type='checkbox' ".$sendReminder." class='sendReminderCheckbox' onchange='checkboxClicked(\"SendReminder\", ".$ticketNumber.")' data-email='".$email."'/> </td>";
        //$strHTML .= "<td style='word-break: break-all;' align='center'> <a href='javascript:checkReceived($received, $email)'>".$email."</a></td>";
        $strHTML .= "<td><button id='emailButton' onclick='checkReceived(\"$received\", \"$email\")'>".$email."</button></td>";
        $strHTML .= "<td align='center'> <button onclick=\"window.open('https://someurl.php?ticketNumber=".$ticketNumber."')\">Print</button> </td>";
        $strHTML .= "</tr>";

        echo $strHTML;

        $recordSet->MoveNext;
    }
?>

Let me know how that turned out.

Upvotes: 1

PaulH
PaulH

Reputation: 3049

In javascript, don't write

if (received == checked){

but

if (received == "checked"){

you want to compare the variable received with the string "checked". Through PHP, the received variable received the value "checked" or "unchecked"

$received = ($recordSet->Fields['Received']) ? "checked" : "unchecked";

then it is converted to HTML with a javascript function call. The javascript function must be called with strings like

checkReceived("string", "string"),

so in PHP it becomes

echo "checkReceived(\"string\", \"string\")";

and with PHP variables

echo "checkReceived(\"$var1\", \"$var2\")";

in your code, it becomes:

$strHTML .= "<td><button id='emailButton' onclick='checkReceived(\"$received\", \"$email\")'>$email</button></td>";

To see if function checkReceived() is called, insert a console.log() statement and look in your browser's debugger JavaScript Console.

checkReceived(received, profEmail){
    console.log(received, profEmail);
}

Upvotes: 1

dardan.g
dardan.g

Reputation: 699

The problem is when concatenating the html from php. You should use escape sequence when callin function (ex onchange=\"checkboxClicked('Received', ".$ticketNumber.")\")

$strHTML  = "<tr><td>$dateSubmitted</td>";
    $strHTML .= "<td>$department</td>";
    $strHTML .= "<td>$courseNo</td>";
    $strHTML .= "<td style='word-break: break-all'>$instructorName</td>";
    $strHTML .= "<td align='center'> <input type='checkbox' ".$received." class='receivedCheckbox' onchange=\"checkboxClicked('Received', ".$ticketNumber.")\"/> </td>";
    $strHTML .= "<td align='center'> <input type='checkbox' ".$sendReminder." class='sendReminderCheckbox' onchange=\"checkboxClicked('SendReminder', ".$ticketNumber.")\" data-email='".$email."'/> </td>";
    //$strHTML .= "<td style='word-break: break-all;' align='center'> <a href='javascript:checkReceived($received, $email)'>".$email."</a></td>";
    $strHTML .= "<td><button id='emailButton' onclick=\"checkReceived('$received', '$email')\">".$email."</button></td>";
    $strHTML .= "<td align='center'> <button onclick=\"window.open('https://someurl.php?ticketNumber=".$ticketNumber."')\">Print</button> </td>";
    $strHTML .= "</tr>";

and in javascript function if(checked == "checked") with quotes

Upvotes: 1

Related Questions