BLOG ENTRY

JSでformに入力された値をPOSTしたりバリデーションかけたり

javascript

初歩的なスクリプトですが、けっこー使うとこ多いのでメモメモ。

『submit』や『button』を画像にしたい場合、formに入力された値やhiddenの値をJSで同じページ内でPOSTをするときに便利。

<?php
$value=$_POST['post_data'];
?>
<html>
<head>
<script type="text/javascript">
function test_Post(){
document.name1.submit();
}
</script>
</head>
<body>
<form name="name1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
<input type="text" name="post_data" />
<a href="javaScript:test_Post()"><img src="" alt="POSTボタン" /></a>
<p>↓↓これがPOSTされたデータ↓↓</p>
<p><?php echo $value; ?></p>
</body>
</html>

少し展開してメールアドレスのバリデーションをつけてみる。

<?php
$value=$_POST['email'];
?>
<html>
<head>
<script type="text/javascript">
function test_Post(){
if(!document.name1.email.value.match(/^[\w_-]+@[\w\.-]+\.\w{2,}$/)){
alert('正しいメールアドレスを入力して下さい。');
return;
}
document.name1.submit();
}
</script>
</head>
<body>
<form name="name1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
メールアドレス:<input type="text" name="email" />
<a href="javaScript:test_Post()"><img src="" alt="POSTボタン" /></a>
<p>↓↓これが正規表現チェックOKなメールアドレス↓↓</p>
<p><?php echo $value; ?></p>
</body>
</html>

WRITE COMMENT


(required)


(required)


(required)

MENU

veltica creative of twitter