我想要得到一个确认消息点击删除(这可能是一个按钮或图像)。如果用户选择“Ok”,那么删除就完成了,否则如果点击“Cancel”,什么都不会发生。

当点击按钮时,我尝试回显这个,但是回显的东西使我的输入框和文本框失去了它们的样式和设计。


当前回答

对于选择选项框,要做到这一点要困难得多。 下面是解决方案:

<select onchange="if (this.value == 'delete' && !confirm('THIS ACTION WILL DELETE IT!\n\nAre you sure?')){this.value=''}">
    <option value=''> &nbsp; </option>
    <option value="delete">Delete Everything</option>
</select>

其他回答

当你在PHP和mysql中删除一些东西时,设置一个确认消息…

使用以下脚本代码:

<script>
    function Conform_Delete()
    {
       return conform("Are You Sure Want to Delete?");
    }
</script>

使用下面的HTML代码:

<a onclick="return Conform_Delete()" href="#">delete</a>

实践

<form name=myform>
<input type=button value="Try it now" 
onClick="if(confirm('Format the hard disk?'))
alert('You are very brave!');
else alert('A wise decision!')">
</form>

Web最初:

http://www.javascripter.net/faq/confirm.htm

<a href="javascript:;" onClick="if(confirm('Are you sure you want to delete this product')){del_product(id);}else{ }" class="btn btn-xs btn-danger btn-delete" title="Del Product">Delete Product</a>

<!-- language: lang-js -->
<script>
function del_product(id){
    $('.process').css('display','block');
    $('.process').html('<img src="./images/loading.gif">');
    $.ajax({
        'url':'./process.php?action=del_product&id='+id,
        'type':"post",
        success: function(result){
            info=JSON.parse(result);
            if(result.status==1){
                setTimeout(function(){
                    $('.process').hide();
                    $('.tr_'+id).hide();
                },3000);
                setTimeout(function(){
                    $('.process').html(result.notice);
                },1000);
            } else if(result.status==0){
                setTimeout(function(){
                    $('.process').hide();
                },3000);
                setTimeout(function(){
                    $('.process').html(result.notice);
                },1000);
            }
        }
    });
}
</script>

下面是纯JS中使用className和绑定事件的另一个简单例子。

var eraseable = document.getElementsByClassName("eraseable"); for (var i = 0; i < eraseable.length; i++) { eraseable[i].addEventListener('click', delFunction, false); //bind delFunction on click to eraseables } function delFunction(){ var msg = confirm("Are you sure?"); if (msg == true) { this.remove(); //remove the clicked element if confirmed } }; <button class="eraseable"> <img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;"> Delete me</button> <button class="eraseable"> <img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;"> Delete me</button> <button class="eraseable"> <img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;"> Delete me</button>

它非常简单,只有一行代码

<a href="#" title="delete" class="delete" onclick="return confirm('Are you sure you want to delete this item')">Delete</a>