HTML 表单在 Firefox 和 IE 上不返回任何内容（在 Chrome 上正常）答案

【问题标题】：HTML form returns nothing on Firefox&IE (ok on Chrome)HTML 表单在 Firefox 和 IE 上不返回任何内容（在 Chrome 上正常）
【发布时间】：2016-08-31 22:28:56
【问题描述】：

我的 HTML 中有这个表单：

<form action="/vcontent?topic={{ topic.name }}" method="post">
  {% if user and user.email in c.users_up %}
    <input type="image" src="icons/thumb-up.png" alt="Up!" name = "vote" value = "up" />
  {% else %}
    <input type="image" src="icons/thumb-up_gray.png" alt="Up!" name = "vote" value = "up" />
  {% endif %}
  {% if user and user.email in c.users_down %}
    &nbsp;<input type="image" src="icons/thumb-down.png" alt="Down!" name = "vote" value = "down" />
  {% else %}
    &nbsp;<input type="image" src="icons/thumb-down_gray.png" alt="Down!" name = "vote" value = "down" />
  {% endif %}
  <input name= "content_key" type="hidden" value="{{ c.key.urlsafe() }}">
</form>

当我尝试在 Chrome 上为内容投票时，它运行良好。当我通过以下方式获得价值时：

vote = self.request.get('vote')

我应该是“向上”或“向下”。

但是当我在 IE 和 Firefox 上做同样的事情时，我得到一个空字符串。

（HTML 中的 if/else 语句表示如果用户尚未对特定内容进行投票，则图标显示为灰色，否则为黑色）。

我正在使用 Jinja2 作为模板引擎开发 Google App Engine。

【问题讨论】：

您知道<input type="image" 会提交表单吗？
是的，它就是这样工作的。这是一个在按下时提交表单的图标。但它应该使用 vote = "up" 或 vote = "down"，而不是 vote = ""。

标签： html internet-explorer firefox jinja2

【解决方案1】：

试试这个。不要使用图像，而是使用按钮：

<style>button {height:32px; width:32px;}</style>

<form action="/vcontent?topic={{ topic.name }}" method="post">
  {% if user and user.email in c.users_up %}
     <button type="submit" style="background: url(icons/thumb-up.png)" title="Up!" name="vote" value="up" />
  {% else %}
     <button type="submit" style="background: url(icons/thumb-up_gray.png)" title="Up!" name="vote" value="up" />
  {% endif %}
  {% if user and user.email in c.users_down %}
    &nbsp;<button type="submit" style="background: url(icons/thumb-down.png)" title="Down!" name="vote" value="down" />
  {% else %}
    &nbsp;<button type="submit" style="background: url(icons/thumb-down_gray.png)" title="Down!" name="vote" value="down" />
  {% endif %}
  <input name= "content_key" type="hidden" value="{{ c.key.urlsafe() }}">
</form>

【讨论】：

谢谢！可以，但是把页面上的图标弄乱了，我试图用一些 CSS 来调整它们的大小，但它没有用。有没有办法让它使用图像而不是按钮？

【解决方案2】：

好的，我想我已经解决了，我将我的解决方案发布给可能想要这样做的人，这就是代码：

<form action="/vcontent?topic={{ topic.name }}" method="post">
  {% if user and user.email in c.users_up %}
    <input type="image" src="icons/thumb-up.png" alt="Up!" name = "vote" value = "up" />
  {% else %}
    <input type="image" src="icons/thumb-up_gray.png" alt="Up!" name = "vote" value = "up" />
  {% endif %}
  <input type="hidden" name = "vote" value = "up"/>
  <input name= "content_key" type="hidden" value="{{ c.key.urlsafe() }}">
</form>
<form action="/vcontent?topic={{ topic.name }}" method="post">
  {% if user and user.email in c.users_down %}
    &nbsp;<input type="image" src="icons/thumb-down.png" alt="Down!" name = "vote" value = "down" />
  {% else %}
    &nbsp;<input type="image" src="icons/thumb-down_gray.png" alt="Down!" name = "vote" value = "down" />
  {% endif %}
  <input type="hidden" name = "vote" value = "down"/>
  <input name= "content_key" type="hidden" value="{{ c.key.urlsafe() }}">
</form>

我基本上将第一部分管理赞成票的代码加倍，第二部分管理反对票。当我单击一个图标时，投票值将作为隐藏返回。我觉得加倍代码是不可避免的，否则无法根据按下的图标为隐藏值设置值。

【讨论】：