如果选择了选项，则单击按钮时打开弹出框

Posted 2023-02-24

【中文标题】如果选择了选项，则单击按钮时打开弹出框

【英文标题】：Open pop-up box on button click if an option is selected

【发布时间】：2014-08-19 12:01:28

【问题描述】：

说明

我正在制作一个网站，主要基于html，并有一个包含三个单选按钮和一个Submit Button 的表单。我希望如果用户点击提交按钮，pop-up box 应该说意见已提交。我是 html 新手，没有找到合适的答案。 javascript 或 CSS 可以。

示例代码

<form action="">
<b> What do you think is powerful on the other? </b> <br> 
<input type="radio" name="abc" value="1">Pros<br>
<input type="radio" name="abc" value="2">Cons <br>
<input type="radio" name="abc" value="3">Both are equal <br>
<input type = "Submit" value ="Submit">
</form>

这部分的设计、放置和外观都很好。我只需要知道如何在单击按钮时显示pop-up box，它应该说：“您的意见已提交！”。我不在乎用户选择了选项 1、2 还是 3。这只是一种形式。

编辑

但如果用户不选择任何选项，那就麻烦了。如何知道用户是否没有选择任何选项。在这种情况下，弹出框应显示“选择一个选项！”

如果有的话，实现这一目标的方法是什么？

【问题讨论】：

这个问题：***.com/questions/16849117/… 解决了完全相同的问题

【参考方案1】：

我认为你需要这个：

<form action="">
 <b> What do you think is powerful on the other? </b> <br> 
 <input type="radio" name="abc" value="1">Pros<br>
  <input type="radio" name="abc" value="2">Cons <br>
  <input type="radio" name="abc" value="3">Both are equal <br>
  <input type="submit" onclick="return alert('Your opinion was submitted')" />
</form>

这里是演示：http://jsfiddle.net/t56GZ/4/

或者这里是另一种选择：http://jsfiddle.net/DBHEz/208/

<form action="www.google.com"onSubmit="if(!alert('Your opinion was submitted'))return false;">
  <b> What do you think is powerful on the other? </b> <br> 
  <input type="radio" name="abc" value="1">Pros<br>
  <input type="radio" name="abc" value="2">Cons <br>
  <input type="radio" name="abc" value="3">Both are equal <br>
  <input type="submit" />
</form>

【讨论】：

感谢您的回答！您能回答我在问题中所做的编辑吗？

@KashishArora 请接受一些答案以完成您的问题。

【参考方案2】：

最快的选择是使用alert('Your opinion was submitted!') 添加onclick 属性，例如

<form action="">
<b> What do you think is powerful on the other? </b> <br> 
<input type="radio" name="abc" value="1">Pros<br>
<input type="radio" name="abc" value="2">Cons <br>
<input type="radio" name="abc" value="3">Both are equal <br>
<input type="Submit" value="Submit" onclick="alert('Your opinion was submitted!')">
</form>

或者，您可以考虑使用模式向用户呈现一个稍微好一点的“弹出窗口”。

【讨论】：

感谢您的回答。它肯定是我的方式。我已经编辑了我的问题。你能回答一下吗？