Onclik Sem Return

Carcleo · Julho 15, 2011

Ola pessoal.

Bom Dia!

Tenho o código:

<a href=\"#\" onclick=\"validaprodutoadcionado('adcionatodos','{$i}[novo_preco]','{$i}[novo_imposto]','{$i}[condicao]'); this.href='carrinho.php?op=adicionar&id_produto=$id&novo_preco='+document.getElementById('{$i}[novo_preco]').value+'&id_fornece=$id_fornece&novo_imposto='+document.getElementById('{$i}[novo_imposto]').value+'&condicao='+document.getElementById('{$i}[condicao]').value\" > Enviar </a>

Um href com um onclick.

Acontece, que quando eu chamo a função validaprodutoadcionado, que funciona certinho, acontece um problema: se eu colocar return antes da chamada da função, como não será colocado submit() no fim da função pois é apenas uma linha do form que vai e não o form todo, o href não segue seu destino. E, caso eu não coloque o return na chamada da função, ai, ainda que a função valide certo e faça o focus(), ele constinuará pois não ha o return antes da chamada da função.

como sair dessa?

Segue a função:


function validaprodutoadcionado(form,campo2,campo3,campo5)
{
if(document.getElementById(campo2).value=="")
    {
	  alert("Preencha o campo Preço: campo obrigatório!!!");
	  document.getElementById(campo2).focus();
	  return (false);
	}
if(document.getElementById(campo3).value=="")
    {
	  alert("Preencha o campo Imposto: campo obrigatório!!!");
	  document.getElementById(campo3).focus();
	  return (false);
	}
if(document.getElementById(campo5).value=="#")
    {
	  alert("Escolha Posição: campo obrigatório!!!");
	  document.getElementById(campo5).focus();
	  return (false);
	}
}

William Bruno · Julho 15, 2011

veja sobre

event.preventDefault();

Carcleo · Julho 15, 2011

procurei, não entendi muita coisa.

Coloquei ele no fim da função javascript mas ainda continua o erro.

William Bruno · Julho 15, 2011

mas você invocou o objeto event ?

lembrou q precisa de um teste, para q fique crossbrowser ?

exemplo:

http://wbruno.com.br/blog/2010/09/22/2-submits-valores-diferentes/

veja a função:

/* http://www.javascriptkit.com/jsref/event.shtml */
function disablelink( e ){
        var evt = window.event || e
        if (evt.preventDefault) //supports preventDefault?
                evt.preventDefault()
        else //IE browser
                return false
}

e a forma com q chamo ela.

Carcleo · Julho 15, 2011

Salve Bruno.

Boas.

Aqui. Entendi o que você disse.

Mas, nesse teu exemplo, será enviado o form todo mas eu não quero enviar o formulario.

Eu tenho os campos do form:

preço || imposto || preço || marcar produto|| condicao || Enviar para carrinho

São varias linhas de retorno pois o form tem dentro dele um while(list) de forma que poderá ser repetida varias vezes conforme o retorno da query.

Então, em uma dessas linhas, eu cliko em "Enviar para carrinho". O que só enviaria essa linha, e não o form todo. Entende?

Só que, após executar a funçao js para saber se os campos (da linha em questão que esta sendo enviada para o carrinho) estão preenchidas corretamente, como não ha um submit(pois não é o form todo que será submetido e sim só essa linha) ai o codigo para pois na hora que chamo a função no evendto onclik coloquei no return função. mas, se eu tiro o return, ainda que a validaçao seja feita, o href segue seu caminho.

Ai e que é a minha dificuldade.

Na verdade isso é um exibição de registros de sql query que, depois de todas as linha mostradas, eu coloquei elas dentro de um form.

Cada linha, mostra os dados de um produto. Caso o cliente queira enviar todos os produtos, ele envia o form clikando no botão enviar e se ele quiser enviar só um produto, dai ele vai na linha dele e clicka em enviar.

A parte do php esta toda funcionando. falta só validar se os campos estão preenchidos do lado do cliente.

William Bruno · Julho 15, 2011

esquece o formulário.

olhe apenas para a função que mostrei, que desativa o comportamento do link.

Carcleo · Julho 15, 2011

Ta, mas mesmo assim, a validação mostrarámo focus no campo caso ele estiver preenchido errado? OIu seja, não presseguirá o href?

E, caso esteja tudo certo o href prossegue?

Na verdade isso é um exibição de registros de sql query que, depois de todas as linha mostradas, eu coloquei elas dentro de um form.

