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>[……]

閱讀更多

jQuery 繁體中文參考手冊 – 非常詳細 – 學jQuery必備 – 教學必備

jQuery 誰記得那麼多用法呀,當然要有一本參考手冊呀,
不管新手、老手都需要這玩意兒,快加入書籤吧

[……]

閱讀更多