JavaScriptプログラムに関する各種メモ書き:タグ「フォーム」での検索

javascriptで全てのチェックボックスにチェックをつける・外す

● javascriptで全てのチェックボックスにチェックを「つける」「外す」

・デモはこちら

https://pgmemo.tokyo/livedemo/all_checkbox_check/all_checkbox_check.html

javascript

function checkbox_all_check( _this, checkbox_name, form_name) {
	var check_flag = _this.checked;
	var form_dom;
	if ( form_name ){ form_dom = document[form_name]; }
	else{ form_dom = document.forms[0]; }

	if ( ! form_dom[checkbox_name] ){
		console.error( checkbox_name + ' という名前のチェックボックスが指定したフォーム内に存在しません' );
		return false;
	}

	for (var i = 0; i < form_dom[checkbox_name].length; i++) {
		form_dom[checkbox_name][i].checked = check_flag;
	}
}

html

<form name="FM" method="post">
		<label><input type="checkbox" id="data_all" onclick="checkbox_all_check(this, 'data_list[]','FM');">全てをチェック</label>
	<ul>
		<li><label><input type="checkbox" name="data_list[]" value="1"></label>データ1</li>
		<li><label><input type="checkbox" name="data_list[]" value="2"></label>データ2</li>
		<li><label><input type="checkbox" name="data_list[]" value="3"></label>データ3</li>
		<li><label><input type="checkbox" name="data_list[]" value="4"></label>データ4</li>
		<li><label><input type="checkbox" name="data_list[]" value="5"></label>データ5</li>
	</ul>
</form>

呼び出し方 1

checkbox_all_check(this, 'チェックボックスの name' ,);

例 :

checkbox_all_check(this, 'data_list[]');

呼び出し方 2 (フォームが複数ある場合)

checkbox_all_check(this, 'チェックボックスの name' ,'フォームのname' );

例 :

checkbox_all_check(this, 'data_list[]', 'FM');
No.1285
08/07 10:36

edit

フォーム

jqueryでフォームのふりがな自動入力

jquery.autoKana.js https://github.com/harisenbon/autokana

<form>
<input type="text" id="user_name">
<input type="text" id="kana_name">
</form>
<script src="./jquery.autoKana.js"></script>
<script>
$(function() {
    $.fn.autoKana('#user_name', '#kana_name', {
        katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
    });
});
</script>
No.1005
02/15 10:34

edit

jQuery
フォーム

クリックでクリップボードにコピーするボタンを作るjQueryプラグイン【clipboard.js】

● clipboard.js

https://zenorocha.github.io/clipboard.js/

このclipboard.jsは Flashを使用しません。 そのかわり Safari には未対応となっています。

● 使い方

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
$(function () {
var clipboard = new Clipboard('.clip_copy_btn');
});
</script>
<input type="text" id="clip_copy_1" value="XXXXX">
<button class="clip_copy_btn" data-clipboard-target="#clip_copy_1" >クリップボードにコピーする</button>

です。

No.1000
01/26 21:27

edit

フォーム
jQuery
HTML5

ドラッグ&ドロップで複数ファイルアップロード + 進捗(プログレスバー)表示する Dropzone.js

● Dropzone.jsを使ってドラッグ&ドロップアップロード + 進捗バー

ファイルアップロードシステムを作るには Dropzone が簡単で便利です。 以下の様な特徴があります。

・jQueryを必要としない。(共存可能です。以下の例ではjQueryと併用します。)
・ドラッグ&ドロップでファイルアップロードが行える
・非同期でファイルアップロードが行える
・ファイルアップロード中の進捗バーを表示することが出来る

使い方は簡単です。

1. ファイルのダウンロード と用意

必要なファイルは

dropzone.js (ダウンロード)
dropzone_config.js (自分で作成)
dropzone_upload.php (自分で作成)
dropzone.css (自分で作成)

です。

・ dropzone.js

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js ( .jsファイル)
からダウンロードして保存します。

・ dropzone_config.js

dropzone_config.jsは以下のように作成しておきます (※要追加) のところは適宜追加すること。

$(document).ready(function() {
$('#image_drop_area').dropzone({
	url                          : './js/dropzone_upload.php',
	paramName                    : 'file',
	maxFilesize                  : 999 , //MB
	addRemoveLinks               : true ,
	previewsContainer            : '#preview_area' ,
	thumbnailWidth               : 50 , //px
	thumbnailHeight              : 50 , //px
	dictRemoveFile               :'[×]' ,
	dictCancelUpload             :'キャンセル' ,
	dictCancelUploadConfirmation : 'アップロードをキャンセルします。よろしいですか?' ,
		uploadprogress:function(file, progress, size){
		file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + progress + "%";
	},
	success:function(file, rt, xml){
		// それぞれのファイルアップロードが完了した時の処理(※要追加)
		file.previewElement.classList.add("dz-success");
		 $(file.previewElement).find('.dz-success-mark').show();
	},
	processing: function(){
		// ファイルアップロード中の処理(※要追加)
	} ,
	queuecomplete: function(){
		// 全てのファイルアップロードが完了した時の処理(※要追加)
	} ,
	dragover: function( arg ){
		$('#' + arg.srcElement.id).addClass('dragover');
	} ,
	dragleave: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	drop: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	error:function(file, _error_msg){
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	},
	removedfile:function(file){
		delete_hidden('dropzone_files[]',file.xhr.response);
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	} ,
	canceled:function(arg){
	} ,
	previewTemplate : "\
	<div class=\"dz-preview dz-file-preview\">\n\
	  <div class=\"dz-details\">\n\
	    <div class=\"clearfix\">\n\
	      <img class=\"dz-thumbnail\" data-dz-thumbnail>\n\
	      <div class=\"dz-success-mark\" style=\"display:none;\"><i class=\"fa fa-2x fa-check-circle\"></i></div>\n\
	    </div>\n\
	    <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n\
	    <div>\n\
	      <div class=\"dz-filename\"><span data-dz-name></span></div>\n\
	      <div class=\"dz-my-separator\"> / </div>\n\
	      <div class=\"dz-size\" data-dz-size></div>\n\
	      <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n\
	    </div>\n\
	  </div>\n\
	</div>\n\
	"
});
});

・ dropzone_upload.php

dropzone_upload.phpは以下のように作成しておきます

<?php
$ds = DIRECTORY_SEPARATOR;
$store_folder = dirname(__FILE__) . $ds . '..' . $ds . 'data' . $ds . 'tmp' . $ds;
// echo $store_folder;
if (!empty($_FILES)) {
	$temp_file = $_FILES['file']['tmp_name'];
	$ext = get_ext($_FILES['file']['name']);	// ファイル名から拡張子を取得
	$target_file = basename($_FILES['file']['tmp_name'].$ext);
	$ja_file     = $_FILES['file']['name'];
	$target_file_fullpath =  $store_folder . $target_file;
	umask(0);									// 権限(パーミッション)を厳格にしたい時はこちらを変更
	move_uploaded_file($temp_file, $target_file_fullpath);
	echo "{$target_file}\t{$ja_file}";		// 英語ファイル名[TAB]日本語ファイル名 を返す
}

//========== _get_ext mime-typeを調べて拡張子を返す
function get_ext($file_name){
	$p = pathinfo($file_name);
	if ( isset($p['extension']) ){
		return '.'.$p['extension'];
	}
	else{
		return '';
	}
}

・ dropzone.css

dropzone.cssは以下のように作成しておきます

#image_drop_area {
	text-align: center;
	padding: 20px 0;
	height: 70px;
	width: 100%;
	color: #666;
	background-color: #f9f9f9;
	border: 4px dotted #bbb;
}
.dragover {
	color: #111               !important;
	background-color: #f1f1f1 !important;
	border: 4px dotted #777   !important;
}
.dz-preview {
	margin: 5px 0;
	padding: 10px;
	float: left;
	background-color: #F5F5F5;
	border-radius: 5px;
}
.dz-details {
	padding: 0;
}
.dz-filename , .dz-size, .dz-my-separator , .dz-remove {
	font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}
.dz-filename , .dz-my-separator, .dz-size , .dz-error-message {
	float: left;
}
.dz-my-separator {
	width: 20px;
	text-align: center;
}
.dz-size {
	margin-top: 1px;
}
.dz-progress {
	width: 500px;
}
.dz-progress .dz-upload {
	display: block;
	border: 5px solid #1E9BFF;
	border-radius: 2px;
}
.dz-remove {
	float: left;
	margin-left: 5px;
}
.dz-thumbnail {
	margin-bottom: 3px;
}
.fa-check-circle:before {
	color: #93C54B;
}
.dz-thumbnail , .dz-success-mark {
	display: block;
	float: left;
}
.dz-success-mark {
	height: 25px;
	margin-left: 5px;
}

