8

私がこのフォームを持っているとしましょう:

<form action="Change-status.php" method="post">
        <select class="changeStatus" name="changeStatus">
                <option value="0">Starting</option>
                <option value="1">Ongoing</option>
                <option value="2">Over</option>
        </select>
        <input class="projectId" type="hidden" name="projectId" value="<?php echo $data['id'];?>"/>
</form>

現在、このスクリプトを使用してフォームを送信していますが、更新することを意味します:

$('select').change(function ()
{
    $(this).closest('form').submit();
});

私がやりたいことは、ページを更新せずに変更を選択してフォームを送信することです。そのためにはAJAXを使用する必要があることは知っていますが、それを実装する方法を正確に理解できませんでした。

これを行う方法を教えてもらえますか？

ご協力いただきありがとうございます。

編集 ：

コメントを考慮した後、次のコードになりました。

HTML :

<form action="" method="post">
        <select class="changeStatus" name="changeStatus">
                <option value="0">Starting</option>
                <option value="1">Ongoing</option>
                <option value="2">Over</option>
        </select>
        <input class="projectId" type="hidden" name="projectId" value="<?php echo $data['id'];?>"/>
</form>

JS:

$(document).ready(function() {
    $('select.changeStatus').change(function(){
        $.ajax({
                type: 'POST',
                url: 'Change-status.php',
                data: {selectFieldValue: $('select.changeStatus').val(), projectId: $('input[name$="projectId"]').val()},
                dataType: 'html'
         });
    });
});

PHP:

<?php
    include('../Include/Connect.php');

    $changeStatus=$_POST['selectFieldValue'];
    $id=$_POST['projectId'];

    $sql='UPDATE project SET progress="'.$changeStatus.'" WHERE id="'.$id.'"';

    mysql_query($sql) or die("Erreur: ".mysql_error());
?>
4

1 に答える 1

8

クロス ブラウザーonchangeイベントと AJAX 要求を機能させることは簡単ではありません。なんらかの JavaScript フレームワークを使用することをお勧めします。このフレームワークは、クロス ブラウザーの問題をすべて抽象化して、心配する必要がないようにします。

js フレームワークを試す

Jquery.change()は、次のような要素の変更イベントにハンドラーをアタッチし、GET 要求を実行する<select>などのメソッドを持つフレームワークの 1 つです。.get()

ここにあなたが始めるためのちょっとしたコードがあります:-

// The $ is the shorthand for a jquery function, you can then use jquery 
// selectors which are essentially the same as css selectors, so here
// we select your select field and then bind a function to 
// it's change event handler
$('select.changeStatus').change(function(){

    // You can access the value of your select field using the .val() method
    alert('Select field value has changed to' + $('select.changeStatus').val());

   // You can perform an ajax request using the .ajax() method
   $.ajax({
       type: 'GET',
      url: 'changeStatus.php', // This is the url that will be requested

      // This is an object of values that will be passed as GET variables and 
      // available inside changeStatus.php as $_GET['selectFieldValue'] etc...
      data: {selectFieldValue: $('select.changeStatus').val()},

      // This is what to do once a successful request has been completed - if 
      // you want to do nothing then simply don't include it. But I suggest you 
      // add something so that your use knows the db has been updated
      success: function(html){ Do something with the response },
      dataType: 'html'
    });

});

私の説明よりも優れた参考文献

<script>このコードを機能させるには、タグを使用してページに jquery ライブラリを含める必要があることに注意してください。

jquery の使用に関するクイック スタート ガイドについては、こちらを参照してください。

ajax()jquery のメソッドの使用方法に関する初心者向けチュートリアルはこちら

于 2012-04-28T17:03:36.960 に答える