Adicionar Formulário ao clicar em botão

leoogabrich · Setembro 21, 2010

desejo criar um botão quando alguém clicar adiciona um outro formulário (idêntico a esse abaixo) só que abaixo dele.

E tambem quero que o botão página fique AO LADO do de imprimir e horario.

<html>

<title>Tarefas</title><BODY>

<FORM NAME="Tarefas" action="mailto:leoogabrich@hotmail.com" method="post" enctype="text/plain" ID="1" STYLE="font-family:Verdana;font-size:12;font-style:normal">
<text STYLE="font-family:Verdana;font-size:12;font-style:normal">Matéria:</text> 
<SELECT name="matéria" STYLE="font-family:Verdana;font-size:12;font-style:normal">
<option>Português
<option>Matemática
<option>História
<option>Geografia
<option>Inglês
<option>Geometria
<option>Redação
<option>Ciências</option></select>
<p>
<text STYLE="font-family:Verdana;font-size:12;font-style:normal">Data:</text><b>
<script Language="JavaScript">
<!--
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday; 

if(myday == 0)
day = " Domingo, " 

else if(myday == 1)
day = " Segunda - Feira, " 

else if(myday == 2)
day = " Terça - Feira, " 

else if(myday == 3)
day = " Quarta - Feira, " 

else if(myday == 4)
day = " Quinta - Feira, " 

else if(myday == 5)
day = " Sexta - Feira, " 

else if(myday == 6)
day = " Sábado, " 

if(mymonth == 0)
month = "Janeiro " 

else if(mymonth ==1)
month = "Fevereiro " 

else if(mymonth ==2)
month = "Março " 

else if(mymonth ==3)
month = "Abril " 

else if(mymonth ==4)
month = "Maio " 

else if(mymonth ==5)
month = "Junho " 

else if(mymonth ==6)
month = "Julho " 

else if(mymonth ==7)
month = "Agosto " 

else if(mymonth ==8)
month = "Setembro " 

else if(mymonth ==9)
month = "Outubro " 

else if(mymonth ==10)
month = "Novembro " 

else if(mymonth ==11)
month = "Dezembro " 

document.write("<font face=arial size=2>"+ day);
document.write(myweekday+" de "+month+ "</font>");
// -->
</script> </B>
<p>
<p>

<text STYLE="font-family:Verdana;font-size:12;font-style:normal">Data de entrega:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">  
<html> 
<head> 
       <title>coded by nobody</title> 
       <script> 
          function mascara_data(data){ 
              var mydata = ''; 
              mydata = mydata + data; 
              if (mydata.length == 2){ 
                  mydata = mydata + '/'; 
                  document.forms[0].data.value = mydata; 
              } 
              if (mydata.length == 5){ 
                  mydata = mydata + '/'; 
                  document.forms[0].data.value = mydata; 
              } 
              if (mydata.length == 10){ 
                  verifica_data(); 
              } 
          } 
           
          function verifica_data () { 

            dia = (document.forms[0].data.value.substring(0,2)); 
            mes = (document.forms[0].data.value.substring(3,5)); 
            ano = (document.forms[0].data.value.substring(6,10)); 

            situacao = ""; 
            // verifica o dia valido para cada mes 
            if ((dia < 01)||(dia < 01 || dia > 30) && (  mes == 04 || mes == 06 || mes == 09 || mes == 11 ) || dia > 31) { 
                situacao = "falsa"; 
            } 

            // verifica se o mes e valido 
            if (mes < 01 || mes > 12 ) { 
                situacao = "falsa"; 
            } 

            // verifica se e ano bissexto 
            if (mes == 2 && ( dia < 01 || dia > 29 || ( dia > 28 && (parseInt(ano / 4) != ano / 4)))) { 
                situacao = "falsa"; 
            } 
    
            if (document.forms[0].data.value == "") { 
                situacao = "falsa"; 
            } 
    
            if (situacao == "falsa") { 
                alert("Data inválida!"); 
                document.forms[0].data.focus(); 
            } 
          } 

       </script> 
</head> 
<body> 
<form> 
  <input type="text" name="data" OnKeyUp="mascara_data(this.value)" maxlength="10"> dd/mm/aaaa<br> 
