Jump to content
xdxddxd

Mudar de "OK" Para "Home" e "Cancelar" para "Estoque"

Recommended Posts

ao clicar em um botão eu gostaria de exibir um confirm no site, mas eu gostaria de Mudar de "OK" Para "Home" e "Cancelar" para "Estoque".

isso usando javascript puro, alguem pode me ajudar ?

já agradeço de já.

tem que usar algum plugin no site ou tem como fazer puro mesmo.

se quiser deixar só um link com o tutorial eu já agradeço, porém não achei nenhum do jeito que eu quero no google.

Share this post


Link to post
Share on other sites

com javascript puro não é possível.

 

plugins existem vários:

https://craftpip.github.io/jquery-confirm/

Share this post


Link to post
Share on other sites

@xdxddxd

 

É possível sim, segue o código:

 

<script>
function Redirect1(){
    if (document.getElementById('redirect1').value == "Ok"){
        document.getElementById('redirect1').value = "Home";
        document.getElementById('redirect1').disabled = ""
    } else {
	    if (document.getElementById('redirect1').value == "Home"){
            document.getElementById('redirect1').value = "Ok";
            document.getElementById('redirect1').disabled = ""
	    }
	}
}

function Redirect2(){
    if (document.getElementById('redirect2').value == "Cancel"){
        document.getElementById('redirect2').value = "Estoque";
        document.getElementById('redirect2').disabled = ""
    } else {
	    if (document.getElementById('redirect2').value == "Estoque"){
            document.getElementById('redirect2').value = "Cancel";
            document.getElementById('redirect2').disabled = ""
	    }
	}
}
</script>
<button onclick="Redirect1()">Check Button 1</button>
<input type="submit" id="redirect1" value="Ok" disabled>
<button onclick="Redirect2()">Check Button 2</button>
<input type="submit" id="redirect2" value="Cancel" disabled>

 

Agora se você quer que cada BOTÃO tenha uma FUNÇÃO diferente, exemplo, ao clicar no botão OK ele CONFIRME e no HOME ele redirecione para a página inicial, ai o que eu recomendo você a fazer é o seguinte.

 

Criar 4 FORMULÁRIOS 1 com o STYLE VISIBLE e os outros 3 HIDDEN ai conforme você clica no botão para validar uma ação que eu não sei qual é a regra do seu negócio, você apenas muda de HIDDEN para VISIBLE o formulário com a ação que você quer e coloca os outros 3 como HIDDEN e ai para o usuário cada botão tem uma chamada no ACTION diferente, podendo ser redirecionado para qualquer lugar para os seus 4 botões.

 

Espero ter ajudado.

 

Att.

Felipe Coutinho

Share this post


Link to post
Share on other sites

@xdxddxd

 

Seguindo um pouco a lógica do que eu falei, segue um código exemplo que fiz para demonstrar como exibir e esconder os formulários, basta você ir adaptando a sua necessidade e regra de negócio.

 

<!DOCTYPE HTML>
<html>
    <head>
    <!-- Meta -->
        <meta charset="UTF-8">
        <meta name="author" content="Felipe Guedes Coutinho Hashimoto">
        <meta name="description" content="Habilitando e Desabilitando Formulários">
        <meta name="keywords" content="Habilita Desabilita Formulário">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style>
            #customers {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }
            #customers td, #customers th {
			    background-color: #FAFAFA;
                border: 1px solid #ddd;
                padding: 8px;
            }
			#customers td:hover {
                background-color: #f5f5f5;
            }
            .shadow-1, button, .container {
                box-shadow: 0 1px 3px rgba(0, 0, 255, 0.12), 0 1px 2px rgba(0, 0, 255, 0.24);
            }
            .shadow-2, button:hover, .context_menu_pai, .box_login, .datepicker.dropdown-menu, .dialogbox, .overflow-menu ul {
                box-shadow: 0 2px 5px 0 rgba(0, 0, 255, 0.16), 0 2px 10px 0 rgba(0, 0, 255, 0.12);
            }
            .transition-1, button {
                transition: all .3s ease-out;
                transition-property: all;
                transition-duration: .3s;
                transition-timing-function: ease-out;
            }
            button {
                background-color: #FFFFFF;
                text-align: center
                border: 0;
                padding: 0px;
                width: 70px;
                height: 20px;
                display: inline-block;
                margin: 5px;
                cursor: pointer;
                border-radius: 4px;
            }
            input[type="text"], input[type="password"], input[type="search"] {
                box-shadow: 0 0 0 0;
                border: 0 none;
                outline: 0;
                border-radius: 5px;
                padding: 1px 8px;
                background-color: white;
                color: silver;
            }            
            input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus {
                box-shadow: none;
                border: 1px solid;
                border-color: #97B0E6;
            }
		</style>
        <script type="text/javascript">
            function habilitar(e){
                if (e.value == "HabilitaOk"){
                    document.getElementById('div_form_Ok').style.display = "block";
                    document.getElementById('div_form_Home').style.display = "none";
                    document.getElementById('div_form_Estoque').style.display = "none";
                    document.getElementById('div_form_Cancel').style.display = "none";
                }
                if (e.value == "HabilitaHome"){
                    document.getElementById('div_form_Ok').style.display = "none";
                    document.getElementById('div_form_Home').style.display = "block";
                    document.getElementById('div_form_Estoque').style.display = "none";
                    document.getElementById('div_form_Cancel').style.display = "none";
                }
                if (e.value == "HabilitaEstoque"){
                    document.getElementById('div_form_Ok').style.display = "none";
                    document.getElementById('div_form_Home').style.display = "none";
                    document.getElementById('div_form_Estoque').style.display = "block";
                    document.getElementById('div_form_Cancel').style.display = "none";
                }
                if (e.value == "HabilitaCancel"){
                    document.getElementById('div_form_Ok').style.display = "none";
                    document.getElementById('div_form_Home').style.display = "none";
                    document.getElementById('div_form_Estoque').style.display = "none";
                    document.getElementById('div_form_Cancel').style.display = "block";
                }
            }
        </script>
    </head>	
	<body>
        <table border="0" id="customers">
		<tr>
		<td align="center"><button onClick="habilitar(this)" id="btn_ok"      value="HabilitaOk"      style="display:block">OK      </button></td>
        <td align="center"><button onClick="habilitar(this)" id="btn_home"    value="HabilitaHome"    style="display:block">Home    </button></td>
        <td align="center"><button onClick="habilitar(this)" id="btn_estoque" value="HabilitaEstoque" style="display:block">Estoque </button></td>
        <td align="center"><button onClick="habilitar(this)" id="btn_cancel"  value="HabilitaCancel"  style="display:block">Cancel  </button></td>
		</tr>
		</table>
		<br />
		<div id="div_form_Ok" style="display:block">
			<form method="post" action="incluir.php">
			<table border="0" id="customers">
			<tr><td colspan="2" align="center">Informações para incluir</td></tr>
			<tr><td align="right">Nome:  </td><td><input type="search"   id="Nome"  placeholder="Digite seu nome."  size="50" required autofocus /> </td></tr>
			<tr><td align="right">Senha: </td><td><input type="password" id="Senha" placeholder="Digite sua senha." size="50" required />           </td></tr>
			<tr><td colspan="2" align="center"><input type="submit" value="Ok"/></td></tr>
			</table>
			</form>
		</div>
		<div id="div_form_Home" style="display:none">
			<form method="post" action="index.php">
			<table border="0" id="customers">
			<tr><td colspan="2" align="center">Redirecionar para Home</td></tr>
			<tr><td align="center"><input type="submit" value="Home"/></td></tr>
			</table>
			</form>
		</div>
		<div id="div_form_Estoque" style="display:none">
			<form method="post" action="estoque.php">
			<table border="0" id="customers">
			<tr><td colspan="2" align="center">Verificar Estoque</td></tr>
			<tr><td align="center"><input type="submit" value="Estoque"/></td></tr>
			</table>
			</form>
		</div>
		<div id="div_form_Cancel" style="display:none">
			<form method="post" action="logout.php">
			<table border="0" id="customers">
			<tr><td colspan="2" align="center">Logout</td></tr>
			<tr><td align="center"><input type="submit" value="Cancel"/></td></tr>
			</table>
			</form>
		</div>
	</body>	
</html>

 

Aqui tem outro exemplo: Exibir Formulário Oculto com Botão.

 

Espero ter ajudado.

 

Att.

Felipe Coutinho

Share this post


Link to post
Share on other sites
On 10/22/2019 at 11:23 AM, Felipe Guedes Coutinho said:

@xdxddxd

 

Seguindo um pouco a lógica do que eu falei, segue um código exemplo que fiz para demonstrar como exibir e esconder os formulários, basta você ir adaptando a sua necessidade e regra de negócio.

 


<!DOCTYPE HTML>
<html>
    <head>
    <!-- Meta -->
        <meta charset="UTF-8">
        <meta name="author" content="Felipe Guedes Coutinho Hashimoto">
        <meta name="description" content="Habilitando e Desabilitando Formulários">
        <meta name="keywords" content="Habilita Desabilita Formulário">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style>
            #customers {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }
            #customers td, #customers th {
			    background-color: #FAFAFA;
                border: 1px solid #ddd;
                padding: 8px;
            }
			#customers td:hover {
                background-color: #f5f5f5;
            }
            .shadow-1, button, .container {
                box-shadow: 0 1px 3px rgba(0, 0, 255, 0.12), 0 1px 2px rgba(0, 0, 255, 0.24);
            }
            .shadow-2, button:hover, .context_menu_pai, .box_login, .datepicker.dropdown-menu, .dialogbox, .overflow-menu ul {
                box-shadow: 0 2px 5px 0 rgba(0, 0, 255, 0.16), 0 2px 10px 0 rgba(0, 0, 255, 0.12);
            }
            .transition-1, button {
                transition: all .3s ease-out;
                transition-property: all;
                transition-duration: .3s;
                transition-timing-function: ease-out;
            }
            button {
                background-color: #FFFFFF;
                text-align: center
                border: 0;
                padding: 0px;
                width: 70px;
                height: 20px;
                display: inline-block;
                margin: 5px;
                cursor: pointer;
                border-radius: 4px;
            }
            input[type="text"], input[type="password"], input[type="search"] {
                box-shadow: 0 0 0 0;
                border: 0 none;
                outline: 0;
                border-radius: 5px;
                padding: 1px 8px;
                background-color: white;
                color: silver;
            }            
            input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus {
                box-shadow: none;
                border: 1px solid;
                border-color: #97B0E6;
            }
		</style>
        <script type="text/javascript">
            function habilitar(e){
                if (e.value == "HabilitaOk"){
                    document.getElementById('div_form_Ok').style.display = "block";
                    document.getElementById('div_form_Home').style.display = "none";
                    document.getElementById('div_form_Estoque').style.display = "none";
                    document.getElementById('div_form_Cancel').style.display = "none";
                }
                if (e.value == "HabilitaHome"){
                    document.getElementById('div_form_Ok').style.display = "none";
                    document.getElementById('div_form_Home').style.display = "block";
                    document.getElementById('div_form_Estoque').style.display = "none";
                    document.getElementById('div_form_Cancel').style.display = "none";
                }
                if (e.value == "HabilitaEstoque"){
                    document.getElementById('div_form_Ok').style.display = "none";
                    document.getElementById('div_form_Home').style.display = "none";
                    document.getElementById('div_form_Estoque').style.display = "block";
                    document.getElementById('div_form_Cancel').style.display = "none";
                }
                if (e.value == "HabilitaCancel"){
                    document.getElementById('div_form_Ok').style.display = "none";
                    document.getElementById('div_form_Home').style.display = "none";
                    document.getElementById('div_form_Estoque').style.display = "none";
                    document.getElementById('div_form_Cancel').style.display = "block";
                }
            }
        </script>
    </head>	
	<body>
        <table border="0" id="customers">
		<tr>
		<td align="center"><button onClick="habilitar(this)" id="btn_ok"      value="HabilitaOk"      style="display:block">OK      </button></td>
        <td align="center"><button onClick="habilitar(this)" id="btn_home"    value="HabilitaHome"    style="display:block">Home    </button></td>
        <td align="center"><button onClick="habilitar(this)" id="btn_estoque" value="HabilitaEstoque" style="display:block">Estoque </button></td>
        <td align="center"><button onClick="habilitar(this)" id="btn_cancel"  value="HabilitaCancel"  style="display:block">Cancel  </button></td>
		</tr>
		</table>
		<br />
		<div id="div_form_Ok" style="display:block">
			<form method="post" action="incluir.php">
			<table border="0" id="customers">
			<tr><td colspan="2" align="center">Informações para incluir</td></tr>
			<tr><td align="right">Nome:  </td><td><input type="search"   id="Nome"  placeholder="Digite seu nome."  size="50" required autofocus /> </td></tr>
			<tr><td align="right">Senha: </td><td><input type="password" id="Senha" placeholder="Digite sua senha." size="50" required />           </td></tr>
			<tr><td colspan="2" align="center"><input type="submit" value="Ok"/></td></tr>
			</table>
			</form>
		</div>
		<div id="div_form_Home" style="display:none">
			<form method="post" action="index.php">
			<table border="0" id="customers">
			<tr><td colspan="2" align="center">Redirecionar para Home</td></tr>
			<tr><td align="center"><input type="submit" value="Home"/></td></tr>
			</table>
			</form>
		</div>
		<div id="div_form_Estoque" style="display:none">
			<form method="post" action="estoque.php">
			<table border="0" id="customers">
			<tr><td colspan="2" align="center">Verificar Estoque</td></tr>
			<tr><td align="center"><input type="submit" value="Estoque"/></td></tr>
			</table>
			</form>
		</div>
		<div id="div_form_Cancel" style="display:none">
			<form method="post" action="logout.php">
			<table border="0" id="customers">
			<tr><td colspan="2" align="center">Logout</td></tr>
			<tr><td align="center"><input type="submit" value="Cancel"/></td></tr>
			</table>
			</form>
		</div>
	</body>	
</html>

 

Aqui tem outro exemplo: Exibir Formulário Oculto com Botão.

 

Espero ter ajudado.

 

Att.

Felipe Coutinho

 Obrigado, peguei o que você fez e modifiquei um pouco e funcionou.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By cleomarjose
      Boa noite
      preciso de uma ajuda de vocês, montando um raspador de site e quero que as informaçções fiquem organizadas, não consigo descobrir como coloco as id valorCep e valorComplCep na mesma linha, obrigado pela ajuda
       
                 <h1> <p id="valorCep">                 </p>    </h1>
                 <h1> <p id="valorComplCep">            </p>    </h1>
                 
      <input type="text" id="cependseg__numero" name="cependseg__numero" autocomplete="off" class="input-cep" maxlength="5" onkeyup="autoTabSelection( get(&#39;cependseg__numero&#39;) , get(&#39;cependseg__complemento&#39;), event);" value="29092" onchange="javascript:atualizarHiddenCep(&#39;cependseg&#39;);javascript:limparCampos([&#39;estabelecimento&#39;,&#39;codigoLocalDesconto&#39;,&#39;codigoTipoLocalDesconto&#39;,&#39;clausulaServico&#39;,&#39;codigoClausulaServico&#39;]);javascript:acionarBuscaDiretaPorCep_cependseg(this);" onblur="javascript:setValorFromId(&#39;cependseg&#39;,preencherAEsquerda(getValorFromId(&#39;cependseg&#39;),3,&#39;0&#39;));javascript:atualizarHiddenCep(&#39;cependseg&#39;);" onkeypress="return isNumber(event);"> - <input type="text" id="cependseg__complemento" name="cependseg__complemento" autocomplete="off" class="input-complemento_cep" maxlength="3" value="065" onchange="javascript:atualizarHiddenCep(&#39;cependseg&#39;);javascript:limparCampos([&#39;estabelecimento&#39;,&#39;codigoLocalDesconto&#39;,&#39;codigoTipoLocalDesconto&#39;,&#39;clausulaServico&#39;,&#39;codigoClausulaServico&#39;]);" onblur="javascript:setValorFromId(&#39;cependseg&#39;,preencherAEsquerda(getValorFromId(&#39;cependseg&#39;),5,&#39;0&#39;));javascript:atualizarHiddenCep(&#39;cependseg&#39;); javascript:acionarBuscaDiretaPorCep_cependseg(this);" onkeypress="return isNumber(event);"><div class="div-botoes-atributo div-botao-encontrarcep"><div class="btCor3"></div>
      <script>
               capturando = document.getElementById('cependseg__numero').value;
          document.getElementById('valorCep').innerHTML = capturando;
               capturando = document.getElementById('cependseg__complemento').value;
          document.getElementById('valorComplCep').innerHTML = capturando;
          </script>
    • By srawolf
      Eu tenho uma tabela, essa tabela vem com o campo nome e matricula do banco de dados (fiz em mongodb), eu ia colocar uns inputs para notas e ser enviado no text do email, mas ele repete a primeira linha da tabela
      Estou usando, node.js, nodemailer, mongodb
      o email não aparece na tela, so no banco de dados e eu puxo ele quando vou enviar o email, como eu posso identificar esses inputs para que cada email receba sua respectiva nota?
    • By Fernando Rafael
      Estou tendo problemas com a leitura de porta serial com PHP, consigo facilmente escrever na mesma, mas sempre que no comando de abertura da porta eu coloco que haverá permissão de leitura o PHP trava e fica carregando infinitamente, e a porta fica bloqueada e só libera quando reiniciado o computador.
       
      Segue o cod:
      exec('MODE COM1:9600,n,8,1'); //seta configuração na porta COM $fp=fopen("COM1","r+b"); if(!$fp) {     echo("Erro ao abrir a porta com1");     exit; } else {         echo("COM1 aberta <br>"); } fwrite($fp,Chr(5));  //escrevendo valor na porta sleep(1); //pausa para retorno dos dados echo (fgets($fp)); fclose($fp); já tentei  colocar:
      fopen("COM1", "r+b");
      fopen("COM1", "r+t");
      fopen("COM1", "r");
      fopen("COM1", "w+");
      fopen("COM1", "r+");
       
      para escrever consigo normal, com o fopen("COM1", "w");.  mas já para ler.....
       
      Notei que na internet tem muito sobre esse problema, inclusive falaram em permissões de usuário, sendo que nos casos em que conseguiram, estavam usando o Linux.
      Eu estou usando o W7 e W10 com PHP 5.2, se for o caso de permissões, como resolvo isso? preciso configurar mais alguma coisa no php.ini?
       
      Também já tentei usar uma classe: phpSerial
       
      Mas retorna o seguinte erro:
      Warning: Reading serial port is not implemented for Windows in C:\Program Files (x86)\Apache Software Foundation\Apache2.2\htdocs\balanca\php_serial.class.php on line 503
       
       
    • By studdiox
      Ola pessoal tudo certo ... tenho um problema com um script que pode ajudar muita gente 
      ele da um preview das imagens carregadas em um form de upload ele funciona mas só da o preview
      de uma imagem quando carrega ... se eu colocar o formulário em multiple ele exibe todas as imagens selecionadas 
      antes de fazer o upload para o banco de dados, mas se eu deixar a seleção normal ou seja
      uma imagem por vez,  ele não carrega o restante das imagens, apenas a primeira, vou por o
      código abaixo completo funcionando com o multiple se alguém ai conseguir me ajudar a mudar ele
      para exibir cada imagem carregada separadamente eu agradeço e vai ajudar muita gente também 
       
       
      <html> <head> <style type="text/css"> .thumb-image{ float:left;width:100px; position:relative; padding:5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" multiple="multiple" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html> No meu caso ele ficaria assim
       
       
       
      <html> <head> <style type="text/css"> .thumb-image { float: left; width: 100px; position: relative; padding: 5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html>  
       
       
       
    • By Marxrj
      Olá a todos!,
      Queria aqui uma dica se alguém sabe como alinhar fotos no centro pelo bootstrap.
      Usando o padrão fotos retratos fica como abaixo
      __________  __________
      __________
       
      Mas eu queria que quando tivesse um número impar, a foto não ficasse alinhada na esquerda e sim centralizada como abaixo
      __________  __________
                __________
       
      Estou usando este padrão abaixo aonde ele alinha duas fotos ao lado, mas quando tem somente um ou em número impar, essa não centraliza e sim fica a esquerda.
      <div class="col-xs-12 col-sm-10 col-lg-6 col-md-3">
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.