Ir para conteúdo
halfar

jquery evento click em objeto dentro de form

Recommended Posts

tenho um formulario com tres botôes do tipo submit:

Citar

 

<form1>

<input class="input" name="inserir" id= "inserir" value="Inserir como novo registro" type="submit">
    <input class="input" name="alterar" id= "alterar" value="Alterar este registro" type="submit">
    <input class="input" name="limpar"  id= "limpar" value="Limpar formulario" onclick="Limpa_form();" type="button" >
</form>

 

 

 

tenho uma função jquery que é executada quando usuario clica no botao inserir novo registro:

$('#form1').on('submit', function(e) {


 
	 var xtitulo = this.titulo.value;
	 var xtexto = this.texto.value;
	 var xdata =  this.data.value;
	 var xb_dados =  this.b_dados.value;
	 var xautoria = this.autoria.value;
	

	//$("#imagem").fadeToggle(625000);
	
var dados = jQuery( this ).serialize();
jQuery.ajax({
	

type: "POST",
url: "xinserir.php",
data: dados,
success: function( data ){

	//alert("registro gravado");

$("#div_data").append(xdata);
$("#div_titulo").append(xtitulo);
$("#div_texto").append(xtexto);
$("#div_autoria").append(xautoria);
//$("#div_id").append(xid);

}
});
return false;
});

 

Porém quando usuário clicar no botão alterar registro, basicamente, a função seria a mesma, só que ao invés de inserir vai alterar.

Preciso pois capturar qual botão foi clicado.


Então imaginei que com o código abaixo eu conseguiria capturar o evento:

 

$(".alterar").click(function(){

porém não funciona,  quando executo, simplesmente nem lê este código.  Acho que isto tem a ver

porque o botão está dentro do form. Como faria para capturar o evento deste botão??

 

Também tentei colocar o código dentro da funcao que lê o formulario (o primeiro codigo acima):

acao  = $(this).attr('name');

 mas este codigo retorna o nome do formulário e não o nome do botão....

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você está definindo uma função para o SUBMIT do formulário, não importa de qual botão seja. Você tem 2 botões submit dentro de 1 form só.

 

Além disso, você está tentando pegar a ação do click pela class ".alterar" que não existe no seu botão, a classe que você está usando é a input. Neste caso altere de ".alterar" para "#alterar" que faz referência ao ID do botão.

 

Basta alterar o segundo para button apenas.

 

<button name="alterar" id="alterar" class="input">Alterar este Registro</button>

 

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 Rogerio Pancini
      Boa noite pessoal.
       
      Há duas partes de uma tela que estão prontas, funcionando, mas não corretamente.
      Nessa parte, faço um cálculo.
      Sem a máscara de Real, ótimo.
      Se coloco a máscara 'valor'no input, retorna NaN.
       
      /****** maskMoney ******/ $(function(){ $(".valor").maskMoney({symbol:'R$ ', showSymbol:true, thousands:'.', decimal:',', symbolStay: true}); }) /****** Função percentual ******/ function funcao_percentual(valor_1, destino, percentual) { $(valor_1).on("click", function() { $(destino).val(''); }); function arredondar(valor,casas){ var novo = Math.round(valor*Math.pow(10,casas))/Math.pow(10,casas); return(novo); } $(valor_1).blur(function() { valor = $(this).val(); porcentagem = percentual; // PORCENTAGEM A SER ADICIONADA total = (parseFloat((valor*porcentagem)/100)); $(destino).val(arredondar(total, 2)); }); } /****** Função subtrair ******/ function funcao_subtrair(valor_1, valor_2, inicio, destino) { $(inicio).on("click", function() { $(destino).val(''); }); function arredondar(valor,casas){ var novo = Math.round(valor*Math.pow(10,casas))/Math.pow(10,casas); return(novo); } $(inicio).blur(function() { valor_1_v = $(valor_1).val(); valor_2_v = $(valor_2).val(); total = (parseFloat((valor_1_v-valor_2_v))); $(destino).val(arredondar(total, 2)); }); } /****** Percentual de Provisão - Royalties (franchising) ******/ funcao_percentual("#valor", "#provisao_royalties_franchising", 39.85) /****** Percentual de Provisão Fundo Propaganda ******/ funcao_percentual("#valor", "#provisao_fundo_propaganda", 3) /****** Subtração de Provisão - Royalties ( franchising) ******/ funcao_subtrair("#provisao_royalties_franchising", "#provisao_fundo_propaganda", "#valor", "#provisao_royalties_franchising_2") E o outro BO é quando somo datas. Dá um resultado que não tem nada haver com a planilha que tenho de modelo:
       
      /****** Função calcular a data ******/ function funcao_calcular_data(data_inicial, data_final, dias) { $(data_inicial).blur(function() { $(data_inicial).on("click", function() { $(data_final).val(''); }); var data_ini = $(data_inicial).val(); var date = new Date(data_ini); date.setDate(date.getDate() + dias); var futDate=date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear(); $(data_final).val(futDate); }); } /****** 1º vencimento ******/ funcao_calcular_data("#data_emissao", "#1_venc", 28) /****** 2º vencimento ******/ funcao_calcular_data("#data_emissao", "#2_venc", 42) /****** 3º vencimento ******/ funcao_calcular_data("#data_emissao", "#3_venc", 56) Se alguém puder colaborar com alguma luz.
      Confesso que preciso melhorar ainda mais em Jquery, mas essas funções ficaram boas para a necessidade.
      Faltam apenas esses ajustes.
       
      Obrigado!
    • Por Carcleo
      jQuery:
          // JavaScript Document          $(document).ready(function (e) {                  $("#idPastor").on("change", function () {                          $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRedes.php",                 type: "POST",                 dataType: "json",                 data: {                       idPastor: $("#idPastor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRede').find('option').remove();                                          if (result == null){                         $("#idRede").append("<option value=>Sem Redes</option>");                     } else {                         $("#idRede").append("<option value=>Escolha a Rede</option>");                         result.forEach(function(option){                             $("#idRede").append("<option value=" + option["idRede"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRede").on("change", function () {                                                $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRegioes.php",                 type: "POST",                 dataType: "json",                 data: {                       idRede: $("#idRede").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRegiao').find('option').remove();                     if (result == null){                         $("#idRegiao").append("<option value=>Sem Regiões</option>");                     } else {                         $("#idRegiao").append("<option value=>Escolha a Região</option>");                                                 result.forEach(function(option){                             $("#idRegiao").append("<option value=" + option["idRegiao"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRegiao").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosAreas.php",                 type: "POST",                 dataType: "json",                 data: {                       idRegiao: $("#idRegiao").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                             $('#idArea').find('option').remove();                                 if (result == null){                             $("#idArea").append("<option value=>Sem Áreas</option>");                     } else {                                     $("#idArea").append("<option value=>Escolha a Área</option>");                             result.forEach(function(option){                             $("#idArea").append("<option value=" + option["idArea"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idArea").on("change", function () {                                                   $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosSetores.php",                 type: "POST",                 dataType: "json",                 data: {                       idArea: $("#idArea").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idSetor').find('option').remove();                                             if (result == null){                         $("#idSetor").append("<option value=>Sem Setores</option>");                     } else {                         $("#idSetor").append("<option value=>Escolha a Setor</option>");                                 result.forEach(function(option){                             $("#idSetor").append("<option value=" + option["idSetor"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idSetor").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosCelulas.php",                 type: "POST",                 dataType: "json",                 data: {                       idSetor: $("#idSetor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idCelula').find('option').remove();                             if (result == null){                         $("#idCelula").append("<option value=>Sem Celulas</option>");                     } else {                         $("#idCelula").append("<option value=>Escolha a Célula</option>");                                 result.forEach(function(option){                             $("#idCelula").append("<option value=" + option["idCelula"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                   }); Esse script, faz a população via $.ajax do jQuery de combos no form.
      Tudo funciona bem.
      Mas considere o o form abaixo:

       
      Imagine o que o usuário preencheu todos os campos e de repente resolve tocar a opção do select de Redes como está na figura.
      Porém, a opção Rede 2 NÃO possui Regiões Cadastradas ainda.
      No entanto, note que todos os campos abaixo estão preenchidos e isso não negaria um possível submit do form com dados errados?
      Ainda,  imagine a situação onde a opção Rede 2 POSSUI outas Regiões Cadastradas o que comprometeria a escolha dos selects que seguem
       
      Como contornar esse problema?
       
    • Por igoraraujowd
      Pessoal,
       
      Estou trabalhando em um teste A/B e preciso fazer uma modificação no código do menu. Estou utilizando o Mega Site Menu e preciso que o site fique sempre com o hamburger menu ainda que em desktop.
      https://codyhouse.co/gem/css-mega-site-navigation
       
      Pra fazer isso, eu precisaria fazer 2 alterações no código abaixo:
      https://ghostbin.com/paste/fjy3t
      1 - Alterar o valor da variável MqL
      2 - Anular as linhas abaixo na função moveNavigation:
      //navigation.insertBefore('.menu--mobile-header-cta'); //$('.nav-overlay').removeClass('is-visible'); A questão é que eu não posso fazer essas alterações diretamente no código e precisaria inserir algo em tags <script> que sobscrevesse a função e alterasse os pontos acima. É possível?
    • Por dieef5
      Boa noite pessoal,
       
      Estou com um problema e gostaria da ajuda dos amigos:
      Em uma página de escolha de forma de pagamento gostaria de fazer aparecer uma div que está oculta quando seleciono a opção pelo radio button.
      Funciona ok clicando direto no radio button, porém o radio button também é selecionado ao clicar sobre o nome da opção na DIV (exemplo: Boleto Bancário). E quando clico sobre o nome da opção a DIV oculta não aparece.
       
      Gostaria de exibir a DIV oculta tanto ao clicar sobre o nome Boleto bancário como ao clicar no radio button.
       
      o html é mais ou menos assim:
      <div class="selection row"> <div class="col-xs-6 text-left"><strong>Boleto Bancário</strong> 10% de Desconto</div> <div class="col-xs-6 text-right"><input type="radio" name="payment" value="boleto" checked="checked" /></div> </div> <div id="campos"> Exibe instrução <div  
      Meu jquery está assim:
      $("input[name=payment]").change(function(data){ var selection = $("input[name=payment]:checked").val(); console.log(selection); if(selection != "boleto") $("#campos").hide(); else $("#campos").show('fast'); }); $("#campos").hide();  
      VLw pessoal..
       
    • Por Julle
      Porquê esse erro estar acontecendo?
       
       
       
      Notice: Undefined index: action in C:\xampp\htdocs\PhpProject1\index.php on line 4
      Nome:  
      Idade:  
      E-mail: 
      sexo:  > Masculino  >Feminino 
      Curso:               > selecione...              > Ciência da Computação                > Bacharelando em Informática              > Engenharia da Computação   
                
      Conhecimento:  >Microdoft Word  >HTML  >JavaScript  >PHP 
       
       
       
      Código: 
      <!DOCTYPE html>
      <?php
          if($_REQUEST["action"] =="save")
          { 
              
              
              $formValid = True;
              
              $tamanho_nome = strlen($_POST["CAMPO_NOME"]);
              if($tamanho_nome < 5|| $tamanho_nome > 64)
              {
                  echo("O campo  'NOME' deve ter entre 5 e 64 caracteres.".$tamanho_nome);
                  $formValid = FALSE;
              }
              
              $idade = (int)$_POST["CAMPO_IDADE"];
              if(is_NaN($idade)|| $idade < 4 || $idade > 120)
              {
                  echo("O campo 'Idade' deve ter preenchido corretamente."); 
                  $formValid = false; 
              }
              $email = $_POST["CAMPO_EMAIL"];
              $regex = 
              "/^[^0-9][A-z0-9_]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/";
              if(!preg_match($regex, $email))
              {
                  echo("O campo 'E-mail' deve ter preenchido corretamente.");
                  $formValid = FALSE;
              }
              $sexo = $_POST["CAMPO_SEXO"];        
              if($sexo != "M" && $sexo != "F")
              {
                  echo("O campo 'sexo' deve ser preenchido.");
                  $formValid = FALSE;
              }
              $curso = $_POST["CAMPO_CURSO"];
              if($curso == "" || $curso == "Selecione . . .")
              {
                  echo("A campo 'curso' deve ser preenchido.");
                  $formValid = FALSE;
              }
              $conhecimento = $_POST["CAMPO_CONHECIMENTO"];
              if(sizeof($conhecimento)!= 2)
              {
                  echo("É necessário marcar 2 conhecimento.");
                  $formValid = FALSE;
              }
              if($formValid)
              {
                  echo("Formulário validado com sucesso");
                  exit();
              }
              
          }
          
        ?>
      <html>
          <head>
              <title>EXEMPLO - formulário</title>
              <script language=" JavaScrip">
              function validaForm()
              {
                  var tamanho_nome = document.forms["meuForm"].CAMPO_NOME.value.length;
                  if(tamanho_nome <5 || tamanho_nome >64)
                  {
                      alert("O campo 'nome' deve ter entre 5 e 64 caracteres");
                      return false;
                  }
                  var idade = document.forms["meuForm"].CAMPO_IDADE.value;
                  if(is_NaN($idade)|| $idade < 4 || $idade > 120)
                  {
                      echo("O campo 'Idade' deve ter preenchido corretamente."); 
                      return false;
                  }
                  var email = document.forms["meuForm"].CAMPO_EMAIL.value;
                  if(email.length<5 || email.length > 128 ||email.index0f(@) = = -1 ||
                  email.index0f('.') == -1){
                      alert("O campo 'Email' deve ter preenchido corretamente.");
                      return false;
                  }
                  var campo_sexo = document.forms["meuForm"].CAMPO_SEXO;
                  var sexo = false; 
                  for(i=0; i<campo_sexo.length;i++){
                      if(campo_sexo.checked == true)
                      {
                          sexo = campo_sexo.value;
                          brack;
                      }
                  }
                  if(sexo == false)
                  {
                      alert("O campo 'sexo' deve ser preenchido.");
                      return false;
                  }
                  var opcao_curso = document.forms["meuForm"].CAMPO_CURSO.selectedIndex;
                  if(opcao_curso == 0)
                  {
                      alert("O campo 'curso' deve ser preenchhido");
                      return false;
                  }
                  var conhecimento = document.forms["meuForm"].elements['CAMPO_CONHECIMENTOS[]'];
                  var conhecimentosMarcados =0;
                  for(i=0; i<conhecimentos.length; i++)
                  {
                      if(conhecimento.checked == true)
                      {
                          conhecimentosMarcados++;
                      }
                  }
                  if(conhecimentosMarcados != 2)
                  {
                      alert("É necessário marcar 2 conhecimento");
                      return false;
                  }
                  document.forms["meuForm"].submit();
                  
              }
              </script>
          </head>
          <body>
              
          <form method="POST" action="?action=save" name="meuForm">
                  
                  Nome:  <input type=TEXT name= "CAMPO_NOME" value=" <? echo $_POST[' CAMPO_NOME'];?>">
              <br>Idade: <input type=TEXT name="CAMPO_IDADE"  value="<? echo $_POST['CAMPO_IDADE'];?>">
              <br>E-mail:<input type=TEXT name="CAMPO_EMAIL"  value="<? echo $_POST['CAMPO_EMAIL'];?>">
              <br>sexo: <input type=RADIO name="CAMPO_SEXO" value="M"
                          <? if($_POST['CAMPO_SEXO']== "M"){echo "checked";}?> > Masculino
                          <input type=RADIO nome="CAMPO_SEXO" value="F"
                          <? if($_POST['CAMPO_SEXO']== "F"){echo "checked";}?> >Feminino
                  
                  
              <br>Curso: <select name= "CAMPO_CURSO">
                  <option <? if($_POST['CAMPO_CURSO']=="selecione . . . ")
                      { echo "selected";}?> > selecione...</option>
                  <option <? if($_POST['CAMPO_CURSO'] == "Ciência da Computação")
                      { eecho "selected";}?> > Ciência da Computação </option>
                  <option <? if($_POST['CAMPO_CURSO']=="Bacharelando em Informática")
                      { echo "selected";}?>  > Bacharelando em Informática</option>
                  <option <? if($_POST['CAMPO_CURSO']== " Engenharia da Computação")
                      {echo "selected";}?> > Engenharia da Computação </option>
              </select>
              
              <br>Conhecimento:
              <input type =checkbox name=CAMPO_CONHECIMENTOS[] value="Word" 
                     <?if(in_aray("Word", $_POST['CAMPO_CONHECIMENTOS[]') != FALSE){echo "checked"; }?> >Microdoft Word
              <input type =checkbox name=CAMPO_CONHECIMENTOS[] value="HTML"
                  <?if(in_aray("HTML",  $_POST['CAMPO_CONHECIMENTOS[]') != FALSE)
                  {echo "checked"; }?> >HTML
              <input type =checkbox name=CAMPO_CONHECIMENTOS[] value="JS"
                   <?if(in_aray("JS",  $_POST['CAMPO_CONHECIMENTOS[]') != FALSE)
                  {echo "checked"; }?> >JavaScript
              <input type =checkbox name=CAMPO_CONHECIMENTOS[] value="PHP"
                   <?if(in_aray("PHP",  $_POST['CAMPO_CONHECIMENTOS[]') != FALSE)
                  {echo "checked"; }?> >PHP
                  
              <br>
              <input type=RESET value="Limpar">
              <input type=BUTTON onClick="validaform();"value="Enviar">
          </form>     
              
                  
                           
          </body>
      </html>
×

Informação importante

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