Может ли кто-нибудь помочь мне добавить виджет JQuery datepicker (похожий на http://jqueryui.com/datepicker/#inline) в форму и загрузить gif на форму submit? (Я не владею приведенным ниже кодом, получил его с форума поддержки, и я строю поверх него). Некоторая помощь будет принята с благодарностью.
Благодарю за помощь.
use strict;
use warnings;
use CGI;
use CGI::Carp qw(fatalsToBrowser); # Remove this in production
use win32::OLE;
my $who;
my $runCmd;
my $retVal;
my $fileCon;
my $copyCmd;
my $q = new CGI;
my $statusURL;
my $iframeCode;
print $q->header();
# Output stylesheet, heading etc
output_top($q);
if ($q->param()) {
# Parameters are defined, therefore the form has been submitted
display_results($q);
output_end2($q);
} else {
# We're here for the first time, display the form
output_form($q);
output_end($q);
}
# Output footer and end html
exit 0;
#-------------------------------------------------------------
# Outputs the start html tag, stylesheet and heading
sub output_top {
my ($q) = @_;
print $q->start_html(
-title => 'Deployment Dashboard',
-bgcolor => 'white',
-style => {
-code => '
/* Stylesheet code */
body {
font-family: verdana, sans-serif;
}
h2 {
color: darkblue;
border-bottom: 1pt solid;
width: 100%;
}
div {
text-align: left;
color: steelblue;
border-top: darkblue 1pt solid;
margin-top: 4pt;
}
a {
text-align: left;
color: steelblue;
}
th {
text-align: right;
padding: 2pt;
vertical-align: top;
}
td {
padding: 2pt;
vertical-align: top;
}
/* End Stylesheet code */
',
},
);
print $q->h2("Deployment Dashboard");
}
# Outputs a footer line and end html tags
sub output_end {
my ($q) = @_;
print $q->div("Gil Gbzy Ipe");
print $q->end_html;
}
sub output_end2 {
my ($q) = @_;
print $q->end_html;
}
# Displays the results of the form
sub display_results {
my ($q) = @_;
#print $q->param('Input_IP');
my @values = split(' ', $q->param('Input_IP'));
print <<END;
<table border="1">
<tr>
<td></td>
<td>checkpoint 1<br></td>
<td>checkpoint 2<br></td>
<td>checkpoint 3<br></td>
<td>checkpoint 4<br></td>
<td>checkpoint 5<br></td>
<td>checkpoint 6<br></td>
<td>checkpoint 7<br></td>
</tr>
END
foreach my $val (@values) {
print " <tr>";
print " <td>$val</td>";
print " <td>1</td>";
print " <td>2</td>";
print " <td>3</td>";
print " <td>4</td>";
print " <td>5</td>";
print " <td>6</td>";
print " <td>7</td>";
print " </tr>";
}
print "</table>";
}
# Outputs a web form
sub output_form {
my ($q) = @_;
print $q->start_form(
-name => 'main',
-method => 'POST',
);
print $q->start_table;
print $q->Tr(
$q->td('Ip Addresses:'),
$q->td(
$q->textarea(-name=>'Input_IP',
-default=>'
1.1.1.1
2.2.2.2',
-rows=>5,
-columns=>40,
)
)
);
print $q->Tr(
$q->td($q->submit(-value => 'Submit')),
$q->td(' ')
);
print $q->end_table;
print $q->end_form;
}
Я признаю, что это не исчерпывающий ответ, но это Perl-программа, которая генерирует страницу, которая включает в себя некоторые поля с использованием HEREDOC
JQuery, я вижу, что вы используете HEREDOC
чтобы вы могли просто вытащить скрипты из Google и добавить datepicker()
на вашем скрипте, поскольку Perl и jQuery используют $, могут быть конфликты, поэтому при обращении к объекту jQuery убедитесь, что вы используете \$
или jQuery
иначе оно будет распечатываться как 0.
use CGI; ## load the cgi module
use CGI::Carp qw(fatalsToBrowser);
use Cwd;
use File::Basename;
print "Content-Type: text/html\n\n";
use Cwd qw( abs_path );
use File::Basename qw( dirname );
my $test = dirname(abs_path($0));
my $q = new CGI; ## create a CGI object
my($day, $month, $year)=(localtime)[3,4,5];
$year = ($year+1900);
print <<HTML;
<HTML>
<HEAD>
<TITLE>Sistema de Captura </TITLE>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" type="text/css">
<script type="text/javascript" src="js/states.js" language="javascript"> </script>
<script>
\$(document).ready(function() {
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
\$("#dm_date").val(curr_date + "/" + curr_month + "/" + curr_year);
\$( ".datepicker" ).datepicker({
yearRange: "1901: $year ",
changeMonth: true,
changeYear: true
});
jQuery("#dataTable").on("change","input,textarea,select",function(){
if (jQuery(this).val()){
jQuery(this).addClass('text_com');
}else{
jQuery(this).removeClass('text_com');
}
});
jQuery("#sendForm").button().click(function(e){
e.preventDefault();
var errorString="";
jQuery("#dataTable input, #dataTable textarea, #dataTable select").each(function(){
if(!jQuery(this).val()){
errorString += jQuery(this).prev().text().replace(":","") + "<br />";
}
});
if(errorString){
jQuery("#listHere").empty().html(errorString);
jQuery( "#dialog-confirm" ).dialog({
buttons: {
"Aceptar": function() {
jQuery( this ).dialog( "close" );
}
}
});
}else{
var data = jQuery("#dataHolder").serialize();
console.log(data);
}
});
});
</script>
<style>
.ui-widget{font-size:12px;}
.ui-dialog .ui-dialog-titlebar {
padding: 1px;
position: relative;
}
.inner{
font-size:9px;
}
.padder{
padding: 3px;
margin-left:-6px;
}
</style>
</head>
<body>
<div id="index">
<div id="departments_listing" class="ui-widget ui-widget-content ui-corner-all" >
<div class="ui-widget-header" style="font-size:12px;">Formato de captura</div>
<form id="dataHolder">
<table id="dataTable">
<tr>
<td>
<p><span class="separate" >Fecha:</span> <input type="text" name="dm_date" id="dm_date" value="" class="text text_com" readonly /></p>
<p><span class="separate" >Nombre:</span> <input type="text" name="dm_name" id="dm_name" value="" class="text" /></p>
<p><span class="separate" >Apellido Paterno:</span> <input type="text" name="dm_paterno" id="dm_paterno" value="" class="text" /></p>
<p><span class="separate" >Apellido Materno:</span> <input type="text" name="dm_materno" id="dm_materno" value="" class="text" /></p>
<div class="ui-widget ui-widget-content ui-corner-all padder" >
<div class="ui-widget-header inner" > Datos USA</div>
<p><span class="separate" >Direccion</span>
<textarea name="dm_address_usa" id="dm_address_usa" class="text" ></textarea>
</p>
<p><span class="separate" >Ciudad:</span> <input type="text" name="dm_city" id="dm_city" value="" class="text" /></p>
<p><span class="separate" >Estado:</span> <input type="text" name="dm_state" id="dm_state" value="" class="text" /></p>
<p><span class="separate" >CP:</span> <input type="text" name="dm_zip" id="dm_zip" value="" class="text" /></p>
<p><span class="separate" >Telefono:</span> <input type="text" name="dm_tel" id="dm_tel" value="" class="text" /></p>
</div>
<p><span class="separate" >Nombre del Padre:</span> <input type="text" name="dm_father" id="dm_father" value="" class="text" /></p>
<p><span class="separate" >Nombre de la Madre:</span> <input type="text" name="dm_mother" id="dm_mother" value="" class="text" /></p>
<p><span class="separate" >Fecha de Nacimiento:</span> <input type="text" name="dm_dob" id="dm_dob" value="" class="text datepicker" /></p>
<p><span class="separate" >Lugar de Nacimiento:</span> <input type="text" name="db_pob" id="db_pob" value="" class="text" /></p>
</td>
<td class="moreleft">
<p><span class="separate" >Fecha de Registro:</span> <input type="text" name="dm_dor" id="dm_dor" value="" class="text datepicker" /></p>
<p><span class="separate" >Lugar de Registro:</span> <input type="text" name="dm_por" id="dm_por" value="" class="text" /></p>
<p><span class="separate" >Estado MX:</span> <input type="text" name="dm_state_mx" id="dm_state_mx" value="" class="text" /></p>
<p><span class="separate" >No. de Oficialia:</span> <input type="text" name="dm_oficialia" id="dm_oficialia" value="" class="text" /></p>
<p><span class="separate" >No. de Libro:</span> <input type="text" name="dm_book" id="dm_book" value="" class="text" /></p>
<p><span class="separate" >No. de Foja:</span> <input type="text" name="dm_foja" id="dm_foja" value="" class="text" /></p>
<p><span class="separate" >No. de Acta:</span> <input type="text" name="dm_acta" id="dm_acta" value="" class="text" /></p>
<p><span class="separate" >Tipo de Documento:</span>
<select name="dm_type" id="dm_type" class="text" >
<option value="">Selecciona</option>
<option value="Aclaracion de Acta"> Aclaración de Acta </option>
<option value="Inscripcion en el Registro Civil"> Inscripción en el Registro Civil </option>
<option value="Acta de Matrimonio"> Acta de Matrimonio </option>
<option value="Acta de Divorcio"> Acta de Divorcio </option>
<option value="Acta de Defuncion"> Acta de Defunción </option>
<option value="Registro Extemporaneo."> Registro Extemporáneo </option>
<option value="Juicios Administrativos"> Juicios Administrativos </option>
<option value="Nulidad de Acta en el Registro Civil Mexicano"> Nulidad de Acta en el Registro Civil Mexicano </option>
<option value="Apostille"> Apostille </option>
<option value="Legalización de documentos"> Legalización de documentos</option>
</select>
</p>
<p><span class="separate" >Estatus:</span>
<select name="dm_status" id="dm_status" class="text" >
<option value="">Selecciona</option>
<option value="Pendiente"> Pendiente </option>
<option value="Deposito en Proceso"> Deposito en Proceso </option>
<option value="Deposito Recibido"> Deposito Recibido </option>
<option value="Cerrado"> Cerrado </option>
<option value="Cancelado"> Cancelado </option>
</select>
</p>
<p><span class="separate" >Email:</span> <input type="text" name="dm_email" id="dm_email" value="" class="text" /></p>
<p><span class="separate" >Caso :</span>
<select name="dm_special" id="dm_special" class="text" >
<option value="">Selecciona</option>
<option value="Acta">Acta</option>
<option value="Especial">Caso Especial</option>
</select>
</p>
<p><span class="separate" >Comentarios:</span>
<textarea name="dm_comments" id="dm_comments" class="text" ></textarea></p>
<p><span class="separate" >Imagen:</span>
<input type="file" name="dm_img" id="dm_img" value="" /></p>
</td>
</tr>
</table>
</form>
<button id="sendForm"> Enviar </button>
</div>
</div>
<div id="dialog-confirm" title="Errores encontrados..">
<p> Falta información en los siguientes campos:
<div id="listHere"></div>
</p>
</div>
</body>
</html>
HTML
sub trim($) {
my $string = shift;
$string =~ s/^\s+//;
$string =~ s/\s+$//;
return $string;
}
exit(0);