Question

HTML file looks like:

    <? my $args = shift; ?>
    .
    .
    .
<script type="text/javascript">
function validateInput(value,regex,eid)
{
  var elem;
 alert(eid);
 /* 
  if (value.match(regex) == null) {
     elem = document.getElementById(id);

  }*/
}
</script>
.
    ? foreach my $row (@{$args}) {
    <tr><td><label><?= $row->{field} ?> </label>
    <input onchange="validateInput(this.value,<?=$row->{reg}?>,<?=$row->{id}?>);" 
    type="text" name="<?= $row->{name} ?>" id="<?= $row->{id} ?>" /><span class="small" id="<?= $row->{id} ?>"></span></td></tr>
    ? }

Perl code is:

my $test_tmlp = read_file('registration_form.tmpl');
my @args = ({field => 'First Name',
             name  => 'fn',
             id    => 'fn',
             reg   => '/[a-zA-Z]+/'},
            {field => 'Last Name',
             name  => 'ln',
             id    => 'ln',
             reg   => '/[a-zA-Z]+/'},
            {field => 'Email',
             name  => 'email',
             id    => 'email',
             reg   => '/[a-zA-Z]+/'},
            {field => 'Cellphone',
             name  => 'cellphone',
             id    => 'cellphone',
             reg   => '/[a-zA-Z]+/'},
            {field => 'Coupon Code',
             name  => 'code',
             id    => 'code',
             reg   => '/[a-zA-Z]+/'}  
            );

my $page = build_mt(
        template    => $test_tmlp
    )->(\@args)->as_string;

for some reason, the third parameter that the javascript function get, is always the input HTML object, I’m banging my head against the wall for an hour+ on that with no clue.
could be something with escaping something, but, if I change the ‘id’ hash key to ‘reg’, then the last parameter get passed to the function as it should be…

any idea why this behavior is happening?

Thanks,

Answer 1

Let’s see what happens when you invoke validateInput()…

With HTML rendered with that template, the third parameter in validateInput() is a bareword: it isn’t wrapped in single quotes how it should be, and JavaScript engine should throw an error… The regex doesn’t need single quotes, so if you put the regex as third parameter it is passed to the subroutine.

I did this little change to your template ( note single quotes around third parameter ):

? foreach my $row (@{$args}) {
<tr><td><label><?= $row->{field} ?> </label>
<input onchange="validateInput(this.value,<?=$row->{reg}?>,'<?=$row->{id}?>');" 
type="text" name="<?= $row->{name} ?>" id="<?= $row->{id} ?>" /><span class="small" id="<?= $row->{id} ?>"></span></td></tr>
? }

Which yields this HTML:

<tr><td><label>First Name </label>
<input onchange="validateInput(this.value,/[a-zA-Z]+/,'fn');" 
type="text" name="fn" id="fn" /><span class="small" id="fn"></span></td></tr>
<tr><td><label>Last Name </label>
<input onchange="validateInput(this.value,/[a-zA-Z]+/,'ln');" 
type="text" name="ln" id="ln" /><span class="small" id="ln"></span></td></tr>
<tr><td><label>Email </label>
<input onchange="validateInput(this.value,/[a-zA-Z]+/,'email');" 
type="text" name="email" id="email" /><span class="small" id="email"></span></td></tr>
<tr><td><label>Cellphone </label>
<input onchange="validateInput(this.value,/[a-zA-Z]+/,'cellphone');" 
type="text" name="cellphone" id="cellphone" /><span class="small" id="cellphone"></span></td></tr>
<tr><td><label>Coupon Code </label>
<input onchange="validateInput(this.value,/[a-zA-Z]+/,'code');" 
type="text" name="code" id="code" /><span class="small" id="code"></span></td></tr>

Check if it works after this change.