Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
@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***@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](/topic/141877-exibirocultar-form/).
Espero ter ajudado.
Att.
***Felipe Coutinho***>
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](/topic/141877-exibirocultar-form/).
Espero ter ajudado.
Att.
***Felipe Coutinho***
Obrigado, peguei o que você fez e modifiquei um pouco e funcionou.
com javascript puro não é possível.
plugins existem vários:
https://craftpip.github.io/jquery-confirm/