ワンクリックでlocalStorageとポストテキストエリアに書き込む方法は？

私は、テキストエリアのある/choiceハンドラと、返された情報をデータベースに書き込む/choicehandlerというハンドラを持っています。しかし、フォームを投稿する前に、ユーザ名をlocalStorageに書きたいと思います。ワンクリックでlocalStorageとポストテキストエリアに書き込む方法は？

これは形式です：

クリックで

<form name="choice_form" action="/choicehandler" method="post"> 
    <textarea name="choice" rows="7" cols="50"></textarea><br /> 
    <input type="submit" value="submit your choice"> 
</form>

私は、ユーザーにユーザー名を割り当て、writeToStorage()でlocalStorageにそれを書きたい：

<head> 
<script type="text/javascript"> 

var count = 0; 

function writeToStorage() 
{ 
    user = "user" + count; 
    count++; 
    localStorage.setItem("chooser", user); 
}; 

</script> 
</head>

どのように私は何について混乱していますがありますonclick="writeToStorage()"を使用してwriteToStorage()に電話をかけ、同時にフォームにaction="/choicehandler"を付けてください。

これを達成する正しい方法は何ですか。私はGoogle App Engine（Python）を使って作業しています。これを解決したあと、後で/choicehandlerにajax呼び出しを追加します。要約として

、私はワンクリックで/choicehandlerにlocalStorageとpostにjavascriptの変数userテキストエリアを書きたいです。

UPDATE

私はjohn_doe's answerをしようとしていますが、writeToStorage()は解雇されることはありません。私は間違って何をしていますか？ハンドラの完全なコードは次のとおりです。

class Choice(webapp.RequestHandler): 
    def get(self): 
     self.response.out.write(""" 
<html> 
    <head> 
<script type="text/javascript"> 

var count = 0; 

function writeToStorage() 
{ 
    alert("count: " + count); 
    user = "user" + count; 
    //this line was giving an error; now it is fixed 
    //alert("user: " + user and "count: " + count); 
    alert("user: " + user + " and count: " + count); 
    count++; 
    localStorage.setItem("chooser", user); 

}; 
</script> 

    </head> 
    <body> 


<form name="choice_form" id="choice_form" action="/choicehandler" method="post" onsubmit="writeToStorage()"> 
    <textarea name="choice" rows="7" cols="50"></textarea><br /> 
    <input type="submit" value="submit your choice"> 
</form>""") 

     self.response.out.write(""" 
    </body> 
</html>""")

出典

2011-11-12 Zeynel

現在の技術には何が問題なのですか？ – lonesomeday

'onclick =" writeToStorage（） "'を使用する方法がわかりません – Zeynel

は、フォームが送信されます右の前に、あなたの関数が呼び出さましょう。

<form name="choice_form" action="/choicehandler" method="post" onsubmit="writeToStorage()"> 
    <textarea name="choice" rows="7" cols="50"></textarea><br /> 
    <input type="submit" value="submit your choice"> 
</form>

出典

2011-11-12 20:40:18 Andreas

私はこれを試してきましたが、 'writeToStorage（）'は決して起動しません。私は間違って何をしていますか？私は努力しているコードで質問を更新しました。 – Zeynel

エラーが見つかりました。警告の1つに誤った引用がありましたが、今はすべて動作しています。ありがとう。 – Zeynel

フォームの送信時にここで何が起こるか詳しく説明できますか？私がPOSTとXHRを取得しようとすると、同時にそれらを得ることはできません。フォームが2回送信されたようです。これは質問です：http://stackoverflow.com/questions/8114926/can-i-test-xmlhttprequest-in-sdk-with-localhost – Zeynel

あなたは機能を少し変更できます（これを行う方法はたくさんあります）。その後、自分のフォームを送信する行を追加し、フォーム（idは=「choice_form」）にIDを追加します。

function writeToStorage() {  
    user = "user" + count;  
    count++;  
    localStorage.setItem("chooser", user); 
    document.getElementById("choice_form").submit(); 
}

出典

2011-11-12 20:36:25 Prescott

このバージョンを試しましたが、john_doeと 'writeToStorage'は起動していません。私は ''に書き込んでみましたが、それも役に立たなかった。私は間違って何をしていますか？ – Zeynel

アラートの1つに誤った引用がありましたが、現在は動作しています。ありがとう。 – Zeynel

ワンクリックでlocalStorageとポストテキストエリアに書き込む方法は？

答えて

関連する問題