<form> 
</body> 
</html>
<p>
<p>
<text STYLE="font-family:Verdana;font-size:12;font-style:normal">Descrição:</text>
<TEXTAREA COLS="10" ROWS="1" NAME="Descrição" ID="Descrição" STYLE="font-family:Verdana;font-size:12;font-style:normal">Descrição</TEXTAREA>
<br>
<p>
<head>
<script type="text/javascript">
function toggle( id ){
var div = document.getElementById( id );
div.style.display = div.style.display=='block' ? 'none' : 'block';
}
</script>
<style type="text/css">
#um, #dois { display: none; }
</style>
</head>
<body>
<INPUT TYPE="button" VALUE="Página" onclick="toggle('dois')" />
<div id="dois" style="display: rigth;"><TEXTAREA COLS="15" ROWS="1" NAME="Páginas" STYLE="font-family:verdana;font-size:12;font-style:normal">
</TEXTAREA></div>
<head>
<script type="text/javascript">
function toggle( id ){
var div = document.getElementById( id );
div.style.display = div.style.display=='block' ? 'none' : 'block';
}
</script>
<style type="text/css">
#um, #dois { display: none; }
</style>
</head>
<body>
<INPUT TYPE="button" VALUE="Horário" onclick="toggle('um')" />
<div id="um" style="display: none;">
<img src="C:/Users/Nathália/Desktop/tarefas/software/digitalizar0001.jpg">
</div>

</body>
<a href="java script:window.print()"><INPUT TYPE="button" NAME="Imprimir" VALUE="Imprimir" STYLE="font-family:Verdana;font-size:12">
</a>
<p></BODY>
</FORM>
</html>

Editado Setembro 24, 2010 por leoogabrich
Modificar titulo retirando "Me ajudem por favor" conforme REGRA 3.6 *FIT*

Stoma · Setembro 23, 2010

Não entendi muito bem sua dúvida... o código que você postou já não está fazendo isso? (ao clicar no botão Página)

*FIT* · Setembro 23, 2010

Movendo de HTML para Javascript!

leoogabrich · Setembro 24, 2010

Não entendi muito bem sua dúvida... o código que você postou já não está fazendo isso? (ao clicar no botão Página)

porque assim... para eu imprimir esse formulário tenho que usar uma folha por formulário, eu quero que meu formulario possua um botão para adicionar o mesmo formulário abaixo deste ai ^^^^

Stoma · Setembro 24, 2010

É isso que você quer?

obs: se tiver alguma dúvida, pode perguntar...

<html>
    <head>
        <title>Tarefas</title>

        <style type="text/css">
            #um, #dois { display:none; }
        </style>

        <script Language="JavaScript">
            /* Gera a data atual */
            mydate = new Date();
            
            /* A função toLocaleDateString() retorna a data escrita por extenso, e então
             * concatena a primeira letra em maiusculo com o resto da data por extenso
             */
            data = mydate.toLocaleDateString()[0].toUpperCase()+mydate.toLocaleDateString().substr(1);
            document.write("<font face=arial size=2>"+data+"</font><br><br>");
    

            function mascara_data(data){
                var mydata = '';
                mydata = mydata + data;
                if(mydata.length == 2){
                    mydata = mydata + '/';
                    document.forms[0].data.value = mydata;
                }
                if(mydata.length == 5){
                    mydata = mydata + '/';
                    document.forms[0].data.value = mydata;
                }
                if(mydata.length == 10){
                    verifica_data();
                }
            }
              
            function verifica_data () {
                dia = (document.forms[0].data.value.substring(0,2));
                mes = (document.forms[0].data.value.substring(3,5));
                ano = (document.forms[0].data.value.substring(6,10));
                situacao = "";
                
                // verifica o dia valido para cada mes
                if((dia < 01)||(dia < 01 || dia > 30) && (  mes == 04 || mes == 06 || mes == 09 || mes == 11 ) || dia > 31) {
                    situacao = "falsa";
                }
    
                // verifica se o mes e valido
                if(mes < 01 || mes > 12 ) {
                    situacao = "falsa";
                }
    
                // verifica se e ano bissexto
                if(mes == 2 && ( dia < 01 || dia > 29 || ( dia > 28 && (parseInt(ano / 4) != ano / 4)))) {
                    situacao = "falsa";
                }
        
                if(document.forms[0].data.value == "") {
                    situacao = "falsa";
                }
        
                if(situacao == "falsa") {
                    alert("Data inválida!");
                    document.forms[0].data.focus();
                }
              }
    
            function toggle(id){
                var div = document.getElementById(id);
                div.style.display = div.style.display=='block' ? 'none' : 'block';
            }
    
            function adicionarFormulario(){
                document.getElementById('pagina').innerHTML = document.getElementById('pagina').innerHTML+document.getElementById('divFormulario').innerHTML;
            }
        </script>
    </head>

    <body style="font-family:Verdana;font-size:12;font-style:normal">
        <form id="formulario" action="pagina.php" method="post">
            <div id="pagina"></div>

            <div id="divFormulario" style="width:350px;padding-left:2px;display:none;">
                <br>
                Data de entrega:
                <input type="text" name="data" OnKeyUp="mascara_data(this.value)" maxlength="10"> dd/mm/aaaa
                <br><br>
                Descrição:
                <textarea cols="10" rows="1" name="Descrição" id="Descrição">Descrição</textarea>
                <br><br><br><br>
            </div>

            <input type="button" value="Página" onclick="adicionarFormulario();"/>
            <input type="button" value="Horário" onclick="toggle('um')"/>
            <input type="button" name="Imprimir" value="Imprimir" onClick="java script:window.print();">
        
            <div id="um" style="display:none;">
                <img src="C:/Users/Nathália/Desktop/tarefas/software/digitalizar0001.jpg">
            </div>
        </form>
        
        <script type="text/javascript">
            /* Adicionar o formulario a pagina */
            adicionarFormulario();
        </script>
    </body>