Cada linha, mostra os dados de um produto. Caso o cliente queira enviar todos os produtos, ele envia o form clikando no botão enviar e se ele quiser enviar só um produto, dai ele vai na linha dele e clicka em enviar.

A parte do php esta toda funcionando. falta só validar se os campos estão preenchidos do lado do cliente.

William Bruno · Julho 15, 2011

não presseguirá o href?

sim, vai desativar o href, qndo você chamar. Basta fazer a lógica correta para só desativar qndo necessário.

Carcleo · Julho 15, 2011

Fiz assim: mas não destivou o link.

<a href=\"#\" onclick=\"if(!validaprodutoadcionado('adcionatodos','{$i}[novo_preco]','{$i}[novo_imposto]','{$i}[condicao]')){disablelink( event );}; this.href='carrinho.php?op=adicionar&id_produto=$id&novo_preco='+document.getElementById('{$i}[novo_preco]').value+'&id_fornece=$id_fornece&novo_imposto='+document.getElementById('{$i}[novo_imposto]').value+'&condicao='+document.getElementById('{$i}[condicao]').value\" > Enviar </a>
		  </td>

No ie, o link não para e no firefox para mas não entrega o focus nbo campo.

Mas, no firefox mesmo que a validação seja concluida, O LINK não vai.

No i.e. tanto a validaçao feita ou não o link vai.

William Bruno · Julho 15, 2011

não faça javascript inline dessa forma, fica horrivel para ler.

joga numa function isso ai.

se não deu certo, então você fez algo errado. Reveja e corrija.

Carcleo · Julho 15, 2011

<
a  
 href=\"#\" 
  onclick=\"
    if(!validaprodutoadcionado('adcionatodos','{$i}[novo_preco]','{$i}[novo_imposto]','{$i}[condicao]'))
    {
      disablelink( event );
    }; 
    this.href='carrinho.php?op=adicionar&id_produto=$id&novo_preco='+document.getElementById('{$i}[novo_preco]').value+'&id_fornece=$id_fornece&novo_imposto='+document.getElementById('{$i}[novo_imposto]').value+'&condicao='+document.getElementById('{$i}[condicao]').value\" > Enviar </a>

William Bruno · Julho 15, 2011

Roda essa exemplo:

<?php
if( $_SERVER['REQUEST_METHOD']=='POST' )
{
	echo '<pre>';
	var_dump( $_POST );
	echo '</pre>';

	$values = Array();
	for( $i=0; $i<count( $_POST['nome'] ); $i++ )
	{
		if( !empty( $_POST['nome'][$i] ) )
			$values[] = "(NULL,'{$_POST['nome'][$i]}','{$_POST['email'][$i]}')";
	}

	$sql = "INSERT INTO table( id, nome, email ) VALUES ".implode( ',', $values );
	echo $sql; 
}
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.enviar').click(function( e ){
	var $this = $( this );
	var field = $this.parent('label').parent('fieldset');
	var nome = field.find("input[name='nome[]']");
	var email = field.find("input[name='email[]']");


	if( verifica( nome, email ) )
		$this.attr( 'href', 'carrinho.php?nome='+nome.val()+'&email='+email.val() );
	else
		e.preventDefault();
});
});
function verifica( nome, email ){
if( nome.val() =='' )
{
	nome.focus();
	return false;
}
if( email.val() =='' )
{
	email.focus();
	return false;
}
return true;
}
</script>
</head>
<body>
<form action="" method="post">
	<fieldset class="grupo">
		<label>Nome: <input type="text" name="nome[]" /></label>
		<label>E-mail: <input type="text" name="email[]" /></label>
		<label><a href="carrinho.php" class="enviar">Enviar</a></label>
	</fieldset>
	<fieldset class="grupo">
		<label>Nome: <input type="text" name="nome[]" /></label>
		<label>E-mail: <input type="text" name="email[]" /></label>
		<label><a href="carrinho.php" class="enviar">Enviar</a></label>
	</fieldset>
	<fieldset class="grupo">
		<label>Nome: <input type="text" name="nome[]" /></label>
		<label>E-mail: <input type="text" name="email[]" /></label>
		<label><a href="carrinho.php" class="enviar">Enviar</a></label>
	</fieldset>
	<label><input type="submit" name="ok" value="ok" /></label>		
</form>
</body>
</html>

é isso que você está tentando fazer ?

Carcleo · Julho 15, 2011

esse é o codigo todo:

 <?
 if ($acao== "mostra_produtos"){
	 if (!$nomerazao){
		 $sql_nomerazao = mysql_query("select nome, razaosocial from fornecedores where id = $id_fornece");
		 list($nome_do_fornecedor, $razao_do_fornecedor) = mysql_fetch_row($sql_nomerazao);
		 $nomerazao= $nome_do_fornecedor.$razao_do_fornecedor;
		             }
    $sql =  "select 
		   p.id, 
		   p.nome as nome_produto, 
		   p.preco, 
		   p.foto, 
		   p.quantidadecaixa,
		   p.descricao,
		   f.nome as nome_fornecedor, 
		   f.razaosocial as razao_fornecedor,
		   f.id as idfornece,
		   g.nome
		  from 
			 produtos p 
		  inner join fornecedores f on p.fornecedor = f.id
		  inner join grupos g on p.grupo = g.id_grupo
		  where 
			 p.fornecedor = $id_fornece
		  order by f.nome, f.razaosocial
		 ";
    $sql2=mysql_query($sql);			
 echo "<table border=1 width=800 align=center>
        <tr><td colspan=10 align=center><h3>Produtos de: $nomerazao</h3></td></tr>
		<tr><td colspan=10 align=center><a href='?acao=mostra_fornecedores'>Escolher outro fornecedor</a.</td></tr>
        <tr>
          <td align=center>Foto</td>
		  <td align=center>Produto</td>
		  <td align=center>Grupo</td>
		  <td align=center>Descrição</td>
		  <td align=center>Qtde.<br>na caixa</td>
		  <td align=center>Preço</td>
		  <td align=center>Imposto (%)</td>
		  <td align=center>Marcar para<br>enviar<br>todos os ítens</td>
		  <td align=center>Posição</td>
		  <td align=center>Adicionar</td>
		 </tr>
	  ";
 echo "<form action=\"carrinho.php?op=adicionar\" name=\"adcionatodos\" id=\"adcionatodos\"  method=\"post\">";
	 $i=0;		  
 while(list($id, $nome_produto, $preco, $foto, $quantidadecaixa, $descricao, $nome_fornecedor, $razao_fornecedor, $idfornece,$nome_grupo) = mysql_fetch_row($sql2)){		
  echo "<input type=\"hidden\" name=\"{$i}[id_prod]\"  id=\"{$i}[id_prod]\" value=\"$id\">
		<input type=\"hidden\" name=\"id_fornece\"  id=\"id_fornece\" value=\"$id_fornece\">
		";			

   include("../global/funcoes_php/foto_ver.php");
    $icone = "<img border=0 src=../img/saiba_mais.png  alt='Saiba Mais'>";						

 echo "<tr>
          <td align=center>$foto2</td>
		  <td align=let>$nome_produto</td>
		  <td align=let>$nome_grupo</td>
             <td align=center><a href='?acao=saibamais&id=$id&id_fornece=$id_fornece'>$icone</a></td>
		  <td align=right>$quantidadecaixa  </td>
		  <td align=left> R$ <input size=4 type=\"text\" name=\"{$i}[novo_preco]\" id=\"{$i}[novo_preco]\" value=\"$preco\" size=\"08\" style=\"text-align:right\" onKeyPress=\"return(MascaraMoeda(this,'','.',event))\"></td>
		  <td align=center> <input size=4 type=\"text\" name=\"{$i}[novo_imposto]\" id=\"{$i}[novo_imposto]\" value=\"0\" size=\"08\" style=\"text-align:center\" onKeyPress=\"return(MascaraMoeda(this,'','.',event))\"> %</td>
			  <td align=center><input type=checkbox name=\"{$i}[marcado]\" id=\"{$i}[marcado]\"></td>
		  <td align=center valign=\"middle\">
		    <select name=\"{$i}[condicao]\" id=\"{$i}[condicao]\" >
                 <option value=\"#\">Condição</option>
			  <option value=\"1\">Complemento</option>
			  <option value=\"2\">Encarte</option>				  
			</select>
		  </td>
		  <td align=\"center\">
<a  
 href=\"#\" 
  onclick=\"
    if(!validaprodutoadcionado('adcionatodos','{$i}[novo_preco]','{$i}[novo_imposto]','{$i}[condicao]'))
    {
      disablelink( event );
    };      this.href='carrinho.php?op=adicionar&id_produto=$id&novo_preco='+document.getElementById('{$i}[novo_preco]').value+'&id_fornece=$id_fornece&novo_imposto='+document.getElementById('{$i}[novo_imposto]').value+'&condicao='+document.getElementById('{$i}[condicao]').value;\" > Enviar </a>
		  </td>
		</tr>";
             $i++;                                               
			               }	
			echo "
			 <tr>
				 <td align=center valign=\"middle\" colspan=10 height=50>
				   <input type=\"button\"  onclick=\"return validatodos();\" value=\"Enviar todos os ítens\">
				 </td>
			 </tr> 
			</table>
		  </form>
           		";
                             	 }
 ?>

William Bruno · Julho 15, 2011

você rodou o código que postei ?

é aquele funcionamento que você quer ?

Carcleo · Julho 15, 2011

Sim, é sim

mas, vou te confessar.

Sou muito rum em js e estou tendo dificuldades.

mas, vou tentar adptar ao meu aqui para ver como fica.

Tentei mas não da certo.

Fiz assim:

<a  
 href=\"#\" 
  onclick=\"     if(!validaprodutoadcionado('adcionatodos','{$i}[novo_preco]','{$i}[novo_imposto]','{$i}[condicao]'))
    {
      disablelink( event );
    };      this.href='carrinho.php?op=adicionar&id_produto=$id&novo_preco='+document.getElementById('{$i}[novo_preco]').value+'&id_fornece=$id_fornece&novo_imposto='+document.getElementById('{$i}[novo_imposto]').value+'&condicao='+document.getElementById('{$i}[condicao]').value\" > Enviar </a>

No firefox, quando a validação é feita e tem que parar o código, para normal. Mas, quando a validaçao esta completa, o link não segue.

No i.e. o return false não funciona. Mesmo a validação mandando parar, o href continua.

William Bruno · Julho 15, 2011

Sim, é sim

então adapte em cima do exemplo. Já que ele está funcionando corretamente, e atende oque você precisa.

Carcleo · Julho 16, 2011

Bom, foi só alterar a chamada do js que funcionou legal no ie e o ff.

Porem, o focus(), no firefox não esta parando no campo e no ie para.

O que será que há?

Segue a

validação:

// JavaScript Document
function disablelink( e ){  
       var evt = window.event || e  
       e.preventDefault();  
       return false;
}  

function validaprodutoadcionado(form,campo2,campo3,campo5)
{
if(document.getElementById(campo2).value=="")
    {
	  alert("Preencha o campo Preço: campo obrigatório!!!");
	  document.getElementById(campo2).focus();
	  return (false);
	}
if(document.getElementById(campo3).value=="")
    {
	  alert("Preencha o campo Imposto: campo obrigatório!!!");
	  document.getElementById(campo3).focus();
	  return (false);
	}
if(document.getElementById(campo5).value=="#")
    {
	  alert("Escolha Posição: campo obrigatório!!!");
	  document.getElementById(campo5).focus();
	  return (false);
	}
}

Carcleo · Julho 16, 2011

Uma observação.

Se o campo for input type="text", o ie e o ff setam o focus(). Mas, se o campo for um select option, ai, só o ie seta o focus().

Como corrigir isso?

Carcleo · Julho 17, 2011

Pessoal.

É o seguinte:

Depois da ajuda de vocês e de, especialmente do William Bruno(que esta querendo me ensinar a pescar - hehehe), eu consegui fazer as adaptações ao meu script.

Poré, ainda restam dois problemas do Firefox em relação ao I.E.

1) Como liberar a tecla delete e as teclas seta para direita e esquerda do teclado quando usando o firefox em um evento? É que estou usando uma mascara para moeda e, como o campo ja vem preechido para edição, não consigo edita-lo.

2) Quando faço campo.focus(); se o campo for um input text, o foco funciona no ff e no ie. Mas, se o campo for um select option ai só funciona no i.e.

Já tentei alterar para campo.select; campo.select(); campo.selected; campo.selected(); e nada.

Grato a quem puder ajudar

William Bruno · Julho 17, 2011

1) Como liberar a tecla delete e as teclas seta para direita e esquerda do teclado quando usando o firefox em um evento? É que estou usando uma mascara para moeda e, como o campo ja vem preechido para edição, não consigo edita-lo.

veja estas máscaras:

http://wbruno.com.br/blog/2011/03/12/diversas-mascaras-com-er/

2) Quando faço campo.focus(); se o campo for um input text, o foco funciona no ff e no ie. Mas, se o campo for um select option ai só funciona no i.e.

Já tentei alterar para campo.select; campo.select(); campo.selected; campo.selected(); e nada.

não sei, está tudo certo com o código. Não aparece nada no Ctrl+Shif+J ?

Arquivado

Onclik Sem Return

Recommended Posts

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501