Form automático sem botão submit

[Lúcio Marques 1]

Olá, galera.

Eu tenho um sistema de filtragem para buscar nomes. Com isso, eu estou usando um código simples, em javascript, que atualiza um form sem precisar de apertar botão submit, logo quando digito um nome no campo. Mas estou com um problema que este código não para de atualizar, fica igual um refresh.

 

Então gostaria que esse código entrasse em ação somente quando eu digitar o nome para buscar, e parasse quando achasse todos os nomes relacionados a busca.

 

 

Como já entendo bem o php e muito pouco em javascript, assim estou precisando unir as duas linguagem para fazer essa ação. Acho que conseguir explicar. Então deixo o código abaixo:

 

<script language="Javascript">
function Envia(){
    document.nome.submit();
    }
</script>

Agradeço desde já.

[ignoredxyz 17]

<input id="nome" type="text" name="nome" placeholder="Digite um nome" />

 

<script type="text/javascript">

$(document).ready(function(){

$('#nome').keypress(function(){

$(this).submit();

})

});

</script>

 

[Lúcio Marques 1]

Oi Caio,

Bom, tentei de todas as formas e estou perdido. Eu preciso usar onblur() ou onchanger() para acionar ou deixo em branco?

Usei fíz e nada deu certo, então deixo mei código para você ver se está certo.

 

Form que uso é esse:

<form action="consulta.php" method="post" name="nome" >
      <div class="divisaomenuspaginas">Telefone 1:<br />
      <label for="tel"></label>
      <input name="tel" type="text" class="campos" id="tel" />
    </div>
      <div class="divisaomenuspaginas">Telefone 2:<br />
        <label for="tel2"></label>
        <input name="tel2" type="text" class="campos" id="tel2" />
      </div>
    <div class="divisaomenuspaginas">
      <label for="nome"></label>
      Nome Cliente:<br />
      <input name="nome" type="text" class="campos" id="nome" placeholder="Digite um nome"/>
  </div>
    <div class="divisaomenuspaginas">
      <input name="text" type="submit" class="botaobuscar" id="button" value="Filtrar"/>
    </div>
    </form>

Agradeço desde já.

[LeoO_DF 22]

sumbit irá enviar o formulário e ocasionar o refhresh se não me engano, e como você busca por campo para checar a disponibilidade de cada campo preenchido, use o jeito do caio:

<script type="text/javascript">
$(document).ready(function(){
    $('#CampoNome').change(function(event){
        var ValorDigitado = $(this).val();
    })
});
</script>

ou no próprio input:

<input id="nome" type="text" name="nome" placeholder="Digite um nome" onchange="ChegarDisponibilidade(this.value)" />

funtion ChegarDisponibilidade(valor)
{

}

e depois use a função $.post do jquery: http://api.jquery.com/jQuery.post/

 

assim você poderá verificar individualmente por campo assim que o mesmo tiver terminado de preencher ele, sem precisar atualizar ou enviar o formulário a cada tecla digitada com seria no onkeypress.

[Lúcio Marques 1]

Oi Leo, eu tentei fazer dessa forma e não deu certo.

 

Na verdade esse formulário tem um botão para filtrar. Só que eu coloquei um código em javascript que fica atualizado. Então eu gostaria de um que ao digitar no campo o submit entrasse em ação.

[LeoO_DF 22]

Mais tipo, se o submit entrar em ação irá dar refresh e isso irá da erro porque pode ser que outros campos não estejam preenchidos então você precisa usar onchanger que é quando o usuário termina de preenche um campo o onchanger entra em ação neste campo, assim você pode verificar, tenta usar no modo javascript:

<input id="nome" type="text" name="nome" placeholder="Digite um nome" onchange="ChegarDisponibilidade(this.value)" />

function ChegarDisponibilidade(valor)
{
     alert(valor);
}

assim você conseguirá saber o valor da input assim que o mesmo terminar de preencher ele, ou seja assim que ela perder focus irá apitar a função, depois você usa o que quiser para verifica-la, pode usar $.post(); http://api.jquery.com/jQuery.post/
Não sei se entendi bem mais seu botão de da refresh e se tiver outros campos em seu formulário eles irão sem ter sido preenchidos, vou lhe da um pequeno exemplo:

<input id="nome" type="text" name="nome" placeholder="Digite um nome" onchange="ChegarDisponibilidade_Nome(this.value)" />
<label id="Resposta_Nome" /></label>
<input id="sobrenome" type="text" name="sobrenome" placeholder="Digite um sobrenome" onchange="ChegarDisponibilidade_Sobrenome(this.value)" />
<label id="Resposta_Sobrenome" /></label>

function ChegarDisponibilidade_Nome(valor)
{
	if(valor != "" && valor != null)
	{
		$.post("Pagina_Checar_Disponibilidade.php", { Nome: valor, Campo: "Nome" }, function(sucesso){ document.getElementById("Resposta_Nome").innerHTML(sucesso); });
		return 1;
	}
}
function ChegarDisponibilidade_Sobrenome(valor)
{
	if(valor != "" && valor != null)
	{
		$.post("Pagina_Checar_Disponibilidade.php", { Nome: valor, Campo: "Sobrenome" }, function(sucesso){ document.getElementById("Resposta_Sobrenome").innerHTML(sucesso); });
		return 1;
	}
}

