Question

我正在重写这个问题，使其具体化：

网页的要求是

从文件中读取规则并在加载网页时填充文本框
添加其他文本框的添加按钮
用于保存规则的保存按钮（包括另外添加的规则）
删除按钮，删除已检查的文本框，以便其中的规则不会存储回文件。

我的方法：

使用＆＃34; read_rules＆＃34;子模块从网页读取规则，如果非空，则使用＆＃34;规则＆＃34;子模块在网页上打印它们。这里读取文件中的每一行并用空格分割，并在网页上放入哈希和打印数组（＆＃34; rules＆＃34; module）。
按下sumit按钮时，sumodule＆＃34; save_rules＆＃34;被调用来保存规则。与read_rules相反的方式。
添加按钮将添加其他文本区域。
删除按钮应该删除已检查的文本区域并重新加载页面，以便在重新加载页面时，检查的文本区域不会出现，因此当按下保存按钮时它们不会保存在文件中 ??? （这是我必须实施的）

我提到的每个子模块的代码块如下。

此子模块用于打印文本框和复选框：

sub rule {

my($num,$rule) = @_;
return join "\n",

    "<tr><td><br>",

    hidden(
            -name    => "idx$num",
            -default => $rule->{idx},
    ),

    checkbox(
            -name    => "checkbox$num",
            -label   => "",
            -value   => "on",
    ),

    "<td>",
    textfield(
            -name    => "repository$num",
            -size    => 30,
            -default => $rule->{'repo'},
    ),

    "<td>",
    textfield(
            -name    => "branch$num",
            -size    => 30,
            -default => $rule->{'branch'},
    ),

    "<td>",
    textfield(
            -name    => "file$num",
            -size    => 30,
            -default => $rule->{'file'},
    ),
               }

这个sumodule从文件中读取规则

sub read_rules {
    my $rule;
    @rules = ..# read the rules from a file, each line is read as an element of an array
    for $rule (@rules){
    my $rec = {};
    ($re,$br,$fi) = split (' ', $rule);
    $rec->{'repo'} = $re;
    $rec->{'branch'} = $br;
    $rec->{'file'} = $fi;
    push @config, $rec;
    }
}

将网页（文本区域）中的规则保存回文件的汇总模块 sub save_rules {

   for ($i = 1;  param("repository$i"); $i++) {
          $repo1 = param("repository$i");
          $branch1 = param("branch$i");
          $file1 = param("file$i");
          my $record = {};
 # save back $myrec->{'repo1'} $myrec->{'branch1'} $myrec->{'file1'} to file 
    }

}

主要功能

print start_form();
read_rules();
Delete_all();
my $i = 0;
if (@config) {
  foreach $conf (@config) {
  $i++;
  print rule($i,$conf);
}
print $table_header_string;

if (param("action") eq "Add") {
print(br,rule(++$i),hr);
}
print p( submit (-name => "action" , -value => "Add"));
print p( submit (-name => "action" , -value => "Save"));
print p( submit (-name => "action" , -value => "Delete"));
print end_form();
exit 0;

下面的Delete_rule子模块必须编码!! sub delete_rule（）{ ＃................ }

如果有人告诉我如何在cgi中使用javascript，我将不胜感激，因此每次按下按钮时都不必加载网页。

Answer 1

已编辑以解决更具体的问题

鉴于您不想在每次单击按钮时重新加载页面，您将需要使用JavaScript来执行此操作。我将在这里解释一下，你可以click here to see a working jsfiddle example。

<!doctype html>
<html>
    <head>
        <title>Remove Element On Button Click</title>
    </head>
    <body>
        <input type="text" id="myTextBox" value="something here">
        <input type="button" id="btnDelete">
    </body>

    <script>
        document.getElementById('btnDelete').onclick = function ()
        {
            var textbox = document.getElementById('myTextBox');
            textbox.parentNode.removeChild(textbox);
        }
    </script>
</html>

请注意，我将输入元素的类型从submit更改为button。这会自动阻止页面重新加载。

如果你绝对必须使用submit输入元素（和jsFiddle示例一样），你可以通过改变Javascript来阻止表单提交：

document.getElementById('btnDelete').onclick = function (evt)
{
    if (!evt) var evt = window.event;
    if (evt.preventDefault) { evt.preventDefault(); } else { evt.returnValue = false; }

    var textbox = document.getElementById('myTextBox');
    textbox.parentNode.removeChild(textbox);
}

如果愿意，可以将JavaScript放在外部文件中。它放在HTML的末尾，以便在尝试附加事件处理程序之前确保DOM已完全加载（因此按钮在DOM中可用）。

我不清楚输出中是否会有一个或多个“删除”按钮，或者是否会有一个或多个字段需要删除，但这应该指向正确的方向。 / p>

这是一个纯JavaScript解决方案。正如@ vol7ron正确指出的那样，有一些JavaScript框架，比如jQuery，也可以用来做这个，如果你已经在使用这样的框架，那么利用它是有利的，但是无论如何都不需要这样的框架。要做到这一点。

如何删除CGI perl网页上的文本字段？

1 个答案: