2012-03-16 12 views
0

私はxformsでかなり新しいです。この質問は非常に簡単なようです。私は2つのテキストボックスとボタンコントロールを含むxformを持っています。ユーザーがフォームを送信すると、テキストボックスの値がxformモデルに保存されます。どのように私はこれを行うことができますか?XFormsのテキストボックスにユーザが入力した値を保存するには

コードを以下に示します。ボタンをクリックすると、モデル要素の値が変更されません。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:form="http://www.w3.org/2002/xforms"  xmlns:ev="http://www.w3.org/2001/xml-events" xml:lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="test.css" /> 
<script type="text/javascript" src="formfaces.js"></script> 


<form:model> 
    <form:instance> 
    <data xmlns=""> 
<textbox1>0</textbox1> 
<textbox2>1</textbox2> 
<textbox3>2</textbox3> 
<textbox4>3</textbox4> 
</data> 

</form:instance> 
<form:submission action="Text.html" id="submission" method="put" replace="instance"/> 
</form:model> 
</head> 


<body> 
<table> 
<tr> 
<td> 
<form:input ref="/data/textbox1"> 
<form:label>TextBox1</form:label> 
</form:input> 
</td><td> 
<form:input ref="/data/textbox2"> 
<form:label>TextBox2</form:label> 
</form:input> 
</td></tr> 

<tr><td><form:input ref="/data/textbox3"> 
<form:label>TextBox3</form:label> 
</form:input> 
</td><td><form:input ref="textbox4"> 
<form:label>TextBox4</form:label> 
</form:input> 
</td></tr> 



</table> 
<form:submit submission="submission"><form:label>Submit</form:label></form:submit> 


</body> 

</html> 
+0

@grtjnが言っているように、これは自動的に動作するはずですが、試してもうまくいかない場合は、コードを私たちと共有して問題を再現することができます。 – avernet

+0

私はコードを共有しました。返信してください、どうすればこのことができますか –

答えて

0

これは自動的に行われます。

モデルの変更をすぐに画面に表示しようとしている場合は、incremental="true"属性をxforms入力要素に追加して、各キーストロークが更新イベントを生成し、xforms出力要素も更新されるようにしてください。

が追加さ:

あなたがHTMLに提出されているように見えます。私はそれがフォーム自体を含むhtmlだと推測しています。モデルを更新するには、そのように呼び出す必要はありません。通常、PUTサブミットを使用してスクリプトを呼び出して、サーバーに格納します。 PUTは通常、何かを返しませんが、PUTしているもののコピーを返すことができます。

モデルが自動的に更新されることを示すために、コードに2つの重要な変更を加えました。フォーム入力のテーブルをコピーし、入力を出力に変更しました。また、各キーストロークの後に出力を更新するために、入力にインクリメンタル属性を追加しました。あなたはまた、私はCSSのビットを追加気づくかもしれないが、それはただの識別可能な出力のラベルと値を作ることです。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:form="http://www.w3.org/2002/xforms"  xmlns:ev="http://www.w3.org/2001/xml-events" xml:lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="test.css" /> 
<script type="text/javascript" src="formfaces.js"></script> 
     <style type="text/css"> 
      label { 
       display: block; 
       float: left; 
       clear: both; 
       text-align: right; 
       padding-right: 1em; 
       width : 110px; 
      } 
     </style> 


<form:model> 
    <form:instance> 
    <data xmlns=""> 
<textbox1>0</textbox1> 
<textbox2>1</textbox2> 
<textbox3>2</textbox3> 
<textbox4>3</textbox4> 
</data> 

</form:instance> 
<form:submission action="test.xml" id="submission" method="put" replace="instance"/> 
</form:model> 
</head> 


<body> 
<table> 
<tr> 
<td> 
<form:input ref="/data/textbox1" incremental="true"> 
<form:label>TextBox1</form:label> 
</form:input> 
</td><td> 
<form:input ref="/data/textbox2" incremental="true"> 
<form:label>TextBox2</form:label> 
</form:input> 
</td></tr> 

<tr><td><form:input ref="/data/textbox3" incremental="true"> 
<form:label>TextBox3</form:label> 
</form:input> 
</td><td><form:input ref="textbox4" incremental="true"> 
<form:label>TextBox4</form:label> 
</form:input> 
</td></tr> 



</table> 
<table> 
<tr> 
<td> 
<form:output ref="/data/textbox1"> 
<form:label>TextBox1</form:label> 
</form:output> 
</td><td> 
<form:output ref="/data/textbox2"> 
<form:label>TextBox2</form:label> 
</form:output> 
</td></tr> 

<tr><td><form:output ref="/data/textbox3"> 
<form:label>TextBox3</form:label> 
</form:output> 
</td><td><form:output ref="textbox4"> 
<form:label>TextBox4</form:label> 
</form:output> 
</td></tr> 



</table> 
<form:submit submission="submission"><form:label>Submit</form:label></form:submit> 


</body> 

</html> 

あなたには、いくつかの.aspスクリプトを参照して提出action属性の値を交換する場合それが呼び出され、要求本体内のインスタンス全体を受け取ります。置き換えられるので、完全なインスタンスを返すようにしてください。

HTH!

+0

私はコードを共有しましたが、動作しません。応答してください。 –

+0

ありがとう...!私が尋ねたいもう一つのこと。あなたは、私たちがサーバー上のxmlファイルに格納されている値を取得するためにput submitを使ってスクリプトを呼び出す方法を教えてください。私はxmlファイルから値をロードしようとしましたが、そのファイルに値を格納する方法はわかりません。私はサーバー側とデータベース用のasp.netを使用しています –

+0

@ zeeshan-hasan私は最後に段落を追加しました。私はそれがあなたがさらに助けてくれることを望みます。 – grtjn

関連する問題