顯示具有 jquery 標籤的文章。 顯示所有文章
顯示具有 jquery 標籤的文章。 顯示所有文章

2020年8月31日 星期一

ajax 使用form格式post 資料

Html部分：
	

  <form id="myForm" action="getPost.php" class='col-12 col-md-5 mx-auto'>
    <div class="form-group">
      <label for="data1">Email:</label>
      <input type="email" class="form-control" id="data1" name="data1" aria-describedby="emailHelp" autocomplete required>
      <small id="emailHelp" class="form-text text-muted">請輸入E-mail</small>
    </div>
    <div class="form-group">
      <label for="data2">Password</label>
      <input type="password" class="form-control" id="data2" name="data2" autocomplete required>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>


Jquery 部分：

$(function(){

      $( "#myForm" ).on( "submit", function(event) {

        event.preventDefault();        
        var form = $(this);
        var url = form.attr('action');

        $.ajax({
          type: "POST",
          url: url,
          data: form.serialize(), // 把form內的物件序列化.
          success: function(data)
          {
            //alert(data);

            if(data==1){
              alert('成功');
              //window.location.href='index.php';
            }else if(data == 0){
              alert('失敗');
              return false; 
            };

          }
        });       
      });

})
接收的PHP這一端，就直接以$_POST[""]接收傳過來的各個值

相關：不使用form的方式，直接用id或class讀取input的vlaue值post
於 沒有留言:
標籤： , , , ,

2020年3月23日 星期一

關於jquery使用on('click')然後append出來的按鈕的dom操作無法作用問題. click to append buttons cannot access with dom.

狀況：按鈕上使用on('click')函式想要在點擊後append出一個按鈕

html內有一個class為btn的案鈕
<a href="#">test button</a>

在script內加入以下語法

$('.btn').on('click',function(e){
    e.preventDefault();
    $('body').append("<a href='#' class='btn'>append a button</a>");
})


原本是希望點擊第一個btn能夠append出第二個btn，點擊第二個btn能夠appedn出第三個btn ...... 依序下去.

但實際運行時append出來的按鈕點擊時卻沒有反應，必須把上面標注的那段on click改為如下：

$(document).on('click', '.btn', function(e) {
    e.preventDefault();
    $('body').append("<a href='#' class='btn'>append出來的按鈕</a>");
})


因為append出來的btn按鈕不在一開始就load進來的dom上，所以點擊沒有作用。
把on click往上拉到在文件內點擊class為btn的所有按鈕，這樣就可行了
於 沒有留言:
標籤： , , ,

2018年7月20日 星期五

jquery 算出隨機整數字 

var randomNum = Math.floor(Math.random() * customVal);
//customVal 可以是自訂的參數，譬如以視窗或指定div的高或寬
於 沒有留言:
標籤： , ,

2018年7月10日 星期二

jquery引用網址

jquery官方提供的網址

<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>


google提供的網址

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

注意:
Google CDN網址雖然是比較好的選擇，但為了避免被大陸地區google的服務會有異常，建議使用jquery官方提供的引用網址
後方的數字可更改以符合最新版次，jquery版本資訊可見這裡



於 沒有留言:
標籤： ,

2017年12月20日 星期三

透過YouTube IFrame Player API客製化影片播放介面的按鈕及外觀

透過YouTube IFrame Player API能夠客製化影片播放介面的按鈕及外觀或是可用於需要偵測使用者操作動作時。

官方reference
於 1 則留言:
標籤： , , ,

2017年11月21日 星期二

用css及Jquery製作動態的手機版menu開關

Menu "Hamburger" Icon Animations
於 沒有留言:
標籤： , , ,

2016年11月1日 星期二

利用JavaScript把HTML轉為圖檔

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML to Image html2canvas</title>

</head>
<body>

   <table id="picArea">
    <tr><td>這個table內的內容是要儲存成圖檔案的區塊</td></tr>
  </table>

  <hr />

  <input type="button" value="" />

  <hr />

  <fieldset>
    <legend>圖檔</legend>
    <div>
    </div>
  </fieldset>

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js "></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js "></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
  <script>
    $(":button").click(function() {
      html2canvas($("#picArea")[0], {
        onrendered: function(canvas) {
          var $div = $("fieldset div");
          $div.empty();
          $("<img />", { src: canvas.toDataURL("image/png") }).appendTo($div);
        }
      });
    });
  </script>
</body>
</html>
於 沒有留言:
標籤： ,

2016年10月31日 星期一

取消jQuery Mobile 預設用 ajax 載入頁面內容以及傳出連結

關閉 jQuery Mobile 預設的 ajax：在 <a>、<form> 裡加入 data-ajax="false"。
於 沒有留言:
標籤： ,

取消jQuery mobile 對於input及select的樣式

在標籤上加上 data-role="none" 即可，如下方
<input type="text" name="text1" data-role="none">
於 沒有留言:
標籤： ,

2013年10月1日 星期二

解決LightBox的title標籤在滑鼠滑過影像圖片上，會出現黃色方塊title文字的問題

1.打開lightbox的js; 例如：js/lightbox-2.6.min.js

2.搜尋裡面一段 attr('title') ，把裡面的title改為自己設定的名稱，譬如說改為：attr('lightbox_title')

3.在html頁面上  lighbox影像<a>標籤上原本的title="文字文字文字"，改為lightbox_title="文字文字文字" 即可。
於 沒有留言:
標籤： , , ,

2013年9月5日 星期四

可以顯示圖片、影片、Flash Swf、Youtube連結、mp4、m4v、flv、ogg、ogv影片檔的多功能jQuery lightbox

原檔出處：http://html5box.com/html5lightbox/

要崁入youtube，就直接把youtube的網址貼在<a>標簽內即可...
於 沒有留言:
標籤： , , , , , ,

2012年11月26日 星期一

javascript圖片轉場特效、圖片效果及css圖片動畫特效收集

參考1

參考2


10 CSS And Javascript Animation Plugins, Frameworks and Libraries


於 沒有留言:
標籤： , , , ,

2010年6月29日 星期二

用css製作表格隔行換底色的方法

方法ㄧ：用CSS快速製作Table表格隔行換底色的方法(IE7、8 不支援) CSS部分 html部分 上述的方法可以快速的用CSS達成表格隔行換色，但是....IE7、8 就不支援，所以請見下方方法二 方法二：透過jquery達成 在html的內加入 //jquery js檔案的位置 這樣文件內加入的表格的行列背景色就會自動轉換
於 沒有留言:
標籤： , , , , ,
訂閱： 文章 (Atom)