Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

amanda kelly

[Resolvido] Mascara javascript no input dinamico

Por , em Javascript

Recommended Posts

amanda kelly    0

amanda kelly
Postado

Boa noite,

 

tenho esse código. porém a minha mascara de data não funciona. é dinamico o input e eu como nao conheço mt a linguagem nao sei como arrumar isso. se puderem me ajudem.

 

<?
$data_atual = date('d/m/Y');
include('../config.php');
?>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Adicionar Nova Conta</title>
<style type="text/css">
.coluna {
background-image: url(../img/barra_fundo1.jpg);
height:28px;
}
input {
TEXT-TRANSFORM: uppercase;
color: #009;
border-style: solid;
   border-width: 1;
font-weight: normal;
text-transform: uppercase ;
   border-color: #C5C5C5;
}
checkbox {
border-width: 0;
}
body {
    margin: 0 auto;
    font-family: Verdana;
    font-size:62.5%;
    color:#000000;
}
table {
     font-size: 1.4em;;
     background:#fff;
     margin:0 auto 10px auto;
     padding:5px;
     border:solid 1px #d0cbc2;
}
a{
 text-decoration: none;
}
table td{
     padding: 3px;
}
table span{
     font-size: 10/12px;
     padding-right: 10px;
}
.linhas{
       border-bottom:  1px solid #000000;
}
.coluna th{
       font-weight: bold;
}
.removerCampo:before{
                    content: 'X' ;
                    font-weight: bold;
                    color: red;
}
.topo {
font-size: 16px;
color: #009;
background-image: url(../img/barra_fundo1.jpg);
}
<!--
a:link {
text-decoration: underline;
color: #00F;
;
}
a:visited {
text-decoration: underline;
color: #009;
;
}
a:hover {
font-weight: bold;
color: #00F;
}
a:active {text-decoration: none}
-->
</style>
</head>
<form action='action_cadastrar.php'>
<body background='../img/fundo.jpg'>
<div id="main">
<table border='0' width='95%' align='center' cellspacing='0' cellspadding='0'>
  <tr class='topo'>
  <th>
  <a href='principal.php'><img src="../img/voltar.png" border="0"></a>
  </th>
  <td colspan='2'>CADASTRAR NOVA CONTA</td>
  </tr>
  <tr  class='coluna'>
  <td colspan='3'>
   
  </td>
  </tr>
  <tr  class='coluna'>
  <th colspan='3'><a href="#" class="addP">ADICIONAR PARCELA</a></th>
  </tr>
  <tr class='coluna'>
  <th>DATA VENCIMENTO</th>
  <th>VALOR</th>
  <th>CÓDIGO DE BARRA</th>
  </tr>
  <tr class="p">
  <th  class='coluna'>
<input type="text" name="data_vencimento[]" value='<? echo $data_atual; ?>' OnKeyPress="formatar(this, '##/##/####')"  onClick="this.value=''"/>
  </th>
  <th  class='coluna'>
  R$ <input type="text" name="valor_parcela[]" size='8' >
  </th>
  <th  class='coluna'>
  <input type="text" name="codigo_barra[]" size='40'>
  <a href="#" class="removerCampo"> x</a></th>
  </tr>
  <tr class='coluna'>
  <th>
    
  </th>
  <th>
    
  </th>
  <th>
    
  </th>
  </tr>

  <tr class='coluna'>
  <th>
  BOLETO RECEBIDO
  </th>
  <td colspan='2'>
   
  </td>
  </tr>
  <tr class='coluna'>
  <th>
  <input type='checkbox' value='SIM' checked name='boleto_recebido'>
  </th>
  <td colspan='2'>
    
  </td>
  </tr>
  <tr class='coluna'>
  <td colspan='2'>
                
            
  <b>FORNECEDOR</b>   <a href='../fornecedor/cadastrar.php' target='black'> novo</a>                     <a href='../estoque/produtos_cadastrados.php' target='black'>novo produto</a>
  </th>
  <th>
 <select name='tipo'>
 <option value='NOTA FISCAL'>NOTA FISCAL</option>
 <option value='ORÇAMENTO'>ORÇAMENTO</option>
 <option value='CUPOM FISCAL'>CUPOM FISCAL</option>
 <option value='RECIBO'>RECIBO</option>
 <option value='OUTROS'>OUTROS</option></select>
  </th>
  </tr>
  <tr class='coluna'>
  <td colspan='2'>
             
        
  <select name='is_fornecedor'>
   <option value='0'> - </option>
   <?
 $select_fornecedores = mysql_query("SELECT * FROM FORNECEDORES ORDER BY NOME_FORNECEDOR ASC");

  while($linha=mysql_fetch_object($select_fornecedores)){
  $id_fornecedor = $linha -> ID_FORNECEDOR;
  $nome_fornecedor = $linha -> NOME_FORNECEDOR;

  echo "<option value='$id_fornecedor'>$nome_fornecedor</option>"  ;

  }

 ?>
 </select>
  </th>
  <th>
  <input type='text' name='numero' size='40'>
  </th>
  </tr>
    <tr class='coluna'>
    <td colspan='3'>
     
    </td>
    </tr>
  </table><table width='95%' align='center' border='0' cellspacing='0' cellpadding='0'>
  <tr class='coluna'>
  <th colspan='5'><font color='red'>DETALHES DA NOTA</font></th>
  </tr>
  <tr class='coluna'>
  <td colspan='5'>
   
  </td>
  </tr>
  <tr class='coluna'>
  <th colspan='5'>
  <a href="#" class="adicionarCampo">ADICIONAR PRODUTO</a>
  </th>
  </tr>
  <tr class='coluna'>
  <td colspan='5'> </td>
  </tr>
  <tr class='coluna'>
  <th width='30%'>CATEGORIA</th>
  <th width='40%'>DESCRIÇÃO</th>
  <th width='8%'> QTD. </th>
  <th width='18%'>VALOR UNITÁRIO</th>
  <th width='4%'> </th>
  </tr>

  <tr class="linhas">
  <th class='coluna'>
  <select name='is_categoria[]'>
 <?
 $select_categoria = mysql_query ("SELECT * FROM CAIXA_CATEGORIAS WHERE TIPO='DEBITO' ORDER BY NOME_CATEGORIA");

       while($linha=mysql_fetch_object($select_categoria))  {
       $id_categoria = $linha->ID_CATEGORIA;
       $nome_categoria = $linha->NOME_CATEGORIA;
       echo " <option value='$id_categoria'>$nome_categoria</option>";

       }
 ?>
 </select>
 </th>
 <th class='coluna'>
 <select name='descricao[]'>
      <?
 $select_descricao = mysql_query ("SELECT * FROM ESTOQUE_CADASTRO_PRODUTO ORDER BY DESCRICAO ASC");

       while($linha=mysql_fetch_object($select_descricao))  {
       $descricao = $linha->DESCRICAO;
       echo " <option value='$descricao'>$descricao</option>";

       }


 ?>
 </select>
 </th>
 <th class='coluna'><input type='text' class="txt" name='quantidade[]' size="3"/></th>
 <th class='coluna'>R$<input type="text" id="qtd" name="valor_unidade[]" size='10' value='00.00' onClick="this.value=''"/></th>
 <th class='coluna'> <a href="#" class="removerCampo"> x</a></td>
 </tr>
 <tr class='coluna'>
 <td colspan='5'> </td>
 </tr>
 <tr class='coluna'>
 <td colspan='3'>
  
 </td>
 <th colspan='2'><div id="sum"></div></th>
 </tr>
 <tr class='coluna'>
 <td colspan='5'> </td>
 </tr>
 <tr class='coluna'>
 <th align='left' colspan='5'>
 <center>OBS:    
 <TEXTAREA COLS='80' ROWS='2' NAME="obs"></TEXTAREA>
 </center></th>
 </tr>
 <tr class='coluna'>
 <td colspan='5'> </td>
 </tr>
 <tr class='coluna'>
 <th colspan='5'> <input type='submit' value='cadastrar'></th>
 </tr>
 </table>
 </div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
       <script type="text/javascript">
           $(function () {
                 //atente-se aos seletores ( class="p" ,class="linhas") to pegando seletor pela class
                 //
             //Add campos para parcela
               $(".addP").click(function () {
                   novoCampo = $("tr.p:first").clone();
                   novoCampo.find("input").val("");
                   novoCampo.insertAfter("tr.p:last");
                   removeCampo();
               });
           });
           function removeCamp() {
$(".removerCampo").unbind("click");
$(".removerCampo").bind("click", function () {
   if($("tr.linhas").length > 1){
	$(this).parent().parent().remove();
   }
});
 }
           //fim

           //add inputs para produtos
           $(".adicionarCampo").click(function () {
               novoCamp = $("tr.linhas:first").clone();
               novoCamp.find("input").on('keyup',function(){
                   calcula();  //faz multiplicação
               }).attr('class','txt').val("");

               novoCamp.insertAfter("tr.linhas:last");
               removeCamp();
           });

          function removeCampo() {
$(".removerCampo").unbind("click");
$(".removerCampo").bind("click", function () {
   if($("tr.linhas").length > 1){
	$(this).parent().parent().remove();
   }
});
 }
           //fim dos produtos

           function calcula() {
               var sum = 0;
               $(".linhas").each(function() {
                   var v1= $(this).find('input')[0],
                   v2 =$(this).find('input')[1];
                   if(!isNaN(v2.value) && v1.value.length!=0 && !isNaN(v1.value) && v2.value.length!=0) {
                       sum += parseFloat(v1.value * v2.value) ;
                   }
               });
               $("#sum").html(sum.toFixed(2));//faz a saida
           }
       </script>
   </body>
