我要做一个按钮,采取行动并将数据保存到数据库中。
一旦用户单击按钮,我希望JavaScript警报提供“是”和“取消”选项。如果用户选择“是”,数据将被插入数据库,否则将不采取任何操作。
如何显示这样的对话框?
我要做一个按钮,采取行动并将数据保存到数据库中。
一旦用户单击按钮,我希望JavaScript警报提供“是”和“取消”选项。如果用户选择“是”,数据将被插入数据库,否则将不采取任何操作。
如何显示这样的对话框?
当前回答
用Yes和No按钮制作了一个超级简单的小香草js确认对话框。很遗憾我们不能定制本地的。
https://www.npmjs.com/package/yesno-dialog.
其他回答
您可以使用JavaScript拦截onSubmit事件。
然后调用确认警报,然后获取结果。
xdialog提供了一个简单的API xdialog.conf()。代码片段如下。更多演示可在此处找到
document.getElementById('test').addEventListener('click',test);函数测试(){xdialog.conf('确定吗?',function(){//如果选择“确定”/“是”,请在此处工作。。。console.info('Done!');}, {style:'宽度:420px;字体大小:0.8rem;',按钮:{ok:'是文本',cancel:'无文本'},oncancel:function(){console.warn('已取消!');}});}<link href=“https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css“rel=”stylesheet“/><script src=“https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js“></script><button id=“test”>测试</button>
用Yes和No按钮制作了一个超级简单的小香草js确认对话框。很遗憾我们不能定制本地的。
https://www.npmjs.com/package/yesno-dialog.
如何使用“inline”JavaScript执行此操作:
<form action="http://www.google.com/search">
<input type="text" name="q" />
<input type="submit" value="Go"
onclick="return confirm('Are you sure you want to search Google?')"
/>
</form>
避免内联JavaScript——改变行为意味着编辑代码的每一个实例,这并不漂亮!
更干净的方法是在元素上使用数据属性,例如dataconfirm=“Your message here”。下面的代码支持以下操作,包括动态生成的元素:
a并单击按钮表单提交选项选择
jQuery:
$(document).on('click', ':not(form)[data-confirm]', function(e){
if(!confirm($(this).data('confirm'))){
e.stopImmediatePropagation();
e.preventDefault();
}
});
$(document).on('submit', 'form[data-confirm]', function(e){
if(!confirm($(this).data('confirm'))){
e.stopImmediatePropagation();
e.preventDefault();
}
});
$(document).on('input', 'select', function(e){
var msg = $(this).children('option:selected').data('confirm');
if(msg != undefined && !confirm(msg)){
$(this)[0].selectedIndex = 0;
}
});
HTML格式:
<!-- hyperlink example -->
<a href="http://www.example.com" data-confirm="Are you sure you want to load this URL?">Anchor</a>
<!-- button example -->
<button type="button" data-confirm="Are you sure you want to click the button?">Button</button>
<!-- form example -->
<form action="http://www.example.com" data-confirm="Are you sure you want to submit the form?">
<button type="submit">Submit</button>
</form>
<!-- select option example -->
<select>
<option>Select an option:</option>
<option data-confirm="Are you want to select this option?">Here</option>
</select>
JSFiddle演示