formの送信ボタンをテキストにしたい・・・。

質問

タイトル通りなのですが、formの送信ボタンをテキストにしたいと思い、下記ページを見つけ試してみました。

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1213552117

ペストアンサーの方の方法で、リンクされていたページのソースも見てみたのですがボタンとしての機能を果たさずクリックしてもページ遷移せず、カーソルの変更（矢印から指マーク）もしませんでした。
ソースを見る限り、JavaScriptを別途記述しているわけでもないようです。

記述したソース（form部分）はこれです。
HTMLべたうちではなく、PHPでソースを生成しています。

<form action='./aaa/bbb/ccc.php' method='POST' name='abc' id='abc'>
<input type='hidden' name='flg' value='1' />
<span onclick='submit()'>メイン</span>
</form>

どの部分がおかしいなど指摘してもらえないでしょうか？

また、別の方法で<span>部分を<a>にしてタグの中にJavaScriptでsubmit()を記述する方法も試してみたのですが、画面遷移するもののhiddenで記述した値が無視されてしまいました。

解決方法や別の方法などありましたら教えていただければと・・・。
条件として、ブラウザのアドレス部分にhiddenの内容が表示されないようにしたいです。

回答No.1

aa_akiya · ベストアンサー

<form action='./aaa/bbb/ccc.php' method='POST' name='abc' id='abc'>
<input type='hidden' name='flg' value='1' />
<span onclick='document.getElementById("abc").submit()'>メイン</span>
</form>

上記のような変更でいかがでしょう。
getElementById("abc")の「abc」の部分は、フォームのidを記入します。

お礼

回答いただきありがとうございました。

私の書いたソースを元に回答をいただき、分かりやすく勉強になりました。
動作も、問題ないことを確認できました。

お三方の回答、全て求めていた表示、動作でしたので、最初に回答をいただいたaa_akiyaさんの回答をベストアンサーにさせていただきたいと思います。

ありがとうございました。

回答No.3

ORUKA1951

単純にスタイルシートに
input[type="submit"]{border:none;background-color:transparent;}
だけじゃまずいのですか？
HTMLに直接書いても
<input type="submit" value="送信" style="border:none;background-color:transparent;">
javaccriptが無効なブラウザでも関係ないし・・

お礼

回答をいただき、ありがとうございます。

背景色を透明色にするという考え自体がまったくなかったので、勉強になりました。
見た目がテキスト表示の場合と同様で動作も問題ないことが確認できました。
ありがとうございました。

回答No.2

yambejp

spanがformに包含されているのであれば上位にさかのぼって
formを送信する感じで・・・

<script>
function formsubmit(obj){
var n=obj;
while(n=n.parentNode){
if(n.nodeName=="FORM") break;
};
n.submit();
}
</script>
<form>
<div>
<input type='hidden' name='flg' value='1'>
<span onclick='formsubmit(this)'>メイン</span>
</div>
</form>

お礼

回答をいただきありがとうございます。

まったく考えが及ばないような方法で、勉強になりました。
実際にソースに組み込んでみて動作確認もできました。
ありがとうございました。