ajaxで更新後、valueの中が元に戻る

Question

お世話になります
前回こちらのサイトで「ｐｈｐで取得した複数のレコードをajaxで更新したい」と質問し、解答を頂いたのですが、その後また別の問題で上手くいかなくなっております
頼ってばかりで申し訳ありませんが、ご教示頂ければと思います

教えていただいたコード

<script src="http://code.jquery.com/jquery-latest.js"></script>
            <script>
            $(function(){
                var fd=new FormData();
                $('[name="id"]').each(function(){
                                fd.append("id[]",$(this).val());
                                });
                $('[name="name"]').each(function(){
                                fd.append("name[]",$(this).val());
                                });
            $.ajax({
                "url":"send1.php",
                "type":"post",
                "data":fd,
                "cache":false,
                "processData": false,
                "contentType": false,
                }).done(function(data){
                            alert(data);
                        });

            });
            </script>

<form method="post">
                <p><input name="id" value="1"></p>
                <p><input name="name" value="a"></p>
                <p><button type="submit" id="send" value="送信" >更新</button></p>
                </form>
                <form method="post">
                <p><input name="id" value="2"></p>
                <p><input name="name" value="b"></p>
                <p><button type="submit" id="send" value="送信" >更新</button></p>
                </form>
                <form method="post">
                <p><input name="id" value="3"></p>
                <p><input name="name" value="c"></p>
                <p><button type="submit" id="send" value="送信" >更新</button></p>
                </form>

<?php
    header("Content-type: text/plain; charset=UTF-8");
    
    if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])
       && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
    {
        // Ajaxリクエストの場合のみ処理する
        
        if (isset($_POST['id']))
        {

print_r($_POST['id']);
        }
        else
        {

            echo 'The parameter of "request" is not found.';
        }
    }
    ?>

これで複数のデータの受取方はわかったのですが、元のページのhtmlで更新ボタンを実行すると、入力した値ではなく、コードに書いてある <input name="id" value="2"> の valueの値に戻ってしまいます。
この部分を入力後の値でデータを渡すにはどうしたらいいのでしょうか？
よろしくお願い致します

Comments

[m.ts10806]

念のための確認ですが、htmlとphpが別々に提示されていますが、同じファイルではないですよね？

[satoshi501]

遅くなりすいません　はい、phpは受け取る方の別ファイルになります [send1.php]

Answer 1

元のページのhtmlで更新ボタンを実行する

スタティックに文字を与えているのですから更新（というより送信？）すれば
当然元の数字になります。
元のページがPHPであればvalueの値をセッションから渡すなどしてください

もしくは、更新ボタンの制御を横取りして、送信せずに単にajaxで送信するように
すれば手で入力した値を常にajaxで送るような運用も可能でしょう

sample

$(function(){
  $('form').on('submit',function(e){
    e.preventDefault();
    var fd=new FormData();
    $('form').each(function(){
      fd.append("id[]",$(this).find('[name=id]').val());
      fd.append("name[]",$(this).find('[name=name]').val());
    });
    $.ajax({
      "url":"send.php",
      "type":"post",
      "data":fd,
      "cache":false,
      "processData": false,
      "contentType": false,
    }).done(function(data){
      console.log(data);
    });
  }).eq(0).trigger('submit');
});

<form method="post">
<p><input name="id" value="1"></p>
<p><input name="name" value="a"></p>
<p><button type="submit" id="send" value="送信" >更新</button></p>
</form>
<form method="post">
<p><input name="id" value="2"></p>
<p><input name="name" value="b"></p>
<p><button type="submit" id="send" value="送信" >更新</button></p>
</form>
<form method="post">
<p><input name="id" value="3"></p>
<p><input name="name" value="c"></p>
<p><button type="submit" id="send" value="送信" >更新</button></p>
</form>

Comments

[satoshi501]

ありがとうございます！
解決できました

Answer 2

submitしているのでボタンを押すとformに何も指定していない場合、自身に対してPOSTします。
自身に対してPOSTしていてそれぞれのinput valueには固定値が入っているのでそのまま固定値が表示されます。
ajaxしたいのであればtype=submitをtype=buttonに変えて勝手に送信しないようにするのが手っ取り早いです。
※ボタンのクリックイベントを別途用意する必要があります。