ボタンを画像にすると、Internet Explorer 8では、期待通りの動作をしない

formタグ内のボタンが、最終的には画像にする予定で、開発初期は

<input type='submit' name='next' id='next' value='next'>

として、submitのボタンとしていました。

予定通りの動作をするようになったので、見た目の調整の一環として、ボタンを予定通り画像にするために、

<input type='image' name='next' id='next' src='./next.jpg' value='next'>

としました。

現象

Google Chromeでは動作していたので、他のブラウザも大丈夫かとInternet Explorer 8で動作を確認しました。

その結果、formをsubmitはしていますが、nextのvalueがPOSTされていないようで、期待通りの動作をしませんでした。

対策

隠し要素として

<input type='hidden' name='hidden_next' id='hidden_next' val=''>

をformに追加して、idがnextのボタンがクリックされたら、

$(document).ready(function() {

    $('#next').click(function() {

        $('#hidden_next').attr('value', 'next');

    });

});

として、 hidden_nextのvalueをセットしてPOSTするようにしました。

hidden_nextのvalueを受け取った側の処理は、nextと同じ処理をするようにして、期待通りの動作をするようになりました。

Internet Explorer 8の動作が正しいのか、Google Chromeの動作が正しいのかまでは調べていませんが、Google Chromeの動作の方が、コード量が少なくて済むのでありがたいです。