单击 HTML 中的按钮以提交 MySQL 查询、更改背景和禁用按钮

【问题标题】：Click a button in HTML to submit MySQL query, change background, and disable button单击 HTML 中的按钮以提交 MySQL 查询、更改背景和禁用按钮
【发布时间】：2012-03-04 15:01:18
【问题描述】：

在我的网站上，用户可以搜索不同的食物，并且在搜索结果中，我有一个小加号，可以将该食物添加到他们的帐户中。我想这样做，所以当点击加号时，会运行一个数据库查询，将食物添加到他们的帐户中，将按钮的背景更改为复选标记（给他们反馈他们点击了按钮），然后禁用按钮所以他们不能再添加那种食物了。

【问题讨论】：

那么您有实际问题，还是遇到问题？你试过什么吗？还是您只是要求某人为您编写代码？

标签： php mysql html css

【解决方案1】：

<style>
.before
{
    background:url('plus.jpg'); 
}

.after
{
    background:url('tick.jpg');     
}
</style>        

    <script>
function add_food()
{   
jQuery.ajax({       
      url: 'addfood.php',
      type: 'POST',
      data: {'id':jQuery('#food_item').val()},
      success: function(html) {
        jQuery('#button').removeClass('before');
        jQuery('#button').addClass('after');
        jQuery('#button').attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
}
</script>

<input type="hidden" value="food_id" id="food_item" />
<input id="button" type="button" class="before" onclick="add_food();" />

我希望这是有道理的，至少应该让你开始

【讨论】：

不要忘记使用链接。例如在成功回调中：jQuery('#button').removeClass('before').addClass('after').attr('disabled', 'disabled')