2. htmlファイルからdropzoneを読み込み

(formタグのactionは dropzone_upload.phpである必要はありません。通常のフォーム送信CGIでOKです。)

<html>
<head>
<meta charset="UTF-8">
<title>dropzone test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.js"></script>
<script src="dropzone_config.js"></script>
<link href="dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="XXXXXX.XXX">
    <div id="image_drop_area" >ここにアップロードファイルをドロップ</div>
    <div id="preview_area" class="dropzone-custom"></div>
</form>
</body>
</html>

以上です。

No.982
02/04 16:14

edit

HTML5
フォーム
jQuery
Ajax
画像

JavaScript の getElement系メソッドによる HTMLタグ(DOMオブジェクト)の取得

JavaScriptでIDやタグ(DOMオブジェクト)を取得するとき

jQueryを使わないJavaScript本体では ・getElementsByTagName ・getElementsByName ・getElementById の3つのメソッドが使用できます。

DOMオブジェクト取得時には取得の成否を判別する必要があります。

使い方は以下のとおりです。

■ document.getElementsByTagName(タグ名によるDOMオブジェクトの取得)

<a href="#">テスト</a>
var obj_array = window.document.getElementsByTagName('a');
if (obj_array.length > 0){
  alert('Aタグは存在します。');
  for ( var i=0; i<obj_array.length; i++){
	  alert(obj_array[i].innerText);
  }
}
else{
  alert('Aタグは存在しません。');
}

■document.getElementsByName(name属性によるDOMオブジェクトの取得)
<input type="text" name="hoge_name">
if (window.document.getElementsByName("hoge_name").length > 0){
  alert('name="hoge_name"のタグが存在します。');
}
if (window.document.getElementsByName("fuga_name").length > 0){
  alert('name="fuga_name"のタグが存在します。');
}
else{
  alert('name="fuga_name"のタグが存在しません。');
}

■document.getElementById(ID名によるDOMオブジェクトの取得)
<div id="hoge_id"></div>
if (window.document.getElementById("hoge_id")){
  alert('id="hoge_id"のタグが存在します。');
}
if (window.document.getElementById("fuga_id")){
  alert('id="hoge_id"のタグが存在します。');
}
else{
  alert('id="hoge_id"のタグが存在しません。');
}
No.979
10/23 16:34

edit

フォーム
DOM
jQuery

入力途中のフォーム内容を保存して自動的に復元する 『Sisyphus.js』

『Sisyphus.js』はフォームへの入力途中に「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値をローカルDBに保存して復元してくれるjQueryプラグインです。

HTML5のローカルDBを使用しますので Windows IE は 8以上が必要です。 それ以外のモダンブラウザは全て問題なく動作します。

■ Sisyphus.js

http://sisyphus-js.herokuapp.com/

■ 使い方( input type="hidden" 以外の全てのフォームを自動で記憶する。)

<form id="FM">
</form>
$(function(){
	$( "#FM" ).sisyphus( {
		locationBased: false,
		excludeFields: $('input[type="hidden"]'),
		autoRelease: false
	} );
});
No.974
09/09 15:00

edit

フォーム
jQuery
HTML5

prototype.js の フォーム操作

1行テキストエリア(id="hoge")の値

<input type="text" name="hoge" id="hoge" value="999" >
// ◆ prototype.js
$F('hoge');

オプションメニュー(ドロップダウンリスト)(id="hoge")の値

// ◆ prototype.js
$F('hoge');

ラジオボタン(id="radio_id")の値の取得

// ◆ prototype.js
var data = $A(document.FM.radio_id).find(function(v) {return v.checked;});

単一チェックボックス(id=cb1)の値の取得

<label><input type="checkbox" id="cb1_id" name="cb1" value="あいうえお" />あいうえお</label>
// ◆ prototype.js
alert( $F('cb1') );

No.973
09/09 14:37

edit

prototype.js
フォーム

フォームのプレースホルダーをjQueryで再現する

HTML5のプレースホルダー(placeholder : 入力例)はブラウザによって挙動が違うためイマイチ使い勝手がよくありません。
そこでjQueryで同様のことを実現します。
さらに、フォーカス時に入力例が消えて、フォーカスが外れると入力例が再び表示される仕様にします。

■ 動作デモはこちら

HTML

<div style="position:relative;" >
<input type="text" class="placeholder_check">
<span class="placeholder">http://</span>
</div>

JS

$(function(){
$(".placeholder_check").each(function(){
if( $(this).val() ){
  $(this).next(".placeholder").hide();    
}
});
$(".placeholder_check").focus(function(){
  $(this).next(".placeholder").hide();
});
$(".placeholder").click(function(){
  $(this).prev(".placeholder_check").focus();
});
$(".placeholder_check").blur(function(){
  if($(this).val() == "") {
    $(this).next(".placeholder").show();
  }
});
});

CSS

.placeholder {
	display: block;
	white-space:pre;
	position: absolute;
	top: 9px;
	left: 30px;
	color: #bbb;
}

参考 : http://hack.aipo.com/?p=3005

添付ファイル1
No.964
07/23 09:54

edit

添付ファイル

jQuery
フォーム
HTML5

jQueryでフォームの全ての要素に入力や選択があるかどうかを調べる

関数 is_form_written を定義

function is_form_written(jq_obj){
	var tagname = $(jq_obj).prop("tagName");
	var type = $(jq_obj).prop('type');
	if (tagname==='SELECT'){
		if ( $(jq_obj).val() === '' ){ return false; }
		else{ return true; }
	}
	else if (tagname==='INPUT'){
		if (type==='radio'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='checkbox'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='text'){
			if ($(jq_obj).prop('value')!==''){ return true; }
			else{ return false; }
		}
	}
	else{
console.log($(jq_obj).prop("tagName"));
	}
}

以下のように呼び出して全ての要素(input , select , textarea)をチェックします

$('input,select,textarea').each(function(){
	if ( is_form_written(this) ){
		alert( $(this).prop('name') + ' は入力または選択済みです。');
	}
})
No.935
03/19 19:15

edit

jQuery
フォーム

jQueryでフォームの入力値をチェックする(Validation)プラグイン

● jQuery Validation Plugin

http://jqueryvalidation.org

● 日本語での解説

http://kudakurage.hatenadiary.com/entry/20091211/1260521031

● スクリプトの読み込み

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js

● 用意するHTML

<form name="FM">
<input type="text" name="hoge">
<input type="text" name="fuga">
</form>

● バリデーションの定義

$("#FM").validate({
	rules: {
		hoge: {
			required: true
		} ,
		'fuga': {
			required: true
		} 
	} ,
	messages: {
		hoge: {
			required: '入力してください。'
		} ,
		'fuga': {
			required: '入力必須項目です。'
		} 
	}
});

● 標準搭載されているバリデーションメソッド

required – Makes the element required.
remote – Requests a resource to check the element for validity.
minlength – Makes the element require a given minimum length.
maxlength – Makes the element require a given maxmimum length.
rangelength – Makes the element require a given value range.
min – Makes the element require a given minimum.
max – Makes the element require a given maximum.
range – Makes the element require a given value range.
email – Makes the element require a valid email
url – Makes the element require a valid url
date – Makes the element require a date.
dateISO – Makes the element require an ISO date.
number – Makes the element require a decimal number.
digits – Makes the element require digits only.
creditcard – Makes the element require a credit card number.
equalTo – Requires the element to be the same as another one

● 正規表現のバリデーションメソッドを追加する

$.validator.addMethod("myregex", function(value, element, reg_str) {
	var re = new RegExp(reg_str);
	return re.test(value);
}, "入力値が正しくありません");

バリデーション定義に以下のように記述

rules: {
	postal: {
		myregex: '^[0-9\-]+$'
	}
} ,
messages: {
	postal: {
		myregex: '郵便番号を正しく入力してください。'
	}
}

● バリデーションのルールを追加するには関数を定義します

jQuery.validator.addMethod('my_validation_func', function(value, element) {
	if ( XXXXX ){		// XXXXX にエラー判別ロジックを記述
			return true;	// trueが返るとエラーとならない
		}
	else{
		return false;	// falseが返るとエラー
	}
}, 'デフォルトのエラーメッセージ');

● エラー時にエラーのあったフォーム要素自身にエフェクトをかける

$("#FM").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn()
     })
  }
});

● フォームのハイライトを中止する

標準ではエラー時にフォーム要素に error というクラスが付加されますが、これがいらない場合は 空のfunction() を定義します。

$("#FM").validate({
    highlight: function(element, errorClass) {
    }
});

● 任意のタイミングでバリデーションを実行する

バリデーションの実行タイミングは ・フォーム Submit時 ・エラー後のフォーム内容変更時 ですが、任意のタイミングでバリデーションを実行するには valid()メソッドを実行すればOK。

<form id="FM">
$("#FM").valid();

● 特定のボタンが押された時など任意のタイミングでvalidationを停止する

$("#FM").validate().cancelSubmit = true;

● バリデーション required 条件の条件分岐1

下記のようにすると id="foo" のラジオボタンやチェックボックスがチェックされている時にだけバリデーションを行います

rules: {
  my_name : { required: '#foo:checked' } 
} ,

次のような指定方法があります

指定値 説明
#foo:checked id="foo" のラジオボタンやチェックボックスがチェックされている時
#foo:filled id="foo" のフォーム要素に何か文字(空白以外)が入力されている時
#foo:visible id="foo" のフォーム要素が表示されている時

● バリデーション required 条件の条件分岐2

rules: {
  my_name : { required: function() { return ($('#my_flg').val() === '1' ); } } 
} ,
messages: {
  my_name: { required: 'my_flgが『1』の時はmy_nameは空欄にはできません' } 
}

● フォームが送信され、バリデーションが実行され、その結果がOKだった場合に処理を行う

例 : #submit_button を非活性にします。

  submitHandler: function(form) {
    // ボタンを非活性
    $('#submit_button').prop('disabled', true);
    form.submit();
   }

● 複数あるテキストの全てが空の場合にエラーを出す

・やり方 1.(フォームの nameを同じにして require にする。 )

<input type="text" name="myform[]">
<input type="text" name="myform[]">
<input type="text" name="myform[]">
rules: {
	'myform[]': {
		required: true
	}
} ,
messages: {
	my_name: { required: '少なくともどれか1つに入力してください。' } 
}

・やり方 2.(フォームの nameを別にしたい場合は、 group_require を定義する。 )

クラス .group_require_1 のうちどれか1つに入力があるとヴァリデーションOKとなります。

<input type="text" name="textA" class="group_require_1">
<input type="text" name="textB" class="group_require_1">
<input type="text" name="textC" class="group_require_1">
jQuery.validator.addMethod("group_require", function(value, element, selector_name) {
  var v = '';
  $(selector_name).each(function( index ) {
    v += $( this ).val();
  });
  if ( v ){ return true; }
  else { return false; }
}, "このフィールドは必須です。");

rules: {
	'student_no[]': {
		group_require : '.group_require_1'
	} ,
messages: {
	my_name: {
		group_require: '少なくともどれか1つに入力してください。' 
	} 
}

● バリデーションルールの追加

validate()メソッドで初期化を行った後でルールを追加するにはadd()を使用します。

$("input[name=other_name]").rules("add", { required: '#other_radio:checked' }); //other_radio にチェックが有る時は必須とする

ルールとバリデーションエラーメッセージを合わせて追加する

$( "#myinput" ).rules( "add", {
  required: true,
  minlength: 2,
  messages: {
    required: "Required input",
    minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
  }
});
No.928
12/30 11:50

edit

フォーム
jQuery
エラー対処

フォームに適当な値を自動で入力するブックマークレット(フォーム自動入力BookMarklet)

Firefox の WebDeveloper みたいなのを、Safari, Google Chrome で利用したいときに。
(下記リンクをブックマークバーにドラッグしてください)

フォーム自動入力Bookmarklet


登録できてもうまく動作しない時は ↑フォーム自動入力Bookmarklet のアドレスをコピーして
ブックマークレットのアドレスに再度ペーストしてください。


No.665
06/16 16:07

edit

Bookmarklet
フォーム

Gmailのように「shift + クリック」でチェックボックスの複数選択を可能にするjQueryプラグイン

Gmailはチェックボックスを複数一気に選択したいときに先頭をまずクリックして、次に最後のチェックボックスを【シフト+クリック】するとその間にあるチェックボックスが一気に選択できて非常に便利なのですが、それをjQueryプラグインで実現するには以下のようにします。

● 1.jQueryをダウンロード

http://jquery.com/ からjQueryをダウンロードします。(ダウンロードしたファイル名を jquery.js とします。)

● 2. jQuery Field Plug-inをダウンロード

http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm から【jquery.field.js】をダウンロードします。

● 3. 以下のようなチェックボックスを含むhtmlを用意します

<form>
  <input type="checkbox" name="user_id" id="ch_1" value="1"><label for="ch_1">Option 1</label>
  <input type="checkbox" name="user_id" id="ch_2" value="2"><label for="ch_2">Option 2</label>
  <input type="checkbox" name="user_id" id="ch_3" value="3"><label for="ch_3">Option 3</label>
  <input type="checkbox" name="user_id" id="ch_4" value="4"><label for="ch_4">Option 4</label>
  <input type="checkbox" name="user_id" id="ch_5" value="5"><label for="ch_5">Option 5</label>
</form>

● 4. 用意したhtmlのヘッダに以下の記述を追加

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.field_j.js"></script>
<script>
	$(document).ready(
		function (){
			$('input[@name="user_id"]').createCheckboxRange();
		}
	);
</script>

以上で「シフト+クリック」による複数選択が実行できます。 とても便利。

また「シフト+クリック」実行後にコールバック関数を指定することもできます。

function (){
	$('input[@name="user_id"]').createCheckboxRange( function(){
		alert('選択完了');
	} );
}
No.591
08/07 10:06

edit

jQuery
フォーム

JavaScript で 動的に hidden属性<input type=”hidden” name=”name” value=”value”>を作成する

意外に登場する機会が多いので関数として登録しておく

● hidden属性を作成する make_hidden()

/**
 * make_hidden : hiddenを作成する : Version 1.2
 */
function make_hidden(name, value, formname) {
    var q = document.createElement('input');
    q.type = 'hidden';
    q.name = name;
    q.value = value;
    if (formname) {
    	if ( document.forms[formname] == undefined ){
    		console.error( "ERROR: form " + formname + " is not exists." );
    	}
    	document.forms[formname].appendChild(q);
    } else {
    	document.forms[0].appendChild(q);
    }
}

使い方:引数は( '名前' , '値', 'フォーム名' )

make_hidden('id', '1234');

とすると

<input type="hidden" name="id" value="1234">

が作成されます。

またHTMLファイル内に複数の<form>タグが存在する場合はフォーム名を指定して呼び出せばOK。

<form name="FM"></form>
<form name="SFM"></form>

の二つのフォームが存在する場合

make_hidden('id', '1234', 'SFM');

とすると name="SFM" の方にhiddenが作成されます

また作成した hidden 属性を削除するには以下の関数を使用します

● hidden属性を削除する delete_hidden()

// delete_hidden : hiddenを削除する : Version 1.1
function delete_hidden( name, value, formname ){
	var dom_obj_array = window.document.getElementsByName(name);
	for (var i=0; i<dom_obj_array.length; i++){
		if ( dom_obj_array[i].value === value ){
			element = dom_obj_array[i];
			element.parentNode.removeChild(element);
		}
	}
}

● hidden属性を作成する make_hidden() (既にある存在するフォーム名で作成しようとするとスキップ)

function make_hidden(name, value, formname, override_flag) {
  var q = document.createElement('input');
  q.type = 'hidden';
  q.name = name;
  q.value = value;
  var form_dom;
  if (formname) {
    form_dom = document.forms[formname];
  } else {
    form_dom = document.forms[0];
  }

  if ( ! override_flag ) {
    if (form_dom[name]) {
      console.log('フォーム(' + name + ')が既に存在するのでhiddenを作成しません。');
      return false;
    }
  }

  form_dom.appendChild(q);
  return true;
}

● jQueryを使用してhidden属性を作成する

$('<input>').attr({
    type    : 'hidden',
    name    : 'redirect_url',
    value   : redirect_url
}).appendTo('#after12_form');
No.540
11/12 14:08

edit

DOM
フォーム