formのボタンをsubmitしたときにアラート

質問

javascript で、formのボタンをsubmitしたときに
アラートが出るようにしたいと思います。
下記のように作ってみましたが、うまく動きません。
どのようにすれば動くでしょうか?
ご教示いただきたくお願いいたします。

<script type="text/javascript">
function(){
$('form1').submit(function(){
$.ajax({
type: 'POST',
data: postData,
url: 'buy.php',
success: function(data){alert("購入できました");}
error: function(){alert('購入できませんでした。再度お試しください');}
});
return false;
});
}
</script>

<form name="form1" id="form1" method="POST" name="form1" value="form1" action="buy.php">
<input type="hidden" name="id" value="100" />
<input type="hidden" name="name" value="高橋" />
<input type="submit" value="Save">
<form/>

回答No.2

Hanagefactory · ベストアンサー

> var postData = {id: $('#id').val(), name: $('#name').val()};
これじゃ取れないですね。失礼しました。

ちょっと冗長な書き方ですが
var postData = {id: $('#form1 input[name=id]').val(), name: $('#form1 input[name=name]').val()};
みたいにすれば値は投げられると思います。

お礼

有難うございます。
いろいろ弄りましたが、どうしても値が入りませんでした。
当方の方式は諦め、下記で試したところ上手くいきました。
http://ginpen.com/2013/05/07/jquery-ajax-form/
ご報告申し上げます。
アドバイス本当にありがとうございました。
深く御礼申し上げます。

回答No.1

Hanagefactory

残念ながらツッコミどころ満載ですね・・・。
ひとまず修正点を挙げておきます。

＊<script>タグ直後の「function(){（処理）}の括り」
jQueryをお使いだと思うのですが、document読み込み時に動作させたいのであれば、
「$(function() {（処理）});」でくくってください。
もしくはこの括りを削除してscriptタグを一番下に持ってくる。
そうしないと、この場合はformタグを認識しません。

＊「$('form1')」
この呼び出し方だと<form1>というタグにマッチさせようとします。
IDにマッチさせたい場合のjQueryのセレクタは
「$('#form1')」です。

＊「success」の後のカンマ
「success:（処理）」と「error:（処理）」の間にカンマが必要です。
「{}」は連想配列なので、
var hash = {
　a:1,
　b:2,
　c:3
};
のようにカンマで区切る必要があります。

----

と、まずはここまでが文法や書き方の致命的な間違い。
以下は認識されているとは思いますが念のため。

＊「postData」は定義されている？
ajax実行時に「data: postData」を設定していますが、
そもそも「postData」って変数は用意してますか？
用意してなければ別途取得する必要があります。

＊「<form/>」
閉じタグは「</form>」です。

----

上記を踏まえて以下のようにすればたぶん動くは動きます。
（便宜上インデントを全角スペースにしています。）

<script type="text/javascript">
　$(function(){
　　$('#form1').submit(function(){
　　　// 仮にidとnameのみ値を取得するようにしています。
　　　var postData = {id: $('#id').val(), name: $('#name').val()};
　　　$.ajax({
　　　　type: 'POST',
　　　　data: postData,
　　　　url: 'buy.php',
　　　　success: function(data){alert("購入できました");},
　　　　error: function(){alert('購入できませんでした。再度お試しください');}
　　　});
　　　return false;
　　});
　});
</script>

<form name="form1" id="form1" method="POST" action="buy.php">
<input type="hidden" name="id" value="100" />
<input type="hidden" name="name" value="高橋" />
<input type="submit" value="Save" />
</form>

補足

有難うございます。
早速、いただいたソースでテストしてみました。
やったことは下記の方法です。

1,上記のソースをコピーし、テキストファィルに貼り付ける
2,全角文字を置換(排除)
3,PHPに貼り付ける。

結果
アラートまでは出るのですが、なぜかPHPにトスができないようです。
(MYSQLにデータをトスできません)
javascriptを外すと問題なくトスできます。

大変お忙しいところ恐縮ですが、どこが悪いかお教え頂けますでしょうか?
本当に申し訳ございません。
宜しくお願い致します。