e na Pagina Pagina_Checar_Disponibilidade.php:

<?php
$Valor = $_POST['Nome'];
$Campo = $_POST['Campo'];
if(isset($Valor) && isset($Campo)):
	//Faz a verificação no banco de dados
endif;
?>

Caso seu formulário tenha apenas 1 Campo use:

<form id="FormularioVerficiar" method="POST" />
<input id="nome" type="text" name="nome" placeholder="Digite um nome" onchange="EnviarFormulario()" />
</form>

function EnviarFormulario()
{
document.FormularioVerficiar.submit() 
}

Ou Com jQuery:

<form id="FormularioVerficiar" method="POST" />
<input id="nome" type="text" name="nome" placeholder="Digite um nome" />
</form>

$("#nome").change(function(){ $("#FormularioVerficiar").submit(); });

Desculpe-me se estiver incorreto, escrevi aqui meio que corrida na mão, não da para eu testar agora

[Lúcio Marques 1]

Leo, Estou tentando inserir e não está dando certo, nenhuma das formas que você me passou. Eu digito e o submit não ativa.

Como eu não sei muito sobre javascript, então não consigo identificar se estou fazendo certo.

 

Vou postar o form e seu código, e peço que veja se está certo.

 

o form que uso:

<form action="index.php?vv=consulta" method="post" id="FormularioVerficiar">
      <div class="divisaomenuspaginas">
        <label for="nome"></label>
      Nome Cliente:<br />
      <input name="nome" type="text" id="nome" class="campos" placeholder="Digite um nome" onchange="EnviarFormulario()" />
  </div>
    <div class="divisaomenuspaginas">
      <input name="text" type="submit" class="botaobuscar" id="button" value="Filtrar"/>
    </div>
    </form>

esse é o código que você postou, eu coloco ele dentro da head, correto?:

<script language="javascript">
function EnviarFormulario(){
	
document.FormularioVerficiar.submit();
}
</script>

Agradeço desde já.

[LeoO_DF 22]

<form action="index.php?vv=consulta" method="post" id="FormularioVerficiar">
      <div class="divisaomenuspaginas">
        <label for="nome"></label>
      Nome Cliente:<br />
      <input name="nome" type="text" id="nome" class="campos" placeholder="Digite um nome" onchange="EnviarFormulario()" />
  </div>
    <div class="divisaomenuspaginas">
      <input name="text" type="submit" class="botaobuscar" id="button" value="Filtrar"/>
    </div>
    </form>

<script type="text/javascript">
function EnviarFormulario(){
	FormularioVerficiar.submit();
}
</script>

Esse eu testei, Desculpe o problema parece que era o document.formulario.sumbit(); não precisa de document kkk :D

 

Atualizando e deixando melhor o código:

<form action="index.php?vv=consulta" method="post" id="FormularioVerficiar">
      <div class="divisaomenuspaginas">
        <label for="nome"></label>
      Nome Cliente:<br />
      <input name="nome" type="text" id="nome" class="campos" placeholder="Digite um nome" onchange="EnviarFormulario(this.value)" />
  </div>
    <div class="divisaomenuspaginas">
      <input name="text" type="submit" class="botaobuscar" id="button" value="Filtrar"/>
    </div>
    </form>

 

<script type="text/javascript">
function EnviarFormulario(Valor)
{
	if(Valor != "" && Valor != null)
	{
		FormularioVerficiar.submit();
	}	
}
</script>

Agora ele só irá dar submit se ele tiver digitado algo na input :D

[Lúcio Marques 1]

Leo, funcionou perfeitamente, é isso mesmo que eu quero, mas tem um pequeno problema.

 

O submit só ativa quando aperta Tab ou clica em outra parte da tela. Eu gostaria que fosse atualizando como mostra o link abaixo.

 

Abaixo tem um link de um código que baixei da internet: já tentei inserir esse, mas não obtive sucesso.

Veja se é possível nesse seu código fazer isso.

 

Link: http://www.dksite.com.br/form/

 

Desculpe se minha comunicação foi errada.

[LeoO_DF 22]

1 Minuto, vou fazer uma base e dai você continua o resto

[Lúcio Marques 1]

ok, se quiser, posso enviar esse código pra você

[LeoO_DF 22]

