フォームの入力内容の後ろに文字を追加したい

質問

いつもお世話になります。
KENTWEBのClipMailを使ってフォームメールを作っています。
http://www.kent-web.com/data/clipmail.html

郵便番号のフォームを以下のように作っているのですが、
<input name="zip" type="text">-<input name="zip" type="text">
こちらですと確認画面及び送信データの形式が「0000000」となります。
できれば「000-0000」というように受け取りたいと思っているのですが、間に任意の文字を挿入することは可能なのでしょうか。

inputをひとつにまとめてユーザーにハイホンを入れてもらう方法以外で解決方法をご存知の方がいらっしゃいましたら、ご教示ください。
よろしくお願いします。

回答No.2

ryu_chan · ベストアンサー

お使いのスクリプトでは、質問者さんの例から、同じname属性の場合、単純に連結しているように思えます。

そこで、間にvalueが ”-” のhidden属性を入れてみるのはいかがでしょうか？
所望の結果は得られますでしょうか？

数値入力制限というJavaScriptもおまけで付けてみました＾＾

<script type="text/javascript">
function check_zip(zip_input, digits) {
var code = zip_input.value;
var len = code.length;

if ( !code.charAt(len - 1).match(/^\d$/) || len > digits ) {
code = zip_input.value = code.substr(0, len - 1);
}

if ( digits == 3 && code.length == 3 ) {
document.getElementsByName("zip")[2].focus();
}
}
</script>

<input name="zip" type="text" onkeyup="check_zip(this, 3)"><input type="hidden" name="zip" value="-">-<input name="zip" type="text" onkeyup="check_zip(this, 4)">

お礼

回答ありがとうございます。
無事にひとつにつなげることができました。
javascriptもありがとうございます。使わせていただきます。
それでご厚意に甘えて、もうひとつ教えていただけませんでしょうか。
上記方法で入力した場合、結果が「000 - 0000」とハイホンの左右に半角スペースが空いてしまいます。
できればこちらをとりたいのですが、可能でしょうか。
もしご存知でしたら教えてください。
よろしくお願いします！

回答No.3

ryu_chan

ハイフンの前後に半角スペースが入るとのことですが、これはそのスクリプトの実装がそうしているからだと思います。

スクリプトの中身を少し見てみましたが、おそらく以下の部分を変更すればいいのではないかと思います。

lib/preview.plの111行目の

$in{$key} =~ s/\0/ /g;
　　　↓　　　↓
$in{$key} =~ s/\0//g;

に変更。

お礼

再度のご回答をありがとうございます。
お礼が遅くなり、申し訳ありません。
考えていただいた方法ではうまくいかなかったのですが、lib/preview.plの空白をひとつずつ削っていってみようと思います。
今回は本当にありがとうございました！

回答No.1

ORUKA1951

nameは同じものを使うと、処理方法にもよりますが上書きされたり連結したりします。
　通常は、７桁をそのまま入力してもらって、３桁と４桁に分けるほうがよいでしょう。

お礼

回答ありがとうございます。
7桁のものを分けるということもできるのですね！
今回は別の方法を採用しましたが、次の機会に調べたいと思います。
ありがとうございました。