私は数ヶ月前にライブラリを見つけましたが、今見つけられませんでした。 +側と - 側のボタンがあるフィールドと、入力が値を変更したときに、データベースを即座に更新するようにします。入力フィールドを手作業で編集したり、+と - ボタンで即座にデータベースエントリを変更する

マイナスボタンがX（この例では1）

によって入力フィールドを減少プラスボタンが（xで1入力フィールドを増やすことになるであろう
入力フィールドは、「ロックされている」ではなく手動で編集できる必要があります。

私はそれをあなたが下記を参照できるよう、マニュアルの方法をした：

$(function() { 
 
    $('.add').on('click', function() { 
 
    var $counter = $(this).closest('p').find('.counter'); 
 
    var currentVal = parseInt($counter.val()); 
 
    if (!isNaN(currentVal)) { 
 
     $counter.val(currentVal + 1); 
 
    } 
 
    }); 
 
    $('.minus').on('click', function() { 
 
    var $counter = $(this).closest('p').find('.counter'); 
 
    var currentVal = parseInt($counter.val()); 
 
    if (!isNaN(currentVal) && currentVal > 0) { 
 
     $counter.val(currentVal - 1); 
 
    } 
 
    }); 
 
});

#inputcounter { 
 
    line-height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <p> 
 
    <img src="http://i.imgur.com/olbGCog.png" width="20" height="20" id="minus" class="minus" /> 
 
    <input type="text" value="5" id="inputcounter" class="counter" /> 
 
    <img src="http://i.imgur.com/yZHYjWw.png" width="20" height="20" id="add" class="add" /> 
 
    </p> 
 
</body>

もっと徹底的1：http://jsfiddle.net/Ls3rhphr/

どのように私は、その後すぐに編集するために、上記を使用することができます入力が変更されたときに更新/送信ボタンをクリックすることなくデータベースを更新しますか？

出典

2016-04-14 Ryflex

[fiddle]（https://jsfiddle.net/Logan_Wayne/yzg1fLf8/2/）を確認できます。 –

短い答えajax http://api.jquery.com/jquery.ajax/ –

@LoganWayne彼はすでにその部分を持っています –

@Dagonがコメントに示唆したように、Ajaxを使用できるようにします。

関数を使用すると、値が変更されたときにAjaxスクリプトを書き直す必要はありません。

function updateNumber(id, newvalue){ 

    $.ajax({ /* START AJAX */ 
     type: "POST", /* METHOD TO PASS DATA */ 
     url: "update.php", /* PAGE WHERE TO PROCESS THE DATA; YOU CAN CHANGE THIS DIRECTORY DEPENDING ON WHERE YOU WANT TO SAVE YOUR UPDATE PAGE */ 
     data: {"id": id, "newvalue": newvalue} /* DATA TO BE PROCESSED */ 
    }); /* END OF AJAX */ 

}

（あなたがコメントで述べたように、あなたの<tr>にIDを保存することを、）あなたの行にIDを設定することも前提とします。私達はちょうど下のスクリプトで上記の関数を呼び出すことができます

<tr id="mem-1" data-artid="1">

：
今
$(function() { $('.add').on('click', function() { var $counter = $(this).closest('p').find('.counter'); var currentVal = parseInt($counter.val()); var id = $(this).closest('tr').attr('data-artid'); /* GET THE ID */ if (!isNaN(currentVal)) { $counter.val(currentVal + 1); newvalue = currentVal + 1; /* STORE THE NEW VALUE */ updateNumber(id, newvalue); /* CALL THE updateNumber FUNCTION */ } }); $('.minus').on('click', function() { var $counter = $(this).closest('p').find('.counter'); var currentVal = parseInt($counter.val()); var id = $(this).closest('tr').attr('data-artid'); /* GET THE ID */ if (!isNaN(currentVal) && currentVal > 0) { $counter.val(currentVal - 1); newvalue = currentVal - 1; /* STORE THE NEW VALUE */ updateNumber(id, newvalue); /* CALL THE updateNumber FUNCTION */ } }); });

、我々が作成しなければならないだけdata-artid我々はID を設定する - 私たちは、新しいタグを追加しますupdate.php。ここでデータベース内のデータを更新します。

$stmt = $con->prepare("UPDATE tableName SET inputcounter = ? WHERE id = ?"); /* JUST CHANGE THE TABLE NAME AND COLUMN NAME TO YOURS */ $stmt->bind_param("ii", $_POST["newvalue"], $_POST["id"]); $stmt->execute(); $stmt->close();

出典

2016-04-14 02:00:20

入力フィールドを手作業で編集したり、+と - ボタンで即座にデータベースエントリを変更する

もっと徹底的1：http://jsfiddle.net/Ls3rhphr/

答えて

関連する問題