</form>
</html>

 

<input type="text" name="data_vencimento[]" value='<? echo $data_atual; ?>' OnKeyPress="formatar(this, '##/##/####')" onClick="this.value=''"/>

 

essa parte

 

<input type="text" name="data_vencimento[]" value='<? echo $data_atual; ?>' OnKeyPress="formatar(this, '##/##/####')" onClick="this.value=''"/>

 

é esta parte

Compartilhar este post

Link para o post
Compartilhar em outros sites

amanda kelly    0

amanda kelly
Postado

tipo, sai o que eu digito no campo. eu queria que a mascara funcionasse, no formato ##/##/####

 

sai o que eu digito, eu queria que assim que eu digitasse a mascara fosse completando. se você salvar este codigo em html, vai ver

Compartilhar este post

Link para o post
Compartilhar em outros sites

P@trique    0

P@trique
Postado

Você esta tentando mascarar pela function formatar(this, '##/##/####') mais cade essa função "formatar" no seu code?

Compartilhar este post

Link para o post
Compartilhar em outros sites

amanda kelly    0

amanda kelly
Postado

Nossa como eu fui distraída, era isso mesmo.

 

obrigada!

 

resolvido

 

<?
$data_atual = date('d/m/Y');
include('../config.php');
?>
<HTML>
<HEAD>
<script language="javascript">

function formatar(src, mask){
 var i = src.value.length;
 var saida = mask.substring(0,1);
 var texto = mask.substring(i)
if (texto.substring(0,1) != saida)
 {
   src.value += texto.substring(0,1);
 }
}
</script>

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Adicionar Nova Conta</title>
<style type="text/css">
.coluna {
background-image: url(../img/barra_fundo1.jpg);
height:28px;
}
input {
TEXT-TRANSFORM: uppercase;
color: #009;
border-style: solid;
   border-width: 1;
font-weight: normal;
text-transform: uppercase ;
   border-color: #C5C5C5;
}
checkbox {
border-width: 0;
}
body {
    margin: 0 auto;
    font-family: Verdana;
    font-size:62.5%;
    color:#000000;
}
table {
     font-size: 1.4em;;
     background:#fff;
     margin:0 auto 10px auto;
     padding:5px;
     border:solid 1px #d0cbc2;
}
a{
 text-decoration: none;
}
table td{
     padding: 3px;
}
table span{
     font-size: 10/12px;
     padding-right: 10px;
}
.linhas{
       border-bottom:  1px solid #000000;
}
.coluna th{
       font-weight: bold;
}
.removerCampo:before{
                    content: 'X' ;
                    font-weight: bold;
                    color: red;
}
.topo {
font-size: 16px;
color: #009;
background-image: url(../img/barra_fundo1.jpg);
}
<!--
a:link {
text-decoration: underline;
color: #00F;
;
}
a:visited {
text-decoration: underline;
color: #009;
;
}
a:hover {
font-weight: bold;
color: #00F;
}
a:active {text-decoration: none}
-->
</style>
</head>
<form action='action_cadastrar.php'>
<body background='../img/fundo.jpg'>

