フォーム画面でページから離れるときにJavascript(JS)の警告を出す - Rails Webook
上記のように、フォーム画面でページから離れるときにJavascript(JS)の警告を出す方法を説明します。 実際の動作は次のリンクから確認できます。 ページを離れる時に警告を出す - jsfiddle 動作確認 jQuery 2.1.0 JSの内容 beforeunloadイベントを使うことでこの動作を再現します。 beforeunloadは、ウインドウ(window)、ドキュメント(document)がアンロードされる前に発火するイベントです。 （あまりテストを行っていないのでバグがあるかもしれません。） <script type="text/javascript"> $(window).ready(function(){ // 値が変更されたとき(input要素、select要素が変更された場合)に // ブラウザの戻るや更新ボタン、タブを閉じるときに // 警告をだすようにする $
window.open で開いた窓に対して Post する | バシャログ。
いやあ、もうすぐスーパーマリオ3Dワールドの発売日だねえ！って言ったら「もうマリオはいいでしょ…」って言われた kimoto です。 なんでだよ！すっげえ面白そうじゃんかよ！よくないよ！ さて、本日はちょっと小ネタで、window.open で開いた窓に対して Post でデータを渡す方法です。 利用場面としては、フォームの確認画面を小窓で開きたい時などですね。 URL にデータを乗っけて Get で開く方法も無くはないですが、データ量に制限もあったりなど、いろいろと問題があります。 ということで、開いた窓に対して Post でデータを投げる方法です。 function open_preview() { window.open("about:blank","preview","width=600,height=450,scrollbars=yes"); document.input_for
[jQuery] Enterキーでフォーカスを移動するには
Enterキーでフォームを送信したくない時は あるWebアプリケーションのフォームで、Enterキーを押してもSubmitされない様にする必要があって、ちょっと調べた。 リターン（Enterキー）でフォームを送信しない方法: 小粋空間 とりあえずこの記事の「４．押されたキーを判定して抑止する」の所に書いてある方法で対応出来た。 Enterキーで次のフィールドにフォーカスを移動するには 次に、どうせならEnterキーで次のフィールドにフォーカスを自動で移動させたいな～、という事になった。やってみたら、jQueryのおかげでこんな感じで割りと簡単に出来た。 Enterキーが押された時にfalseを返すのではなくて e.preventDefault() を使う様に変えた。その理由はこちらを参照。 Shift＋Enterキーにも対応するには さらについでにShift+Enterキーでの逆順の移動に
セレクトボックスのoption要素を並び替えたい！
こんちわ。松田です。 最近作っているシステムで、以下のようなお題が出されました。 問：セレクトボックスで選択した要素を↑↓ボタンで並び替えよ。ただし、CTRL選択による複数選択にも対応すること。（10点） JavaScriptのライブラリは腐るほど出回っているのでとりあえずググろうかと思いましたが、そもそもなんてキーワードで検索したらいいのか分かりません。 「セレクトボックス 並び替え」「selectbox 要素 移動」「selectbox move」・・・ うーん。。。 日本語で検索して引っかからないと、英語ページに救いを求め、だんだんとシンプルな英単語でググっていくことになりますが、今回はなかなかいい結果が見つかりません。 そんなわけでこれは自分で実装してみることにしました。 まずは↓ボタンから作るか。ということで、クリックしたら呼び出される関数をとりあえず定義。 そして、<optio
AngularJSで、入力フォームを簡単にチェックできるディレクティブを使う
対象読者 jQueryなどを使っている開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome（39.0）、IE11、Firefox（35.0）、Safari（8.0.2）の環境にて確認を行っています。 入力フォームを扱うためのディレクティブ FormやInputタグなどフォームを扱うディレクティブでは、ユーザから入力される値を管理するために表示するだけのディレクティブとは異なり、便利な機能が沢山あります。それらの機能をうまく使うことで手間なく、また、問題がおきにくいシステムを構築できるようになっています。まずは、このフォームを扱うための機能を紹介します。 フォームの管理を扱うためのディレクティブ ngForm/ngSubmi
onsubmitの戻り値をfalseにしてsubmitを実行しない（中断させる）方法
JavaScriptで、onsubmitの戻り値をfalseにしてフォームのsubmitを中断させる（実行しない）方法を紹介します。 １．onsubmitイベントとは onsubmitイベントは、フォームの送信ボタン（type属性がsubmitのボタン）がクリックされた時に発生するイベントです。 <form method="post" action="foo.cgi" onsubmit="foo();"> <input type="text" value="" /> <input type="submit" value="送信" /> </form> ２．submitを中断する（＝フォームを送信しない）方法 onsubmitイベントを使ってsubmitを中断するケースとして、送信時にJavaScriptでフォームのチェックをして、フォームデータに未入力の項目がある場合、「return fa
jQuery ValidationプラグインでAjaxを使ってremoteバリデーションする - morolicious開発日記
jQuery Validation Plugin jquery.validate.js フォームのバリデーションにとても便利なjQueryプラグインですが、Ajaxを使った時にちょっとハマったのでメモ。 例えばユーザー名が使われているかチェックする時にクライアントサイドのチェックだけでは実装出来ないのでサーバに問い合わせる必要があります。 jQuery Validation Pluginではremoteを設定する事でデフォルトではonkeyup（一文字入力するごと）毎にサーバ側にリクエストしてチェックしてくれます。 コードサンプル ※Bootstrapを使っているのでCSSへの適応も考慮されています。 HTML <form id="join-form"> <div class="control-group"> <input id="username" name="username" typ
jQuery Validation Plugin | Form validation with jQuery
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation
高機能ライブラリ「jQuery」とそのPlugin「Validation」 - すぎゃーんメモ
非常に高機能で便利なJavaScriptライブラリとして評判の「jQuery」をちょっと触ってみた。 jQuery Pluginが豊富に存在する、というのも人気の理由のようで。 formの入力チェックをしてくれる「Validation Plugin」というものを使って試してみた。 bassistance.de » jQuery plugin: Validation 忘れてしまわないうちにメモっておこう。 最も簡単なサンプル それぞれ上記リンクからダウンロードして、「js」というディレクトリに放り込んでおいた。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>title</title> <script type="te
簡単にフォームの入力チェックが行えるjquery.validate.js-JavaScript Library Archive
簡単にフォームの入力チェックが行えるjquery.validate.js Check Tweet 配布元：bassistance.de » jQuery plugin: Validation ライセンス：MIT/GPL jquery.validate.jsは入力フォームのバリデーション（チェック）を簡単に実装することが出来るjQueryプラグインです。 利用方法 利用方法はまず、jQuery本体と配布元よりダウンロードしてきた「jquery.curvycorners.min.js」をhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> バリデーションを行いたい
JavaScript/フォーム/テキストフィールドの入力をチェックする - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（必須にする項目を設定してください） if(document.form1.field1.value == ""){ // 「お名前」の入力をチェック flag = 1; } else if(document.form1.field2.value == ""){ // 「パスワード」の入力をチェック flag = 1; } else if(document.form1.field3.value == ""){ // 「コメント」の入力をチェック flag = 1; } // 設定終了 if(flag){ window.alert('必須項目に未入力があ
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
jQuery：jQueryでsubmit（サブミット）する方法 | raining
jQueryを使用し、フォームの値をsubmitする方法をメモします。 送信したいデータを変形や追加、バリデーションのチェックなど jQueryやjavascriptを使用するとデータを送信する前に処理することが可能です。 色々な用途で使用できます。 いつも忘れてしまうので、jQueryでformをsubmitする方法と javascriptでformをsubmitする方法をメモします。 ■ jQueryでsubmitする方法 【jQuery】 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#form1').submit(funct
jQuery リファレンス：serialize
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
jQuery でフォームの disabled を解除したり有効化する方法
attr()でdisableをどうこうするばあいは、 true or falseで設定します。 （かなり古いバージョンのjQueryはこの記事通りですが） また前の人が指摘している通り、 1.6でprop()にかわり、1.6.1で後方互換が導入され、どちらでも使えるようになりました。
テキストボックスに指定したURLのタイトルやdescription、使用されている画像等を取得するjQueryプラグイン・Link Scrapper TextBox - かちびと.net
指定したリンク先のURLやタイトル 、description、ページ内で使用し ている画像を取得するjQueryのプラ グイン・Link Scrapper TextBoxの ご紹介です。Facabook等でも使わ れていますね。 Facebookのように、テキストボックスにURLを入れると、そのURL先のタイトルやdescription、画像を取得する、というスクリプトです。jQueryに依存しています。 上記のようにタイトルやdescriptionなどを取得、表示しています。何かと使えそうですねー。 以下公式の動作サンプルです。 Sample コード <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="linkScrapper.min.js"></script> 本体とプラグインを読み込
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
input type = 'date' に初期値を設定したいときの日付フォーマット - Qiita
Enterキーを無効にする方法 - Qiita
GitHub - yubinbango/yubinbango
