問合せフォームの未入力チェック/誤送信防止のjavascript
2011-7-10Tags: このエントリをはてなブックマークに追加

会社のお問い合わせフォームで、入力途中の誤送信が多く、入力する人にとっても不便だなと感じていたので、未入力項目がある場合は送信できないようにjavascriptを追加しました。
プログラミングは素人なので自分用にメモです。

*****

まずフォームのhtmlをいじります。

<form method=”POST” action=”*ここは各自*.cgi” name=”form1” onSubmit=”return check()”>

名前:<input type=”text” name=”handle-name” size=”40″>

メールアドレス:<input type=”text” name=”email” size=”40″>

内容:<textarea name=”description” rows=”5″ cols=”40″></textarea>

<input type=”submit” value=”送信”>

<form>タグのnameは「form1」でなくても何でもいいのですが、
javascript内の「form1」と連動するので同じにしておきます。

<form>タグ内に onSubmit=”return check() を追加し、
送信ボタンを押したときにjavascriptでチェックするようにします。

そして以下のjavascriptを、フォームを設置しているページの<head>~</head>間に入れます。

<script type=”text/javascript”>

<!– function check()

{ var flag = 0;

if(document.form1.handle-name.value == “”){ flag = 1; }

else if(document.form1.email.value == “”){ flag = 1; }

else if(document.form1.description.value == “”){ flag = 1; }

if(flag){ window.alert(‘未入力の項目があります’); return false; }

else{ return true; }}// –>

</script>

色付の箇所は変更可能です。
フォームとjavascriptは連動するので、同じ色の箇所は同じものにしておきます。

else ifの行を追加すればチェック項目を増やせます。

ブックマーク(お気に入りに追加)ボタンの設置方法
2011-6-30Tags: このエントリをはてなブックマークに追加

デジタル関連?に弱い人向けに、「お気に入りに追加」ボタンを設置したいなと思ってググりましたが、ChromeやFirefoxではうまく動かないようです。

» お気に入りに登録
IE6では動きました。

ソース:
<a href=”javascript:window.external.AddFavorite(‘http://findaway-i.jp’,'find a way!’)” target=”_blank” style=”line-height:100px; font-size:30px;”>&raquo; お気に入りに登録</a>

FTPSにはFileZilla
2010-5-31 このエントリをはてなブックマークに追加

http://filezilla-project.org/

かれこれ10年以上FFFTPを使ってきましたが、
FTPSじゃないとセキュリティ的にやばいということで、
FileZillaというのに乗り換えることにしました。

というメモです。

追記:
~だったんだけど、なぜかFileZillaだとFTPSでログインできないようになって、仕方ないのでつなぎでNextFTPというのを使っています。ローカル/サーバのディレクトリ移動が同期していて使いやすいですが、期限付き試用版なので、どうしようかな。

シンプルな画像スライドショーをjqueryで
2009-12-6Tags: , このエントリをはてなブックマークに追加

jqueryで簡単スライドショーを作ってしまえました。

HTMLはこれ。

<div id="slideshow">
    <img src="img/img1.jpg" alt="" />
    <img src="img/img2.jpg" alt="" />
    <img src="img/img3.jpg" alt="" />
</div>
 

CSSはこれ。

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

で、以下をhead内に埋め込む。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
       <script type="text/javascript">
          function slideSwitch() {
              var $active = $('#slideshow img.active');
              if ( $active.length == 0 ) $active = $('#slideshow img:last');
              var $next =  $active.next().length ? $active.next() : $('#slideshow img:first');
              $active.addClass('last-active');
              $next.css({opacity: 0.0})
                  .addClass('active')
                  .animate({opacity: 1.0}, 1000, function() {
                      $active.removeClass('active last-active');
                });
          }
          $(function() {
              setInterval( "slideSwitch()", 4000 );
          });
       </script> 
 

こちらが元記事。↓ サンプルスライドショーもあります。
http://jonraasch.com/blog/a-simple-jquery-slideshow

jqueryのソースはDLして自分のサイトにUpして使ったほうがいいでしょう。
http://findaway-i.jp/dl/jquery-1.2.6.min.js

本当は、写真ごとにリンク先を変えたりしたかったけど、うまくできなかったのでリンクは断念しました。


IEでabsoluteがバグる件
2009-7-29 このエントリをはてなブックマークに追加

IEでCSSのposition:absoluteがずれたり見えなかったりするケースでは、
そのタグの直前に

<div style=”clear:both”></div>

を入れることで解決します。
IEのバグです。

新しい記事 »