<div id="main">
<table border='0' width='95%' align='center' cellspacing='0' cellspadding='0'>
  <tr class='topo'>
  <th>
  <a href='principal.php'><img src="../img/voltar.png" border="0"></a>
  </th>
  <td colspan='2'>CADASTRAR NOVA CONTA</td>
  </tr>
  <tr  class='coluna'>
  <td colspan='3'>
   
  </td>
  </tr>
  <tr  class='coluna'>
  <th colspan='3'><a href="#" class="addP">ADICIONAR PARCELA</a></th>
  </tr>
  <tr class='coluna'>
  <th>DATA VENCIMENTO</th>
  <th>VALOR</th>
  <th>CÓDIGO DE BARRA</th>
  </tr>
  <tr class="p">
  <th  class='coluna'>

 <input type="text" name="data_vencimento[]" value='<? echo $data_atual; ?>' OnKeyPress="formatar(this, '##/##/####')" onClick="this.value=''"/>
  </th>
  <th  class='coluna'>
  R$ <input type="text" name="valor_parcela[]" size='8' >
  </th>
  <th  class='coluna'>
  <input type="text" name="codigo_barra[]" size='40'>
  <a href="#" class="removerCampo"> x</a></th>
  </tr>
  <tr class='coluna'>
  <th>
    
  </th>
  <th>
    
  </th>
  <th>
    
  </th>
  </tr>

  <tr class='coluna'>
  <th>
  BOLETO RECEBIDO
  </th>
  <td colspan='2'>
   
  </td>
  </tr>
  <tr class='coluna'>
  <th>
  <input type='checkbox' value='SIM' checked name='boleto_recebido'>
  </th>
  <td colspan='2'>
    
  </td>
  </tr>
  <tr class='coluna'>
  <td colspan='2'>
                
            
  <b>FORNECEDOR</b>   <a href='../fornecedor/cadastrar.php' target='black'> novo</a>                     <a href='../estoque/produtos_cadastrados.php' target='black'>novo produto</a>
  </th>
  <th>
 <select name='tipo'>
 <option value='NOTA FISCAL'>NOTA FISCAL</option>
 <option value='ORÇAMENTO'>ORÇAMENTO</option>
 <option value='CUPOM FISCAL'>CUPOM FISCAL</option>
 <option value='RECIBO'>RECIBO</option>
 <option value='OUTROS'>OUTROS</option></select>
  </th>
  </tr>
  <tr class='coluna'>
  <td colspan='2'>
             
        
  <select name='is_fornecedor'>
   <option value='0'> - </option>
   <?
 $select_fornecedores = mysql_query("SELECT * FROM FORNECEDORES ORDER BY NOME_FORNECEDOR ASC");

  while($linha=mysql_fetch_object($select_fornecedores)){
  $id_fornecedor = $linha -> ID_FORNECEDOR;
  $nome_fornecedor = $linha -> NOME_FORNECEDOR;

  echo "<option value='$id_fornecedor'>$nome_fornecedor</option>"  ;

  }

 ?>
 </select>
  </th>
  <th>
  <input type='text' name='numero' size='40'>
  </th>
  </tr>
    <tr class='coluna'>
    <td colspan='3'>
     
    </td>
    </tr>
  </table><table width='95%' align='center' border='0' cellspacing='0' cellpadding='0'>
  <tr class='coluna'>
  <th colspan='5'><font color='red'>DETALHES DA NOTA</font></th>
  </tr>
  <tr class='coluna'>
  <td colspan='5'>
   
  </td>
  </tr>
  <tr class='coluna'>
  <th colspan='5'>
  <a href="#" class="adicionarCampo">ADICIONAR PRODUTO</a>
  </th>
  </tr>
  <tr class='coluna'>
  <td colspan='5'> </td>
  </tr>
  <tr class='coluna'>
  <th width='30%'>CATEGORIA</th>
  <th width='40%'>DESCRIÇÃO</th>
  <th width='8%'> QTD. </th>
  <th width='18%'>VALOR UNITÁRIO</th>
  <th width='4%'> </th>
  </tr>

  <tr class="linhas">
  <th class='coluna'>
  <select name='is_categoria[]'>
 <?
 $select_categoria = mysql_query ("SELECT * FROM CAIXA_CATEGORIAS WHERE TIPO='DEBITO' ORDER BY NOME_CATEGORIA");

       while($linha=mysql_fetch_object($select_categoria))  {
       $id_categoria = $linha->ID_CATEGORIA;
       $nome_categoria = $linha->NOME_CATEGORIA;
       echo " <option value='$id_categoria'>$nome_categoria</option>";

       }
 ?>
 </select>
 </th>
 <th class='coluna'>
 <select name='descricao[]'>
      <?
 $select_descricao = mysql_query ("SELECT * FROM ESTOQUE_CADASTRO_PRODUTO ORDER BY DESCRICAO ASC");

       while($linha=mysql_fetch_object($select_descricao))  {
       $descricao = $linha->DESCRICAO;
       echo " <option value='$descricao'>$descricao</option>";

       }


 ?>
 </select>
 </th>
 <th class='coluna'><input type='text' class="txt" name='quantidade[]' size="3"/></th>
 <th class='coluna'>R$<input type="text" id="qtd" name="valor_unidade[]" size='10' value='00.00' onClick="this.value=''"/></th>
 <th class='coluna'> <a href="#" class="removerCampo"> x</a></td>
 </tr>
 <tr class='coluna'>
 <td colspan='5'> </td>
 </tr>
 <tr class='coluna'>
 <td colspan='3'>
  
 </td>
 <th colspan='2'><div id="sum"></div></th>
 </tr>
 <tr class='coluna'>
 <td colspan='5'> </td>
 </tr>
 <tr class='coluna'>
 <th align='left' colspan='5'>
 <center>OBS:    
 <TEXTAREA COLS='80' ROWS='2' NAME="obs"></TEXTAREA>
 </center></th>
 </tr>
 <tr class='coluna'>
 <td colspan='5'> </td>
 </tr>
 <tr class='coluna'>
 <th colspan='5'> <input type='submit' value='cadastrar'></th>
 </tr>
 </table>
 </div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
       <script type="text/javascript">
           $(function () {
                 //atente-se aos seletores ( class="p" ,class="linhas") to pegando seletor pela class
                 //
             //Add campos para parcela
               $(".addP").click(function () {
                   novoCampo = $("tr.p:first").clone();
                   novoCampo.find("input").val("");
                   novoCampo.insertAfter("tr.p:last");
                   removeCampo();
               });
           });
           function removeCamp() {
$(".removerCampo").unbind("click");
$(".removerCampo").bind("click", function () {
   if($("tr.linhas").length > 1){
	$(this).parent().parent().remove();
   }
});
 }
           //fim

           //add inputs para produtos
           $(".adicionarCampo").click(function () {
               novoCamp = $("tr.linhas:first").clone();
               novoCamp.find("input").on('keyup',function(){
                   calcula();  //faz multiplicação
               }).attr('class','txt').val("");

               novoCamp.insertAfter("tr.linhas:last");
               removeCamp();
           });

          function removeCampo() {
$(".removerCampo").unbind("click");
$(".removerCampo").bind("click", function () {
   if($("tr.linhas").length > 1){
	$(this).parent().parent().remove();
   }
});
 }
           //fim dos produtos

           function calcula() {
               var sum = 0;
               $(".linhas").each(function() {
                   var v1= $(this).find('input')[0],
                   v2 =$(this).find('input')[1];
                   if(!isNaN(v2.value) && v1.value.length!=0 && !isNaN(v1.value) && v2.value.length!=0) {
                       sum += parseFloat(v1.value * v2.value) ;
                   }
               });
               $("#sum").html(sum.toFixed(2));//faz a saida
           }

       </script>
   </body>
</form>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito