作者: ann71727

jQuery get all form values 取表單所有的值

// 方法1
var datastring = $("#form").serialize();
$.ajax({
    type: "POST",
    url: "test.php",
    data: datastring,
    success: function(data) {
        alert('Data send');
    }
});

//方法2
var form = $(this).closest('form');
var data = form.serializeArray();
data.push({name: "fun", value: 'img_edit'}); //增加自訂的值
data.push({name: "time", value: $.now()});   //增加自訂的值
data = $.param(data);
$.ajax({
    type: "POST",
    url: "test.php",
    data: data,
    success: function(data) {
        alert('Data send');
    }
});

test.php 測試
<?php
  print_r($_POST);
  exit;
?>

結果
Array (
  [mail] => ann71727@test.com.tw 
  [password] => asdfasdf
  [name] => test
  [sex] => 1
)

 
https://api.jquery.com/serialize/



[……]
閱讀更多
SQL GROUP BY SUBSTR 用分割字串來群組資料
   
有時候我們會用一定的規則來訂義產品編號
例如：

2014(年)+001(款號)+01(規格) = 201400101(產品編號)
所以在列表中，其實我們是要顯示款列表，但不同規格其實還是同一款，大同小異，
此時我們會希望用款號來把相同款式的商品群組起來，秀一筆就好，GROUP BY可以搭配SUBSTR()來實現這效果，實際實作方式如下

product_id ( 產品編號欄 )
201400101
201400102
201400201
201400202
201400301
201400302
GROUP BY SUBSTR(product_id,5,3)

取出之產品編號 
201400101
201400201
201400301

參考
http://www.1keydata.com/tw/sql/sql-substring.html
[……]
閱讀更多
CSS 按鈕滑入、滑出、按下、停用樣式 input button css style hover click disable
   
:focus       // 焦點
:active      // 按下
:hover      // 滑出
:disabled  // 停用
<style type=”text/css”>
/* 原始 */
input[type=”button”]{
 background:#F00;
 border:2px solid #F00;
 padding:10px;
}
/* 滑入 */
input[type=”button”]:hover{
 background:#0F0;
 background:inherit;
}
/* 按下 */
input[type=”button”]:active{
 background:#00F;
 background:inherit;
}
/* 焦點 */
input[type=”button”]:focus{
 border:2px solid #00F;
 background:inherit;
}
/* 停用 */
input[type=”submit”]:disabled{
 background:#EBEBEB;
 border:2px solid #ccc;
 color:#999;
 padding:10px;
}
</style>
<input type=”button” name=”button” id=”button” value=”正常按鈕” />
<input type=”submit” name=”button” id=”button” value=”停用按鈕” disabled=”disabled” />[……]
閱讀更多
jQuery disable 元素，啟用、停用
   
// 元素停用
$(‘.select’).attr(‘disabled’, true);
$(‘.select’).attr(‘disabled’, ‘disabled’);
// 元素啟用
$(‘.select’).attr(‘disabled’, false);
$(‘.select’).attr(‘disabled’, ”);
$(‘.select’).removeAttr(‘disabled’);[……]
閱讀更多
fancybox plugin 自適應iframe內容尺寸  fancybox iframe auto  width height
   
fancybox plugin 自適應iframe內容尺寸  fancybox iframe auto  width height
本篇使用 jquery-1.11.0 & fancyBox-v2.0.6  請先確認您的版本
jQuery代碼如下，主要是為fancybox加上beforeShow事件的callback，在iframe頁面載入後去抓其內容的寬度及高度。
重點在這 – iframe中的頁面一定要定義其 <html>及<body>的寬度、高度，高度可設為auto
範例如下，將下列代碼置於<head>及<body>中間，父頁面才有辦法去抓到頁面的寬度，以設定ifreme的尺寸
<style type=”text/css”>
/* iframe 頁面 */
html,body{
 margin:0;
 padding:0;
 width:700px;
 height:auto;
}
</style>[……]
閱讀更多