0

このフォームをajaxで送信するにはどうすればよいですか。

現在、mysql クエリからテーブルを作成しています。行の後ろにある [編集] ボタンをクリックすると、Javascript はすべてのセルを入力 = テキストにします。

行末の [送信] ボタンをクリックすると、編集したデータが ajax 経由で mysql に送信されます。

ajax で POST する必要があるデータをどこで取得すればよいかわかりません。

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
      $(".edit").click(function(){
          var tr = $(this).closest("tr");
          var submit = "<input type='submit' name='Submit' value='Submit' />";

          tr.find(".td").each(function(){
              var name = $(this).attr("title");
              var value = $(this).html();
              var input = "<input type='text' name='"+name+"' value='"+value+"' />";
              $(this).html(input);
          });

          tr.find(".button").html(submit);

      });
  });

// this is the id of the submit button
$(".button").click(function() {    

$.ajax({
       type: "POST",
       url: "index.php?page=update_mysql",
       data: $("#change").serialize(), // serializes the form's elements.
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

return false; // avoid to execute the actual submit of the form.
});
</script>

<form id="change" method="post" action="#">
    <table>

<?PHP
$sql="SELECT * FROM names";
$result = mysql_query($sql)or die(mysql_error());
  WHILE ($row = mysql_fetch_array($result, MYSQL_ASSOC))  {
        echo '<tr class="row">';
            echo '<td class="td" title="id">'.$row["id"].'</td>';
            echo '<td class="td" title="first_name">'.$row["first_name"].'</td>';
            echo '<td class="td" title="last_name">'.$row["last_name"].'</td>';
            echo '<td class="button" title="button"><button class="edit">Edit</button></td>';
        echo '</tr>';
  }
?>

    </table>
</form>

update_mysql.php は次のようになります。

<?php
include 'firewall.php';
if ($_POST['Submit'] == "Submit") {
$id = $_POST['id'];
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$sql_edit = "UPDATE names SET first_name = '$first_name', last_name = '$last_name' WHERE id = '$id'";
$result_edit = mysql_query($sql_edit) or die(mysql_error());

}

?>
4

2 に答える 2

2

これを試して。

$(document).ready(function(){
  $(".edit").click(function(){
    var tr = $(this).closest("tr");

    tr.find(".td").each(function(){
      var name = $(this).attr("title");
      var value = $(this).html();
      var input = "<input type='text' name='"+name+"' value='"+value+"' />";
      $(this).html(input);
    });

    var submit = "<input type='button' name='Submit' value='Submit' />";
    tr.find(".button").html(submit);

  });
});

$(".button input[type=button]").live('click', function() {
  var data = $('form#change').serialize();
  // post data using ajax                                                                                                                                                                         
  $.ajax({
    type: "POST",
    url: "index.php?page=update_mysql",
    data: data,
    success: function(data) {
      alert(data); // show response from the php script.                                                                                                                                          
    }
  });
});

注: 送信ボタンの「type」属性を「type='button'」に変更しました。それはブラウザのデフォルトの送信を起動しません。フォーム データを収集し、ajax を使用して送信するために、同じボタンがバインドされます。

ハッピーコーディング。

編集：

「index.php?page=my_page#」をクリックするとフォームが送信されます<input type="submit">。まだ変えてないの<input type="button">？フォームを送信するボタンがない場合は、送信ボタンは必要ありません。JavaScript ハンドラをバインドするための非送信ボタンは他にもあります。

于 2012-07-26T12:58:24.850 に答える
-1

jquery.serialize()を使用できます：

var data = $('form').serialize();
于 2012-07-26T12:51:05.907 に答える