0

ボタンがクリックされたときに非表示/表示される入力を介してフィールドを編集できるようにするコードがあります。正常に動作しますが、ページ上のデータをローカルで変更するだけです（データベースは更新されません。つまり、ユーザーがプロファイルを編集すると、データベースに保存されます）。jqueryを使用して更新せずにフォームを送信する方法は知っていますが、誰かがフィールドを（その場で）編集できるように2つを組み合わせて、[完了]をクリックすると更新せずにフォームを送信する方法がわかりません（Facebookなど）。

問題は、「編集」ボタン（単なるアンカー）の下のコードを「保存」ボタンに変えてから「編集」に戻すことです。フィールドを送信しようと思ったのですが、ボタンを送信ボタンにする必要がありますか？

インプレース編集を行うために使用しているコードは次のとおりです。

$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
   var showNew = $('#changevalue').val();
   $('#altervalue').hide();
   $('#storedvalue').show();
   $('#storedvalue span').text(showNew);
});

そして、ここからチュートリアルを更新せずにフォームを送信する方法を学びました。希望する効果を得るためにそれらをどのように組み合わせるかはわかりませんが、これが問題に取り組む正しい方法であるかどうかはわかりません。showNewユーザーが送信ボタンをクリックせずに変数を取得して投稿として送信する方法はありますか（ユーザーが[保存]をクリックするとトリガーされる可能性があります）？

私はjqueryとWebプログラミングに非常に慣れていないので、この権利を説明していなければ申し訳ありません。それが役立つ場合は、上記のjsコードで機能するhtmlを次に示します。PHPjQueryの例：

<div id="wrapper">
   <div id="container">
      <div id="storedvalue"><span>Hello</span> [<a href="javascript:void(0);" id="editvalue">edit</a>]</div>
      <div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [<a href="javascript:void(0);" id="savevalue">save</a>]</div>
   </div>
</div>
4

1 に答える 1

1

私があなたを正しく理解している場合は、$（'＃savevalue'）。click（function（e）{...}）内のhttp://api.jquery.com/jQuery.post/で説明されているようにAJAX投稿を行うだけです。 `関数。このようなもの：

$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
    var showNew = $('#changevalue').val();
    $('#altervalue').hide();
    $.post("test.php", { val: showNew } );
    $('#storedvalue').show();
    $('#storedvalue span').text(showNew);
});

これにより、単一のフィールドがtest.phpページに投稿されます。成功/失敗のコールバックを追加して、すべてが期待どおりに行われたかどうかを確認することもできます（また、そうする必要があります）。

もちろん、この値は残りの部分についてはPHP側で処理する必要があります。

編集： http：//jsfiddle.net/X8Rsg/4/でのhtml生成を含む、より一般的なコードの例

于 2012-07-11T17:10:27.320 に答える