<form method="post" id="FormularioVerficiar">
      <div class="divisaomenuspaginas">
        <label for="nome"></label>
      Nome Cliente:<br />
      <input type="text" id="txtColuna12">
      <ul id="Palavras">
      	<li>Palavra 1</li>
        <li>Teste</li>
        <li>Outro</li>
        <li>Mais</li>
        <li>Menos</li>
      </ul>
  </div>
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$("input").keyup(function(){//Verifica quando o usuário digitar algo na input
		var Input_Texto = $(this).val().toUpperCase();//Pega o Valor da Input E Deixa seus caracteres em maiusculo para facilitar a comparação
		if(Input_Texto == "" || Input_Texto == null)//Verifica se não tiver algo digitado na input para voltar com as li
		{
			$("ul#Palavras li").each(function(){//Faz um Loop com todas as li
				$(this).show();//Volta elas para ser mostradas
			});
		}
		$("ul#Palavras li").each(function(index){//Verifica todas a li da ul de ID Palavras para comparar com o valor da input		
			if($(this).text().toUpperCase().indexOf(Input_Texto) < 0)//Compara o Valor da li com o valor da Input
			{
				$(this).hide();//esconde a li se não for parecido
			}
		});
	});
	$("input").blur(function(){//Verifica se a input perdeu focus e volta todas as li dela
		$(this).val("");//Tonar o valor da input como nada
		$("ul#Palavras li").each(function(){//Faz um loop com todas as li
			$(this).show();//Volta as li para serem mostradas
		});
	});	
});
</script>

Demorou um pouco, porque nem eu sabia disso kkk, acabei de aprender, é feito com jQuery logo precisa da include jquery, Deixei tudo legendado no código para você entender, ele pega todas as li dentro da ul de id Palavras e compara letra por letra e se a li não for parecida ela é escondida, quando a input perde focus as li voltam, igualmente se a input tiver sem nenhuma letra, Claro que esse é apenas com 1 input e 1 Categoria, la eles tem o código da palavra e o grupo, assim se vc selecionar 1 em uma input as outras categorias também são classificada, não pelas palavras da input mais pelos itens que você escolheu, mais isso não é tão complicado, com essa base que eu fiz você consegue fazer aquela fácil, você irá precisar saber bem as funções para fazer:

 

toUpperCase: http://www.w3schools.com/jsref/jsref_touppercase.asp

each: http://api.jquery.com/each/

show: http://api.jquery.com/show/

hide: http://api.jquery.com/hide/

indexOf: http://www.w3schools.com/jsref/jsref_indexof.asp

blur: http://api.jquery.com/blur/

 

Você também pode pegar o código deles, o que não adianta nada, se você não souber fazer futuramente terá problemas, enfim:

    <html>
        <head></head>
        <body>
            <doctype html="">
                <meta charset="UTF-8"></meta>
                <link href="estilo1.css" type="text/css" rel="stylesheet"></link>
                <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
                <script src="script.js" type="text/javascript"></script>
                <div id="divConteudo">
                    <table id="tabela">
                        <thead>
                            <tr>
                                <th>

                                    Código

                                </th>
                                <th>

                                    Descrição

                                </th>
                                <th>

                                    Grupo

                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <input id="txtColuna12" type="text"></input>
                                </th>
                                <th>
                                    <input id="txtColuna22" type="text"></input>
                                </th>
                                <th>
                                    <input id="txtColuna32" type="text"></input>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>

                                    001.01-A

                                </td>
                                <td>

                                    Feijão preto

                                </td>
                                <td>

                                    Cerais

                                </td>
                            </tr>
                            <tr>
                                <td>

                                    001.02-B

                                </td>
                                <td>

                                    Feijão branco

                                </td>
                                <td>

                                    Cerais

                                </td>
                            </tr>
                            <tr>
                                <td>

                                    002.10-C

                                </td>
                                <td>

                                    Arroz parboilizado

                                </td>
                                <td>

                                    Cerais

                                </td>
                            </tr>
                            <tr>
                                <td>

                                    003.12-D

                                </td>
                                <td>

                                    Iogurte de morango

                                </td>
                                <td>

                                    Laticínios

                                </td>
                            </tr>
                            <tr>
                                <td>

                                    041.27-E

                                </td>
                                <td>

                                    Sabão em pó

                                </td>
                                <td>

                                    Limpeza

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </doctype>
        </body>
    </html>

e no script.js

$(function(){
	$("#tabela input").keyup(function(){		

		var index = $(this).parent().index();
		var nth = "#tabela td:nth-child("+(index+1).toString()+")";
		var valor = $(this).val().toUpperCase();
		
		$("#tabela tbody tr").show();
		$(nth).each(function(){
			if($(this).text().toUpperCase().indexOf(valor) < 0){
				$(this).parent().hide();
			}
		});
	});

	$("#tabela input").blur(function(){
		$(this).val("");
	});	
});

Eu Recomende que você pegue o meu código e estude os links que te mandei assim futuramente ficará fácil fazer qualquer edição e talz, enfim, vai da sua escolha.

[Lúcio Marques 1]

Oi Leo, O código funcionou perfeitamente. E acabei usando tabela ao invés de ul e li.

 

Pra quem precisar, e só utilizar o código acima, citado por LeoO_DF.

Agradeço desde já um muito obrigado, você me salvou.

 

Aproveito desejando um feliz ano novo.

 

Lúcio Marques