フォームからのAJAX呼び出しを期待通りに機能しないようにするためのjavascript関数の呼び出し

ここから、Javascript関数をHTMLから呼び出す最適な方法は、外部Javascriptファイル。だから、私はオンラインを見回し、自分のニーズに合わせて修正できる短いチュートリアルを見つけました。最終的に、私は次のHTMLコードを持っていました：フォームからのAJAX呼び出しを期待通りに機能しないようにするためのjavascript関数の呼び出し

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <title>Test Webpage</title> 
    </head> 

    <script LANGUAGE="Javascript"> 
     function createCard(input_form) { 
      alert("Card is being created!"); 
      $.ajax({ 
       url: "create_card.php", 
       type: "post", 
       data: {input_form.deck.value, input_form.card_name.value, input_form.front_text.value, input_form.front_media.value, input_form.back_text.value, input_form.back_media.value} 
      )}; 
    } </script> 

    <body> 
     <div> 
      <h2>Create a card</h2> 
      <form id="create_card_form" action="" method="GET"><!--action="create_card.php" method="post">--> 
       Deck: <input type="text" name="deck"><br><br> 
       Card Name: <input type="text" name="card_name"><br><br> 
       Front Text: <input type="text" name="front_text"><br><br> 
       Front Media (X: Image, Y: Video) <input type="text" name="front_media"><br><br> 
       Back Text: <input type="text" name="back_text"><br><br> 
       Back Media (X: Image, Y: Video) <input type="text" name="back_media"><br><br> 
       <input type="submit" value="CREATE CARD" onClick="createCard(this.form)"> 
      </form> 
     </div> 
    </body> 
</html>

しかし、関数は呼び出されません。警告は決して起こらないので、私はこれを知っています。私は間違って何をしていますか？

出典

2017-03-10 katztube

JavaScriptコンソールには何がありますか？ –

@DaveNewton： 'Uncaught SyntaxError：予期しないトークン.'それはフォーム要素の参照と関係がありますが、予期せぬ'が表示されません。 – katztube

'data：{input_form.deck.value、input_form.card_name 。値、input_form.front_text.value、input_form.front_media.value、input_form.back_text.value、input_form.back_media.value} ' – j08691

フォームからアクションを削除するか、そこからスクリプトを使用してみてください。

あなたの括弧/波括弧は、あなたが配列としてjavascriptオブジェクトを処理している

$.ajax({)};

出典

2017-03-10 20:38:33 iWillBeMaster

これは問題の一部ですが、主な問題は、配列を表すオブジェクト表記の使用方法のようです。 – DavidT

@DavidT最初の問題は、JavaScript構文が正しくないため、 'createCard'関数が作成されないことです。それがアラートが表示されない理由です。 @ JackA。 –

。この回答で指定されている修正は完全な修正ではなく、アラートはまだ表示されません。 – DavidT

確かに間違っています。

あなたは {input_form.deck.value, input_form.card_name.value, input_form.front_text.value, input_form.front_media.value, input_form.back_text.value, input_form.back_media.value}

に渡している代わりの配列ではJavaScript

に{}ない[]として表現されている[input_form.deck.value, input_form.card_name.value, input_form.front_text.value, input_form.front_media.value, input_form.back_text.value, input_form.back_media.value]

これを処理するための推奨方法は、あなたのフォームをシリアル化するために、次のようになります。

function createCard(input_form) { 
     alert("Card is being created!"); 
     $.ajax({ 
      url: "create_card.php", 
      type: "POST", 
      data: $(input_form).serialize() 
     }); 
    }

フルl作業コード：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test Webpage</title> 
    </head> 

    <body> 
     <div> 
      <h2>Create a card</h2> 
      <form id="create_card_form" action="" method="GET"><!--action="create_card.php" method="post">--> 
       Deck: <input type="text" name="deck"><br><br> 
       Card Name: <input type="text" name="card_name"><br><br> 
       Front Text: <input type="text" name="front_text"><br><br> 
       Front Media (X: Image, Y: Video) <input type="text" name="front_media"><br><br> 
       Back Text: <input type="text" name="back_text"><br><br> 
       Back Media (X: Image, Y: Video) <input type="text" name="back_media"><br><br> 
       <input type="submit" value="CREATE CARD" onClick="createCard(this.form)"> 
      </form> 
     </div> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script type="text/javascript"> 
      function createCard(input_form) { 
      alert("Card is being created!"); 
       $.ajax({ 
        url: "create_card.php", 
        type: "POST", 
        data: $(input_form).serialize() 
       }); 
      } 
     </script> 
    </body> 
</html>

出典

2017-03-10 20:52:22 DavidT

フォームからのAJAX呼び出しを期待通りに機能しないようにするためのjavascript関数の呼び出し

答えて

関連する問題