Category Archives: Web

JavaScript の変数を PHP に送信する

  By kawa | 2012年8月17日 - 5:43 AM | HTML, JavaScript, PHP, Web
Leave a comment

index.html の中の JavaScript のある変数 counter の値を send.php に送信したい場合がある。そんなのを書いてみた。

具体例 ← クリック！

やり方としては、form に onsubmit で関数Fを書いておいて、form 内ボタンが押された時に関数Fが呼び出されて、その関数内でhidden属性のvalueに値をセットする感じである。

index.html↓

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
		<script>
			var counter = 0;

			function get_javascript_variable(){
				document.forms['input_form'].elements['hidden_input'].value = counter;
			}
			
			function add()
			{
				counter += 1;
			}
		</script>
	</head>
	<body>
		<form name ="input_form" action="send.php" method="post" onsubmit="get_javascript_variable()">
			<p>
				<input type="submit" value="SHOW COUNTER!" />
				<br><br>
				<input type="button" value="ADD COUNTER" onclick="add()" />
				<input type="hidden" name="hidden_input" value="" />
			</p>
		</form>
	</body>
</html>

send.php↓
<?php
$num = isset($_POST['hidden_input']) ? $_POST['hidden_input'] : null;

print "num: " . $num;
?>

実行結果↓
num: 4

HTMLに動的にdivや文字列、input form、textareaなどを追加する方法

  By kawa | 2012年8月16日 - 1:12 AM | HTML, JavaScript, Web
Leave a comment

動的に追加したいときってありますよね。ボタンをぽちっと押すと、新しいフォームが出てきたりとか。そんなん作りました。

具体例←開いてみてください

ソース↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function add()
{
	var div_element = document.createElement("div");
	div_element.innerHTML = '<hr>Title: <br><input type="text" name="title" size="50" value="試験文字列"><br>Contents: <br><textarea name="contents" rows="30" cols="100">試験\n試験\n試験</textarea>';
	var parent_object = document.getElementById("piyo");
	parent_object.appendChild(div_element);
}
</script>
</head>
 
<body>

<div>
<button onclick="add();">このボタンを押して動的にUIを追加！</button>
</div>

<div id="piyo">
</div>

</body>
</html>

↑の簡単な解説:

function add() 1行目↓:
var div_element = document.createElement("div");
↑createElement で、div要素を作成して、div_element に格納しました。

function add() 2行目↓:
div_element.innerHTML = '<hr>Title: <br><input type="text" name="title" size="50" value="試験文字列"><br>Contents: <br><textarea name="contents" rows="30" cols="100">試験\n試験\n試験</textarea>';
↑先ほど作成した、div_element のなかに HTML を書き込んでいます。input や textarea、文字列でもなんでも詰め込み放題です。

function add() 3行目↓:
var parent_object = document.getElementById("piyo");

↑id=”piyo”の要素を捕まえています。具体例のHTMLのソースを見ると分かると思いますが、
<div id="piyo">
</div>

↑と、なっている箇所があります。ここのdivのidがpiyoなので、この要素を取得しています。parent_objectという変数に格納していますが、先ほど頑張って新しく作ったdiv要素を入れる箱になります。

function add() 4行目↓:
parent_object.appendChild(div_element);

↑先ほど作ったdiv_elementを、parent_object、つまりid=”piyo”のdivに詰め込んでいます。