在 HTML 中创建组合框答案

【问题标题】：Creating a Combobox in HTML在 HTML 中创建组合框
【发布时间】：2010-09-16 04:59:05
【问题描述】：

实际上，我有一个由文本字段组成的 CGI 表单，我需要一个组合框，我可以在其中动态输入自己的数据。可能这似乎是一个非常愚蠢的问题，但我是 cgi-perl 和 HTML 的新手，所以不知道该怎么做。这是我的表格：

 #!C:\perl\bin\perl.exe

use CGI;
use CGI qw/:standard/;
use CGI::Carp qw(warningsToBrowser fatalsToBrowser);
my $q = new CGI;
use DBI;
use CGI qw(:all);
use strict;
use warnings;
print "Content-Type: text/html\n\n";
print $q->header ( );

if ( $q->param("submit") )
{
process_form ( );
}
else
{
display_form ( );
}


sub process_form
{
 if ( validate_form ( ) )
 {
  display_form ( );
  }
  }


 sub validate_form
 {
 my $User_Name = $q->param("User_Name");
 my $User_Password= $q->param("User_Password");
 my $User_Permission = $q->param("User_Permission");
 my $User_Department= join(", ",$q->param("User_Department"));
 my $error_message = "";
 $error_message .= "Please enter your name<br/>" if( !$User_Name );
 $error_message .= "Please enter your Password<br/>" if( ! $User_Password );
 $error_message .= "Please Select a permission<br/>" if( !$User_Permission );
 $error_message .= "Please select atleast 1 department<br/>" if(!$User_Department);

 if ( $error_message )
  {
    display_form ( 
   $error_message,$User_Name,$User_Password,$User_Permission,$User_Department);
    return 0;
  }
 else
 {
 my $dbh = DBI->connect("dbi:SQLite:DEVICE.db","", "",{RaiseError => 1, AutoCommit =>
  1 } );
 my $sql = "SELECT COUNT(UserName) FROM UsersList WHERE UserName='$User_Name'";
 my $sth = $dbh->prepare($sql) or die("\n\nPREPARE ERROR:\n\n$DBI::errstr");
  $sth->execute or die("\n\nQUERY ERROR:\n\n$DBI::errstr");
 my ($n) = $dbh->selectrow_array($sth);
 $sth->finish();
 if ($n > 0) {
 print "Record Already Exists";
 }
  else {
  my $sql = "INSERT INTO UsersList (UserName,Password,Permission,Department) VALUES 
  ('$User_Name ',' $User_Password','$User_Permission','$User_Department')";
   my $sth = $dbh->prepare($sql);
   $sth->execute;
  print "Record Added Successfully";
  $sth->finish();
  $dbh->commit or die $dbh->errstr;
    }
   $dbh->disconnect;
   }
   }

      sub display_form
 {
  my $error_message = shift;
 my $User_Name = shift;
  my $User_Password = shift;
 my $User_Permission= shift;
 my $User_Department= shift;

 my $User_Permission_Add_sel = $User_Permission eq "Add" ? " checked" : "";
 my $User_Permission_Edit_sel =$User_Permission eq "Edit" ? " checked" : "";
 my $User_Permission_Delete_sel =$User_Permission eq "Delete" ? " checked" : "";
 my $User_Permission_View_sel =$User_Permission eq "View" ? " checked" : "";

 my $User_Department_html = "";
 my $dbh = DBI->connect("dbi:SQLite:DEVICE.db","", "",{RaiseError => 1, AutoCommit =>
  1 } );
 my $sql = "select DepartmentName from Departments order by DepartmentName";
  my $sth = $dbh->prepare($sql);
 $sth->execute() ;

 while (my  $User_Department_option= $sth->fetchrow_array)
 {
   $User_Department_html.= "<option value=\"$User_Department_option\"";
   $User_Department_html.= " selected" if ( $User_Department_option eq
    $User_Department );
   $User_Department_html.= ">$User_Department_option</option>";
  }
  $sth->finish();
  $dbh->commit or die $dbh->errstr;
  print <<END_HTML;
  <html>
 <head><title>Form Validation</title></head>
 <body>

 <form action="AddUser.cgi" method="post">
 <input type="hidden" name="submit" value="Submit">

 <p>$error_message</p>


 <TABLE BORDER="1" align="center">
  <TR>
 <TD>Name</TD>
 <TD> <input type="text" name="User_Name" value="$User_Name"></TD>
 </TR>

  <TR>
<TD>Password</TD>
 <TD colspan="2"><input type="password" name="User_Password" value="$User_Password" 
   size="20" maxlength="15" /></TD>

  </TR>
  <TR>
 <TD>Role</TD>
 <TD>"HERE I NEED A COMBOBOX"</TD>
  </TR>

<TR>
 <TD>Permission</TD>
  <TD><input type="radio" name="User_Permission" 
   value="Add"$User_Permission_Add_sel>Add<input type="radio" name="User_Permission"
   value="Edit"$User_Permission_Edit_sel>Edit<input type="radio" 
   name="User_Permission" value="Delete"$User_Permission_Delete_sel>Delete<input
   type="radio" name="User_Permission" value="View"$User_Permission_View_sel>View</TD>
</TR>

<TR>
<TD>Department</TD>
<TD colspan="2"> <select name="User_Department" MULTIPLE
  SIZE=4>$User_Department_html</select></TD>

</TR>
</TR>
<TR>
<TD align="center" colspan="2">
<input type="submit" name="submit" value="ADD">
</TD>
 </TR>
 </TABLE
  </form>

   </body></html>
   END_HTML

 }

【问题讨论】：

您确定需要组合框而不是下拉选择吗？大多数人将两者混为一谈，我猜你并不真的需要一个组合。
最初我想确认它们是不是类似于 html 中的组合框...？即文本字段和下拉列表的组合......请让我知道......

标签： html perl forms combobox cgi

【解决方案1】：

您在这里寻找的不是在 Perl 方面，而是在 HTML+Javascript 方面。正如其他人所指出的，HTML 没有内置的组合框表单元素。所以，你被 Javascript 困住了。

就个人而言，我喜欢在使用 Javascript 时使用 JQuery。这是一个 Javascript 库，可以更轻松地操作网页元素。

具体到您的问题，您需要查看http://jqueryui.com/demos/autocomplete/（如果您真的非常需要一个组合框而不是 Google 样式的自动完成文本字段，则右侧链接有一个实际的组合框演示。

与组合框无关，但您可能还想查看 Template::Toolkit - Perl（和其他）的模板系统，它允许您从 perl 脚本中取出 HTML。相信我，将 HTML 嵌入到 CGI 脚本中用于超出最基本用途的任何内容很快就会变成一场噩梦。

【讨论】：

【解决方案2】：

代替"HERE I NEED A COMBOBOX"，你必须写：

<select name='User_Department' id='User_Department'>
$User_Department_html
</select>

但是，您在 sub display_form 中检索参数，但从未传递任何参数。

【讨论】：

对不起，我不知道html中有这样的元素。