Jump to content
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....

Share this post


Link to post
Share on other 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>

 

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 mamotinho
      Olá, gostaria de sabe como posso fazer uma contagem regressiva apartir de um registro em meu banco de dados eu tentei montar um código da seguinte forma:

       
      <? $DateGET = date('m/d/Y H:i A', strtotime($result->DateDiscount)); ?> <script> var valueDate = <?=$DateGET?>; var end = new Date(valueDate); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); document.getElementById("countdown").innerHTML = "EXPIRED!"; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById("countdown").innerHTML = "<span class='n_date day' id='days'>" + days + "</span><span class='date'>일</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time hour' id='hrs'>" + hours + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time minute' id='minus'>" + minutes + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time second' id='secs'>" + seconds + "</span>"; } timer = setInterval(showRemaining, 1000); </script> Mais infelizmente não passou a data registrada no banco de dados, alguém teria ideia de como posso ta fazendo.
    • By alysson122010
      Galera estou com um sistema de jcrop que quando eu coloco imagem jpg e jpeg ele funciona de boa porem quando coloco png a imagem fica toda preta e salva preta.
       
      PHP que salva
       

      <?php
      /*********************************************************************
           Purpose            : update image.
           Parameters         : null
           Returns            : integer
           ***********************************************************************/
           $post = isset($_POST) ? $_POST: array();
           //print_R($post);die;
           switch($post['action']) {
            case 'save' :
              saveAvatarTmp();
            break;
            default:
              changeAvatar();
              
           }
          
           function changeAvatar() {
              $post = isset($_POST) ? $_POST: array();
              $max_width = "500"; 
              $userId = isset($post['hdn-profile-id']) ? intval($post['hdn-profile-id']) : 0;
              $path = 'images/tmp';
              $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
              $name = $_FILES['photoimg']['name'];
              $size = $_FILES['photoimg']['size'];
              if(strlen($name))
              {
              list($txt, $ext) = explode(".", $name);
              if(in_array($ext,$valid_formats))
              {
              if($size<(1024*1024)) // Image size max 1 MB
              {
              $actual_image_name = 'avatar' .'_'.$userId .'.'.$ext;
              $filePath = $path .'/'.$actual_image_name;
              $tmp = $_FILES['photoimg']['tmp_name'];
              
              if(move_uploaded_file($tmp, $filePath))
              {
              $width = getWidth($filePath);
                  $height = getHeight($filePath);
                  //Scale the image if it is greater than the width set above
                  if ($width > $max_width){
                      $scale = $max_width/$width;
                      $uploaded = resizeImage($filePath,$width,$height,$scale);
                  }else{
                      $scale = 1;
                      $uploaded = resizeImage($filePath,$width,$height,$scale);
                  }
              /*$res = saveAvatar(array(
                              'userId' => isset($userId) ? intval($userId) : 0,
                                                      'avatar' => isset($actual_image_name) ? $actual_image_name : '',
                              ));*/
                              
              //mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
              echo "<img id='photo' file-name='".$actual_image_name."' class='' src='".$filePath.'?'.time()."' class='preview'/>";
              }
              else
              echo "failed";
              }
              else
              echo "Image file size max 1 MB"; 
              }
              else
              echo "Invalid file format.."; 
              }
              else
              echo "Please select image..!";
              exit;
              
              
          }
          /*********************************************************************
           Purpose            : update image.
           Parameters         : null
           Returns            : integer
           ***********************************************************************/
           function saveAvatarTmp() {
              $post = isset($_POST) ? $_POST: array();
              $userId = isset($post['id']) ? intval($post['id']) : 0;
              $path ='\\images\uploads\tmp';
              $t_width = 300; // Maximum thumbnail width
              $t_height = 300;    // Maximum thumbnail height
              
          if(isset($_POST['t']) and $_POST['t'] == "ajax")
          {
              extract($_POST);
              
              //$img = get_user_meta($userId, 'user_avatar', true);
              $imagePath = 'images/tmp/'.$_POST['image_name'];
              $ratio = ($t_width/$w1); 
              $nw = ceil($w1 * $ratio);
              $nh = ceil($h1 * $ratio);
              $nimg = imagecreatetruecolor($nw,$nh);
              $im_src = imagecreatefromjpeg($imagePath);
              imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w1,$h1);
              imagejpeg($nimg,$imagePath,90);
              
          }
          echo $imagePath.'?'.time();;
          exit(0);    
          }
          
          /*********************************************************************
           Purpose            : resize image.
           Parameters         : null
           Returns            : image
           ***********************************************************************/
          function resizeImage($image,$width,$height,$scale) {
          $newImageWidth = ceil($width * $scale);
          $newImageHeight = ceil($height * $scale);
          $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
          $source = imagecreatefromjpeg($image);
          imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
          imagejpeg($newImage,$image,90);
          chmod($image, 0777);
          return $image;
      }
      /*********************************************************************
           Purpose            : get image height.
           Parameters         : null
           Returns            : height
           ***********************************************************************/
      function getHeight($image) {
          $sizes = getimagesize($image);
          $height = $sizes[1];
          return $height;
      }
      /*********************************************************************
           Purpose            : get image width.
           Parameters         : null
           Returns            : width
           ***********************************************************************/
      function getWidth($image) {
          $sizes = getimagesize($image);
          $width = $sizes[0];
          return $width;
      }
      ?>
       
       
      Jquery
       
      <script type="text/javascript">
              jQuery(document).ready(function(){
              
              jQuery('#change-pic').on('click', function(e){
                  jQuery('#changePic').show();
                  jQuery('#change-pic').hide();
                  
              });
              
              jQuery('#photoimg').on('change', function()   
              { 
                  jQuery("#preview-avatar-profile").html('');
                  jQuery("#preview-avatar-profile").html('Uploading....');
                  jQuery("#cropimage").ajaxForm(
                  {
                  target: '#preview-avatar-profile',
                  success:    function() { 
                          jQuery('img#photo').imgAreaSelect({
                          aspectRatio: '1:1',
                          onSelectEnd: getSizes,
                      });
                      jQuery('#image_name').val(jQuery('#photo').attr('file-name'));
                      }
                  }).submit();
              });
              
              jQuery('#btn-crop').on('click', function(e){
              e.preventDefault();
              params = {
                      targetUrl: 'profile.php?action=save',
                      action: 'save',
                      x_axis: jQuery('#hdn-x1-axis').val(),
                      y_axis : jQuery('#hdn-y1-axis').val(),
                      x2_axis: jQuery('#hdn-x2-axis').val(),
                      y2_axis : jQuery('#hdn-y2-axis').val(),
                      thumb_width : jQuery('#hdn-thumb-width').val(),
                      thumb_height:jQuery('#hdn-thumb-height').val()
                  };
                  saveCropImage(params);
              });
              
           
              
              function getSizes(img, obj)
              {
                  var x_axis = obj.x1;
                  var x2_axis = obj.x2;
                  var y_axis = obj.y1;
                  var y2_axis = obj.y2;
                  var thumb_width = obj.width;
                  var thumb_height = obj.height;
                  if(thumb_width > 0)
                      {
                          jQuery('#hdn-x1-axis').val(x_axis);
                          jQuery('#hdn-y1-axis').val(y_axis);
                          jQuery('#hdn-x2-axis').val(x2_axis);
                          jQuery('#hdn-y2-axis').val(y2_axis);
                          jQuery('#hdn-thumb-width').val(thumb_width);
                          jQuery('#hdn-thumb-height').val(thumb_height);
                          
                      }
                  else
                      alert("Please select portion..!");
              }
              
              function saveCropImage(params) {
              jQuery.ajax({
                  url: params['targetUrl'],
                  cache: false,
                  dataType: "html",
                  data: {
                      action: params['action'],
                      id: jQuery('#hdn-profile-id').val(),
                       t: 'ajax',
                                          w1:params['thumb_width'],
                                          x1:params['x_axis'],
                                          h1:params['thumb_height'],
                                          y1:params['y_axis'],
                                          x2:params['x2_axis'],
                                          y2:params['y2_axis'],
                                          image_name :jQuery('#image_name').val()
                  },
                  type: 'Post',
                 // async:false,
                  success: function (response) {
                          jQuery('#changePic').hide();
                          jQuery('#change-pic').show();
                          jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');
                          
                          jQuery("#avatar-edit-img").attr('src', response);
                          jQuery("#preview-avatar-profile").html('');
                          jQuery("#photoimg").val('');
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
                  }
              });
              }
              });
          </script>
    • By AndersonVSilva
      Bom dia Pessoal,
       
      Efetuei uma busca no forum e não encontrei alguma solução para meu problema.
       
      Tenho este form via HTML:
       
      <td><form id="form1" action="CallProc02.php" method="post"><input type="hidden" name="id" value="1" /></form></td> <td><input form="form1" type="text" name="DDDA" value="Ex: 75" /></td> <td><input form="form1" type="text" name="NumA" value="Ex: 982825441" /></td> <td><input form="form1" type="text" name="DtInit" value="Ex: 2018-01-01" /></td> <td><input form="form1" type="text" name="DtEnd" value="Ex: 2019-01-01" /></td> <td><input form="form1" type="submit" value="Enviar" /></td> E aqui está o código PHP:
      <?php $sDDDA = $_POST['DDDA']; $sNumA = $_POST['NumA']; $sDtInit = $_POST['DtInit']; $sDtEnd = $_POST['DtEnd']; $con = new PDO("mysql:host:IP;dbname=DB", "User", "Pass"); $stmt = $con->prepare("CALL NOC_cobranca_conecta_historico_msisdn(:qDDDA, :qNumA, :qDtInit, :qDtEnd) "); $stmt->bindParam(":qDDDA", $sDDDA, PDO::PARAM_STR, 3); $stmt->bindParam(":qNumA", $sNumA, PDO::PARAM_STR, 10); $stmt->bindParam(":qDtInit", $sDtInit, PDO::PARAM_STR, 12); $stmt->bindParam(":qDtEnd", $sDtEnd, PDO::PARAM_STR, 12); $stmt->execute(); $result = $stmt->fetchAll(PDO::FETCH_ASSOC); if ($result) { echo "OK"; } else { echo "NOK - Report Development Team"; } ?> No Apache ele fica logando o erro ' PHP Notice:  Undefined index: NumA in /var/www/html/Consulta/CallProc02.php' .
       
      Alguém pode me dizer oque estou fazendo errado?
       
      Obrigado desde já pela ajuda.
    • By DinhoPHP
      Pessoal, tenho um código PHP que busca imagens em subpastas, porém gostaria de fazê-lo com que fosse carregado aos poucos pois são muitas fotos, tentei de ns maneiras entender o AJAX, mas não tive sucesso. Favor! Peço ajuda.
       
      loadAjax.php
      $dir = new DirectoryIterator( './images/portfolio/sem_categoria' ); // array contendo os diretórios permitidos $diretoriosPermitidos = array("portfolio","sem_categoria"); foreach($dir as $file) { // verifica se $file é diferente de '.' ou '..' if (!$file->isDot()) { // listando somente os diretórios if ( $file->isDir() ) { // atribui o nome do diretório a variável $dirName = $file->getFilename(); // subdiretórios $caminho = $file->getPathname(); // chamada da função de recursividade recursivo($caminho, $dirName); } // listando somente os arquivos do diretório if ( $file->isFile() ) { // atribui o nome do arquivo a variável $fileName = $file->getFilename(); // print //echo "Arquivos: ".$fileName."<br>"; } } } function recursivo( $caminho, $dirName ){ global $dirName; $DI = new DirectoryIterator( $caminho ); foreach ($DI as $file){ if (!$file->isDot()) { if ( $file->isFile() ) { // $fileName = $file->getFilename(); // //echo $dirName.": ".$fileName."<br>"; echo "<div class='col-12 col-sm-6 col-md-4 col-lg-3 mb-2 d-flex justify-content-center' alt=''> <a href='{$fileName}' class='fresco' data-fresco-group='example' data-fresco-caption='ARJ SERVICE'> <img class='eni-img-thumb' src='images/portfolio/sem_categoria/{$dirName}/{$fileName}'> </a> </div>"; } } } } Tentei adaptar o código abaixo as minhas necessidades, mas não consegui.
      <script> //variavel para controle de registros retornados var pagina = 0; var pesquisa = true; //function carrega function carrega(){ $('#loading').html("<img src='img/loader.gif'/> Carregando Feeds...").fadeIn('fast'); $.ajax({ type: "POST", url: "loadAjax.php", data: "page="+pagina,//variavel passada via post cache: false, success: function(html){ if(html){ $('#loading').fadeOut('fast'); $("#result").append(html); //mostra resultado na div result pesquisa = true; }else{ $('#loading').html("Fim da pesquisa...").fadeIn('fast'); pesquisa = false; } }, error:function(html){ $('#loading').html("erro...").fadeIn('fast'); } }); }; //chama minha funcao ao carregar a pagina $(document).ready(function(){ carrega(); }); //funcao de controle do scroll da pagina, na qual ela chega ao fim é acionada chamando //minha function carrega novamente para trazer mais dados dinamicamente $(window).scroll(function(){ if($(window).scrollTop() + $(window).height() >= $(document).height()){ pagina += 1; carrega(); }; }); </script>  
    • By asacap1000
      Salve Galera!!
      Estou com um problema que acredito que seja muito facil mas não estou conseguindo colocar no código.
       
      Tenho um formulário simples onde temos apenas um campo a ser preenchido, input file.
      estarei utilizando ele no celular para fotos de processos de conferência. O que preciso é que assim que constar dados no campo ele automaticamente executa o form para salvar.
      segue script;
       
      <form name="form" id="form"class="form-horizontal" action="" method="post"> <div class="form-group form-group-lg"> <div class="col-sm-12"> <input id="foto" name="foto" hidden="1" value="<?=$prot_foto?>" type="text" maxlength="200" > <input id="lote" name="lote" hidden="1" value="<?=$lote?>" type="text" maxlength="200" > <label for='selecaoarquivo' ><figure><svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="50" height="40" viewBox="0 0 512.000000 392.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,392.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M1970 3073 l-151 -163 681 0 682 0 -19 24 c-10 14 -70 85 -133 160 l-115 134 -397 4 -397 3 -151 -162z m710 17 l0 -60 -190 0 -190 0 0 60 0 60 190 0 190 0 0 -60z"/> <path d="M3370 3005 l0 -95 240 0 240 0 0 95 0 95 -240 0 -240 0 0 -95z"/> <path d="M1154 2955 l-1 -45 224 0 223 0 0 45 0 45 -222 0 -223 0 -1 -45z"/> <path d="M1105 2829 c-114 -19 -200 -64 -266 -137 -85 -94 -116 -191 -126 -384 l-6 -128 713 0 713 0 72 68 c122 117 239 184 386 223 69 19 109 23 224 22 121 0 152 -4 228 -27 48 -14 118 -42 156 -61 78 -39 205 -137 248 -189 l28 -36 433 0 432 0 0 118 c0 123 -20 234 -56 304 -47 94 -138 168 -254 210 l-65 23 -1405 1 c-773 1 -1427 -2 -1455 -7z"/> <path d="M2715 2207 c-212 -23 -436 -233 -475 -446 -14 -78 -12 -196 5 -270 43 -181 197 -344 384 -408 52 -18 89 -23 171 -23 179 0 297 47 415 165 116 115 175 256 175 415 0 232 -158 458 -378 540 -68 26 -200 38 -297 27z"/> <path d="M712 1528 c5 -611 5 -613 63 -728 52 -102 125 -163 251 -207 l79 -28 1420 0 c1350 0 1423 1 1480 18 177 55 271 151 315 321 19 75 20 110 20 633 l0 553 -396 0 c-218 0 -394 -3 -392 -7 2 -5 15 -30 29 -58 54 -102 81 -210 86 -346 11 -261 -69 -472 -249 -651 -309 -311 -799 -341 -1140 -70 -167 133 -273 303 -314 503 -13 64 -15 114 -11 219 6 150 24 224 83 343 l34 67 -681 0 -680 0 3 -562z"/> </g> </svg></figure><h4>TIRAR FOTO</h4></label> <input type="file" id="selecaoarquivo" class="btn btn-danger" name="image[]" accept="image/*" capture="camera"> </div> </div><br> <p><br> <p> <button name="Cadastrar" id="cadastrar" value="Cadastrar" class="btn btn-success " type="Submit" onclick="javascript:document.getElementById('blanket').style.display = 'block';document.getElementById('aguarde').style.display = 'block';"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="25" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg><h4>SALVAR FOTO</h4></button> </form> Se puderem me dar uma força nisso agradeço imensamente!!!
       
×

Important Information

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