Question

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

<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元素放在输入类型提交上方：

.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元素后面的提交按钮？

Answer 1

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

Answer 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

Answer 3

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

Answer 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>";

输入类型提交Div元素后面

4 个答案: