Ir para conteúdo
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

com javascript puro não é possível.

 

plugins existem vários:

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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

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