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.

You should include more details, like the values of $Id and $Name, as well as the actual HTML generated by your code. Also, what happens when you click on the button? — cjm
– cjm, Commented Oct 11, 2010 at 6:01
can you check it, whether $Id and $Name are replacing with their values at onClick=\"FilterExpression($Id,$Name)\" or not? — Nikhil Jain
– Nikhil Jain, Commented Oct 11, 2010 at 6:06
Please include the HTML output for the function caller. In other words, in your browser, view source and copy the html generated by print "<td><input type=\"submit\" name=\"Filter\" value=\"Filter\" onClick=\"FilterExpression('$Id','$Name')\"></td>";. — gilly3
– gilly3, Commented Oct 11, 2010 at 6:50
i viewed the source after entering the value of Id as 1,its taking the value properly.Here it is : <td><input type="submit" name="Filter" value="Filter" onClick="FilterExpression('1','')"></td>. But i am not finding any reason for not displaying it in the URL query string.;-( — SUSH
– SUSH, Commented Oct 11, 2010 at 7:10

cloverink · Accepted Answer · 2010-10-11 10:31:39Z

3

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

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
}

answered Oct 11, 2010 at 10:31

cloverink

5888 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SUSH Over a year ago

Thanks alot for the reply i am using the Second Method(without using form), i edited the code "NOW AM GETTING THE VALUES IN ALERT BOX,BUT not able to send those values to URL. i.e window.location="UsersList.cgi?Id="+val3+"&Name="+val4 statement is not working,Is their any alternate way for this?Please do reply

SUSH Over a year ago

Thank you i got the solution,its just that the action which i had specified in the form was Post instead of get.

gilly3 · Accepted Answer · 2010-10-11 06:13:26Z

3

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

answered Oct 11, 2010 at 6:13

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

1 Comment

psmears Over a year ago

And depending on what values $Id and $Name can take, you may need more quoting than that to avoid an XSS security vulnerability. (Think what happens if $Name starts with '> <script type="text/javascript">... - if the user can control $Name they can run arbitrary javascript for whoever views the page...

daotoad · Accepted Answer · 2010-10-12 05:22:30Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related