How do I call a Javascript Function from onclick event of submit button in Perl?

Question

I am trying to fire a javascript by onclick event of submit button but not able to, Details of my code are "i have a button named filter and two text boxes which take the Id and Name, All i want is "When i enter the value in Id textbox and click Filter then i want the values to be displayed on URL using QueryString". here's the code..

    print "<td><b>UserId</b></td><td><input type=\"text\" name=\"User_Id\" 
        value=\"" .$Id."\"  size=\"6\" ></td>";
    print "<td><b>UserName</b></td><td><input type=\"text\" name=\"User_Name\"
      value=\"" .$Name  ."\" size=\"10\"></td>";
    print "<td><input type=\"submit\" name=\"Filter\" value=\"Filter\" 
              onClick=\"FilterExpression($Id,$Name)\"></td>"; 

After i click Filter this code gets executed..

          if ( $q->param("Filter") )
               { 
                $Id=$q->param('User_Id');
                $Name=$q->param('User_Name');
          if ($Id ne "" )
                {
            $filterexpression= $filterexpression." UserId like '" .$Id. "%' and " ;
                }
          if ($Name ne "" )
                {
           $filterexpression= $filterexpression." UserName like '" .$Name. "%' and " ;
                }
             } 

The Javascript..

    <script type="text/javascript">
function FilterExpression(Id,Name)
         {
          var val3=Id;
          var val4=Name
           window.location="List.cgi?Id="+val3+"&Name="+val4
           }
     </script>

Please Do help me out find the solution,Thank you.

Answer 1

Looks like you may need quotes. Try onClick=\\"FilterExpression('$Id','$Name')\\"

Answer 2

1. If you use <form> you can use method="get" is easy way.
2. If you dont want to use <form> please add "id" into

<input type=\\"text\\" id='User_Id' name=\\"User_Id\\" value=\\"" .$Id."\\" size=\\"6\\" >

and write Javascript like this.

function FilterExpression()
{
var val3=document.getElementById("User_Id").value;
var val4=document.getElementById("User_Name").value;
window.location="List.cgi?Id="+val3+"&Name="+val4
}

Answer 3

Your problem comes from trying to do complicated and hard to manage quotes and escapes.

If you ever have to escape quotes in a Perl program, chances are, you are doing it wrong.

Perl has many different ways to quote strings that make it easy to manage strings, and fill-in variable values. The powerful quoting operators make escaping quote characters an extreme rarity.

I'll show you a few examples.

Your example could be handled with an interpolating here-doc :

my $filter_expression = FilterExpression($Id,$Name);

print <<"END_HTML";
<td><b>UserId</b></td><td><input type="text" name="User_Id" value="$Id"  size=\"6\" ></td>"
<td><b>UserName</b></td><td><input type="text" name="User_Name" value="$Name" size="10"></td>
<td><input type="submit" name="Filter" value="Filter" onClick="$filter_expression"></td>
END_HTML

Or you could use the qq operator to quote assemble your output:

print qq{<td><b>UserId</b></td><td><input type="text" name="User_Id" value="$Id"  size="6" ></td>};

print qq[<td><b>UserName</b></td><td><input type="text" name="User_Name" value="$Name" size="10"></td>];

print qq(<td><input type="submit" name="Filter" value="Filter" onClick=."$filter_expression"></td>); 

Or if you insist on avoiding interpolation, simply use a single quote :

print '<td><b>UserId</b></td><td><input type="text" name="User_Id" value="'
      .$Id
      .'"  size=\"6\" ></td>';

print '<td><b>UserName</b></td><td><input type="text" name="User_Name" value="'
      .$Name
      .'" size=\"10\"></td>';

print '<td><input type="submit" name="Filter" value="Filter"  onClick="'
      .FilterExpression($Id,$Name)
      .'"></td>';

Also, seriously consider using a template system to handle your HTML generation.