输入类型在 div 元素后面提交答案

【问题标题】：Input-Type Submit Behind Div Element输入类型在 div 元素后面提交
【发布时间】：2012-04-30 06:19:53
【问题描述】：

我曾经使用过输入类型提交，但现在我想将其更改为按钮样式。为此，我使用了以下代码：

<div class="cartbutton">
     <input type="submit" name="shortname" value="product1" class="add_to_cart" />
     <div class="buttoninner">
          <div class="buttontext">Add to Cart</div><div class="cartimage"></div>
     </div>
</div>

我使用下面的 CSS 将 buttoninner div 元素定位在 input-type 提交上方：

.cartbutton {
    position: relative;
    width: 178px;
}

.add_to_cart {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    cursor: pointer;
    height: 38px;
    opacity: 0;
    width: 177px;
    z-index: 2;
}

.buttontext {
    background-color: #333333;
    border: 0 none;
    color: white;
    cursor: pointer;
    float: left;
    font-family: "Segoe UI",helvetica,arial,sans-serif;
    font-size: 20px;
    padding: 5px 20px;
}
.cartimage {
    background-color: #F7941D;
    background-image: url("/Content/en-US/Sales/Images/small_cart.png");
    background-position: 5px 50%;
    background-repeat: no-repeat;
    float: left;
    height: 38px;
    width: 40px;
}
.buttoninner {
    position: absolute;
    top: 0;
    z-index: 1;
}

很遗憾，按钮帖子不起作用。如何激活 div 元素后面的提交按钮？

【问题讨论】：

标签： html input form-submit

【解决方案1】：

 why are you using div you can use 
 <input type="image" src="image path">
  it also works like submit

【讨论】：

div 因为我想在图像中使用文本。如果我们同时点击图片和文字，表单提交需要触发
通过点击事件查看我的另一个答案，它将对您有所帮助
以前我在放置 div 元素的内部使用了按钮标签。它在除 IE7 之外的所有浏览器中都能正常工作。但是 IE7 不支持按钮标签，所以只有我使用输入类型提交并将 div 元素放在它上面。现在我讨厌做点击事件，因为所有浏览器都支持普通按钮发布，除了 IE 7。
所以使用上述输入图像类型的情况，并通过 css 添加或控制您要添加的文本

【解决方案2】：

<div class="cartbutton" >
 <input type="submit" name="shortname" value="product1" class="add_to_cart" />
 <div class="buttoninner">
 <div class="buttontext">Add to Cart</div><div class="cartimage"></div>
 </div>
 </div>

 <script type="text/javascript">
 $('.cartbutton').click(function(){
 $('#formid').submit();
  });
  </script>
 use jquery

【讨论】：

【解决方案3】：

原因似乎是因为您的按钮实际上没有被点击，因为您在它上面覆盖了 div。您可以做的只是给您的 div 一个 onclick 事件并通过它处理提交操作。在这种情况下，您将不需要单独的提交按钮

【讨论】：

【解决方案4】：

你可以在 php echo 的任何地方创建一个按钮或者打印它。 css类可以根据需要进行修改。

print "<div class='links' id='edit-submit'><input type='button' class='form-submit' value='Signup to Invitation' onClick=\"location.href='?q=rsvp/".$rsvp->rid."/register';\" \></div>";

【讨论】：