</html>

Editado Setembro 24, 2010 por Stoma

leoogabrich · Setembro 24, 2010

Quaseeeee..... mas ta bom vou editar VLW AJUDOU MUITÃO.

to na 6ª serie e estou tentando criar este formulário para escrever minhas tarefas

Editado Setembro 28, 2010 por Jonathan Queiroz
Remover quote desnecessário (Jonathan)

leoogabrich · Setembro 24, 2010

+ 4 perguntas.....

1- Quero dar esse formulário para meus colegas de classe.

Mas para eu colocar esse html no pc deles vou ter que mudar o endereço da imagem (digitalizar0001) ai no codigo html.

Tem outro jeito sem ser esse??

---------------------------------------------------------------------------------------------------------------------------------------------------

2- tem algum codigo html que quado você aperta um botao aparece um calendário, e quando você seleciona a data nele aparece a data COMPLETA?(dd/mm/aaaa, dia da semana)

---------------------------------------------------------------------------------------------------------------------------------------------------

3- Existe um codigo que você salva o formulário preenchido??

---------------------------------------------------------------------------------------------------------------------------------------------------

4-E existe um codigo que voce visualiza a impressao?????

Editado Setembro 24, 2010 por leoogabrich

Stoma · Setembro 25, 2010

1 - A imagem é necessária? Se for, somente ponha a imagem na mesma pasta do arquivo html e no html só coloque o nome dela, ex: <img src="imagem.jpg">, sem apontar o caminho todo (mas tem que estar na mesma pasta do html!)

2- Até tem, mas aí é preciso utilizar javascript...

3- Salvar o formulário? Para isso você vai precisar salvar as informações em um banco de dados, como o mysql, e somente utilizando linguagem web, como php por exemplo

4- Esta eu já não sei responder, não tenho costume de mexer com impressão....

Acho então que pra fazer o que você quer, vai ter que ler sobre javascript, php e mysql.

Boa sorte!

leoogabrich · Outubro 1, 2010

+ uma coisa....

Quero enviar este formulario por email. mas sem usar o outlook, e não tenho site tem como eu mandar mesmo assim?Como?

Entrar

Adicionar Formulário ao clicar em botão

Pergunta

leoogabrich

Link para o comentário

Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

Stoma

Link para o comentário

Compartilhar em outros sites

FIT

Link para o comentário

Compartilhar em outros sites

leoogabrich

Link para o comentário

Compartilhar em outros sites

Stoma

Link para o comentário

Compartilhar em outros sites

leoogabrich

Link para o comentário

Compartilhar em outros sites

leoogabrich

Link para o comentário

Compartilhar em outros sites

Stoma

Link para o comentário

Compartilhar em outros sites

leoogabrich

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades