Question

说明

我正在创建一个网站，主要基于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.这只是一种形式。

修改

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

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

Answer 1

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

<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>

或者你可以考虑使用模态为用户提供更好的“弹出”。

Answer 2

我认为你需要这个：

<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>

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

说明

示例代码

2 个答案: