How can I add a custom attribute to a popup_menu using CGI.pm? - perl

Question

I use the following Perl code to generate an HTML popup menu with CGI.pm:
$html->popup_menu(
-name => "to",
-values => [#TO, $param_to],
-labels => {%TO, $param_to => $param_to,},
-default => $param_to,
-onchange => $onchange,
-class => "form-control"
);
The generated menu looks like this:
<select name="to" onchange="if (this.value=='support#abc.com' || document.theForm.supportform.value==1) document.theForm.submit();" class="form-control">
<option value=""> select recipient </option>
<option value="sales#abc.com">Sales Inquiry</option>
<option value="support#abc.com">Technical Support</option>
<option value="jobs#abc.com">Jobs # abc</option>
<option value="investor-relations#abc.com">Investor Relations</option>
<option value="webmaster#abc.com">abc Webmaster</option>
</select>
How can I add the attribute required to the <select> element?

Answer 1

According to the CGI documentation:
Many routines will do something useful with a named argument that it doesn't recognize.
So just add another named argument -required:
$html->popup_menu(
-name => "to",
-values => [#TO, $param_to],
-labels => {%TO, $param_to => $param_to,},
-default => $param_to,
-onchange => $onchange,
-class => "form-control",
-required => "required"
);
This will generate something like:
<select name="to" ... required="required">
However, generating HTML with CGI.pm is a pain and not very maintainable. It's better to use a templating library like Template Toolkit. Templates allow you to separate your Perl code and your HTML (mostly), so you can have something like this:
popup.tt
<select name="to" onchange="if (this.value=='support#abc.com' || document.theForm.supportform.value==1) document.theForm.submit();" class="form-control">
[% FOR option IN options %]
<option value="[% option.value %]">[% option.text %]</option>
[% END %]
</select>
my_script.cgi
use strict;
use warnings;
use CGI;
use Template;
my $tt = Template->new or die Template->error;
my $q = CGI->new;
print $q->header;
my $options = [
{ value => '', text => 'select recipient' },
{ value => 'sales#abc.com', text => 'Sales Inquiry' },
{ value => 'support#abc.com', text => 'Technical Support' },
{ value => 'jobs#abc.com', text => 'Jobs # abc' },
{ value => 'investor-relations#abc.com', text => 'Investor Relations' },
{ value => 'webmaster#abc.com', text => 'abc Webmaster' }
];
$tt->process('foo.tt', { options => $options }) or die $tt->error;
Output
<select name="to" onchange="if (this.value=='support#abc.com' || document.theForm.supportform.value==1) document.theForm.submit();" class="form-control">
<option value="">select recipient</option>
<option value="sales#abc.com">Sales Inquiry</option>
<option value="support#abc.com">Technical Support</option>
<option value="jobs#abc.com">Jobs # abc</option>
<option value="investor-relations#abc.com">Investor Relations</option>
<option value="webmaster#abc.com">abc Webmaster</option>
</select>