jsでカスタマイズされたフォームのsubmitで

質問

javascriptでフォームをカスタマイズしました。
ソース上は単純にinput type=file id="btnUpload"のタグのみがあるのですが、jsが読み込まれると、元々あったタグの上に、ファイルパス表示用のinput type=text id="dummy_txt"　とアップロードボタン用のimg id="dummy_btn"が被せられます。

操作していて気付いたのですが、Windows7でIE9の環境だと投稿ボタンを押すと、フォーカスが#dummy_txtに飛んでしまい、#btnUploadの値が消えてしまいます。

そのまま投稿ボタンを押すと、ファイルパスがなくなっていることから選択されていないというエラーになってしまいます。
このファイルパスが消されないようにするための方法はありますか？

回答No.3

LancerVII · ベストアンサー

こんにちは。

補足ありがとうございました。
ダウンロードして試してみました。
私のWindows7+IE9ではきちんとファイルも送信されていました。

>そのまま投稿ボタンを押すと、ファイルパスがなくなっていることから選択されていないというエラーになってしまいます。
何かエラーチェック等行なっているのでしょうか。

その辺もわかると解決できるかもしれません。
ただ、特定の環境とのことで、こういったプラグインのようなものを使う場合は修正が難しいかもしれません。

お礼

>私のWindows7+IE9ではきちんとファイルも送信されていました。

本当ですか！？

>何かエラーチェック等行なっているのでしょうか。

電話番号や、担当者名などの必須入力チェック等を行っております。
その辺の処理を担当している人間に聞いてみます。
ありがとうございます！

補足

>そのまま投稿ボタンを押すと、ファイルパスがなくなっていることから選択されていないというエラーになってしまいます。
何かエラーチェック等行なっているのでしょうか。

これについてですが、送信ボタンを押すと、#dummy_txtにフォーカスが遷移してしまい、元々の#bt-uploadにあったファイルパスが消えちゃってるようなんです。。。
このフォーカス遷移をさせないようにすれば、またなんとかなるかもとは思うのですが。。。

回答No.2

fujillin

何をしているのか理解できていないjavascriptなどを利用するよりも、普通にHTMLで記しておいて、デザイン的にはCSSを利用して表示するのがよろしいのではないでしょうか。

javascriptはオフにしている閲覧者もいるので、頼りすぎると本来の機能が果たせなくなる場合があります。

お礼

どうもアドバイスありがとうございます！気をつけます。

回答No.1

LancerVII

こんにちは。

>javascriptでフォームをカスタマイズしました。

どのようなフォームをどのようなJavaScriptでカスタマイズしたのでしょうか。
情報が少なすぎて回答が付きにくいと思います。

もう少し詳しい情報を補足ください。

お礼

説明不足ですみません。カスタマイズしたと表現しましたが、niceform.jsというものを利用しました。
IE８や9でも動いたので、利用してたら、Windows7＋IE9がダメだったので、今回の質問として投稿させてもらいました。

フォームの内容は個人のプロフィールを掲載するための登録ページになってまして、画像をアップロードできるようにしています。
niceform.jsを使用しなければ問題ないのですが、デフォルトのフォームパーツだと味気ないですし、input type=fileをCSSだけでデザインするのは、ブラウザ毎に違うため、デザイン通りにならないですし。。。