«Prev | | 1 || Next»

02/15: [Javascript] チェックボックスを全てチェック/解除する方法

フォームでチェックボックスが複数あるとき使われる「一括チェック＆解除」機能です。

方法はいろいろありますが、複数のチェックボックス名をPHPの配列で使いたい。
それで配列形式にしました。

チェックボックスを全てチェック/解除する方法

・HTML

<HTML>
<HEAD>
<TITLE>チェックボックスを全てチェック/解除する方法</TITLE>
<SCRIPT language="JavaScript">
chx = new Array("ch[0]","ch[1]","ch[2]","ch[3]","ch[4]","ch[5]");
function chkOnOff(){
    for(i=0; i<chx.length; i++) {
        document.lucenForm.elements[chx[i]].checked = document.lucenForm.allChk.checked;
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="lucenForm">
All check<input type="checkbox" name="allChk" onclick="chkOnOff()"><br>
<INPUT type="checkbox" name="ch[0]">checkbox0
<INPUT type="checkbox" name="ch[1]">checkbox1
<INPUT type="checkbox" name="ch[2]">checkbox2<br>
<INPUT type="checkbox" name="ch[3]">checkbox3
<INPUT type="checkbox" name="ch[4]">checkbox4
<INPUT type="checkbox" name="ch[5]">checkbox5<br>
</FORM>
</BODY>
</HTML> 


・PHPでメンテナンスする場合

内容の続きを見る（Read More）

Category: JavaScript | Posted by: lucen |

12/10: JavascriptでCookie設定関数（書き込み、読み込み、削除）

JavascriptからPHPに値を渡す方法を調べたら「POST」、「GET」、「Cookie」の方法がある。
それもリロードが必要。

こちらではCookie方法で実現してみました。
画面表示はJavascriptからの表示とPHPからの表示で2つ試しました。
Javascriptでのクッキー表示ではすぐに表示されましたが、PHPはリロードすると表示される。

・クッキー処理のソース

<html>
<head>
<script language="javascript">
    // JavascriptでCookieを設定する関数
    // JavascriptでCookieの書き込み
    function createCookie(name,value,days){
        if (days){
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }
    // JavascriptにCookieの読み込み
    function readCookie(name){
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++){
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
    // JavascriptでCookieの削除
    function eraseCookie(name){
        createCookie(name,"",-1);
    }
    
    // クッキーの書き込み
    // クッキー名：setCookie1、クッキー値：cookieValue1、有効期限：7日
    createCookie('setCookie1','cookieValue1',7);
    
    // 取得したクッキーを画面に表示
    document.write(readCookie('setCookie1'));
    
</script>
</head>
<body> 


・ソースの続き

内容の続きを見る（Read More）

Category: JavaScript | Posted by: lucen |

10/27: [HTML] Selectフォームに直接入力

入力フォームでメールアドレスのとき、アドレスのドメインを選択するようにも直接入力もできるようにしたい。そのとき使われます。

selectで「直接入力」を選択するとinputフォームが現れます。
VBなどではSelectフォームに直接入力もできますが、HTMLで実現するのは無理ぽいですね。

html select 直接入力
セレクトから直接入力を選択すると下のように変わります。
html select 直接入力

FormのmethodはGETにしましたので結果がURLで確認できます。
実際使うときはPOSTに変更してください。

＞＞DEMOページ＜＜

・HTMLソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function toggle(value){
    if(value=='1') view_basic.style.display = '';
    else view_basic.style.display = 'none';
    
    if(value=='2') view_standby.style.display = '';
    else view_standby.style.display = 'none';
}

var LucenIndex = 0;
function OnSelectMailDomain(){
    if( lucen.mail_domain_index.value == "false" ) {
        if( LucenIndex ){
            lucen.mail_domain.value = "";
        }
        toggle(2);
        lucen.mail_domain.focus();
    }else{
        LucenIndex = 1;
        lucen.mail_domain.value = lucen.mail_domain_index.value;
        toggle(1);
    }
}
</script>
</head> 


・続きのHTMLソース

内容の続きを見る（Read More）

Category: JavaScript | Posted by: lucen |

10/07: [Javascript] フォームチェック

Form CheckするJavascriptです。
お問い合わせフォームやメールフォームなどで良く使われるソースなので必須項目を整理してみました。
今回苦労したのはCheckBoxをプログラムで処理しやすくするためArrayを使ったころです。
配列の場合もフォームチェックできるようにしました。

Form Check

・<body>

<form method="post" action="confirm.php" onSubmit="return lucenFromCheck(this)" enctype="multipart/form-data"> 


・<head>

内容の続きを見る（Read More）

Category: JavaScript | Posted by: lucen |

08/04: [JavaScript]　入力フォームの数字に自動でコンマを入れる

・数字を入力するInput formで自動的にコンマを入れるスクリプト
数字を入力すると自動でコンマが入る


<html>
<head>
<title>数字に自動コンマを入れる</title>
<script language="javascript">
function incomma(str)
{
 str = ""+str+"";
 var retValue = "";
 for(iii=0; iii<str.length; iii++)
 {
  if(iii > 0 && (iii%3)==0)
  {
   retValue = str.charAt(str.length - iii -1) + "," + retValue;
  }
  else
  {
   retValue = str.charAt(str.length - iii -1) + retValue;
  }
 }
 if (retValue=="0")
 {
  return "";
 }
 return retValue;
} 

内容の続きを見る（Read More）

Category: JavaScript | Posted by: lucen |

07/05: [JavaScript] 新しいウィンドウからフォームデータをもらう（新）

・下記ソースの進化したVersionです。
・複数のフォームから新しいフォームを呼ぶとき使います。
・ちゃんと呼んだフォームにデータを戻します（あたりまえですけど笑）

ちゃんと呼びだしたフォームにデータを渡す

・index.htmlソース

<script language="JavaScript">
<!--
function newWindow(theURL){
  window.open(theURL,'','scrollbars=yes,width=300,height=20');
}
//-->
</script>

<form name="form1">
<input type="text" name="text1" size="30"><img src="img.gif" onclick="newWindow('pop.php?c=1')" />
<input type="text" name="text2" size="30"><img src="img.gif" onclick="newWindow('pop.php?c=2')" />
<input type="text" name="text3" size="30"><img src="img.gif" onclick="newWindow('pop.php?c=3')" />
<input type="text" name="text4" size="30"><img src="img.gif" onclick="newWindow('pop.php?c=4')" />
<input type="text" name="text5" size="30"><img src="img.gif" onclick="newWindow('pop.php?c=5')" />
</form> 


・テストで使われたイメージ

内容の続きを見る（Read More）

Category: JavaScript | Posted by: lucen |

07/05: [JavaScript] 新しいウィンドウからフォームデータをもらう

・郵便番号を検索して郵便番号や住所をフォームに渡す
・カレンダーからの日付データをフォームに入力するとき使われる
・下のカレンダーから日付を自動に入力するようにしようと思って作りました。

・新しいウィンドウにデータ入力
新しいウィンドウにデータ入力

・Inputフォームのデータが元ウィンドウにデータを渡します。
元ウィンドウにデータを渡す

・index.htmlソース

内容の続きを見る（Read More）

Category: JavaScript | Posted by: lucen |

10/27: [PHP date] ウェブページに現在のリアルタイム時間表示

null

リアルタイムで現在の時間を表示してくれるScriptです。


<head>
<script language="JavaScript" type="text/javascript" src="clock.js"></script>
</head>

Current time in Japan <font color="black">

<?php
    $cur_date = date("m/d/Y");
    echo $cur_date;

  <span id="clock" style="position:relative;"></span></font> 

内容の続きを見る（Read More）

Category: JavaScript | Posted by: lucen |

06/04: [JavaScript] 同じウィンドウ上に画像表示「Lightbox」

Lightbox sample

ブログやウェブページの同じウィンドウ上に画像を表示するのが「Ligntbox JS」です。

・画像を一つずつ開いて見ることも→ Single images mode
・画像を一回開いて次々見ることもできます→　Image set mode

* サンプルページ

* 方法

# HTMLの<head>と</head>の間に書きます。
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script> 

ここに入るファイルや表示に使われるボタンなどのイメージは下の「Download」からダウンロードして解凍すれば全部入っています。

* HTMLタグ

内容の続きを見る（Read More）

Category: JavaScript | Posted by: lucen |

05/22: [JavaScript] テキストのリンクからPOSTでパラメータを渡す方法

GETだとURLに見えるので、JavaScriptを使ってPOSTでやってみました。

リンクを使わずに自動的にJavascriptからPOSTでパラメータを渡す方法を追加しました。

・サンプルページ：test.html

<script language="javascript">
    function doSubmit(){
        document.lucenForm.submit();
    }
</script>

<form name="lucenForm" method="post" action="test.php">
    <input type="hidden" name="msg" value="post_value" />
</form>

<a href="javascript:doSubmit();">POST send</a> 


＞＞PHPで効率良いシステム構築のお問い合わせ＜＜

・パラメータが渡された確認ページ：test.php

内容の続きを見る（Read More）

Category: JavaScript | Posted by: lucen |

«Prev | | 1 || Next»