我想让我的提交按钮成为href图像
[英]I want to make my submit button an href image
问题描述
I'm having a huge issue trying to figure out how to make this agreement form work. 
我试图弄清楚如何使这个协议形式起作用，这是一个巨大的问题。 It's designed so people have to accept the terms and conditions to submit it, if they don't check the box then the submit button becomes gray and unavailable. 它的设计使得人们必须接受提交条款和条件，如果他们不选中该框，则提交按钮变为灰色且不可用。 It works perfectly the way it is but now I want to substitute that submit button with this image 它完全按原样运行，但现在我想用这个图像替换提交按钮
it's like an order image that redirects you to the checkout page. 它就像一个订单图像，将您重定向到结帐页面。 I've done a lot of research but I don't seem to be getting the answers I'm looking for. 我已经做了很多研究，但我似乎没有得到我正在寻找的答案。 I've tried styling it and everything but nothing works. 我已经尝试过造型，但除了一切都没有效果。
I'd really appreciate your help, Thank you very much!! 我非常感谢你的帮助，非常感谢！
<html> <head> <script> function disableSubmit() { document.getElementById("submit").disabled = true; } function activateButton(element) { if(element.checked) { document.getElementById("submit").disabled = false; } else { document.getElementById("submit").disabled = true; } } </script> </head> <h6> Tube Cash Blueprint Agreement</h6> <body onload="disableSubmit()"> <input type="checkbox" name="terms" id="terms" onchange="activateButton(this)"/> Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a> <br/><br/> <input type="submit" name="submit" id="submit"/> </body> </html>
4 个解决方案
解决方案1
0 2017-02-03 20:56:09
Disabling the submit button is a bad idea, it can give issues for other areas such as accessibility. 禁用提交按钮是一个坏主意，它可以为其他方面提供问题，例如可访问性。
What you want is to have form validation and depending on your solution a required attribute. 您想要的是进行表单验证，并根据您的解决方案获得必需的属性。
Check out the following example which is doing what you are trying to achieve. 查看以下示例，该示例正在执行您要实现的目标。
http://www.the-art-of-web.com/html/html5-checkbox-required/ http://www.the-art-of-web.com/html/html5-checkbox-required/
解决方案2
0 已采纳
Try running the code snippet below, basically it is adding an image inside of the button. 尝试运行下面的代码片段，基本上是在按钮内添加图像。
<html> <head> <script> function disableSubmit() { document.getElementById("submit1").disabled = true; document.getElementById("submit2").disabled = true; } function activateButton(element) { if(element.checked) { document.getElementById(element.getAttribute("data-id")).disabled = false; } else { document.getElementById(element.getAttribute("data-id")).disabled = true; } } </script> </head> <h6> Tube Cash Blueprint Agreement</h6> <body onload="disableSubmit()"> <input type="checkbox" name="terms" id="terms" onchange="activateButton(this)" data-id="submit1"/> Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a> <br/><br/> <button type="submit" id="submit1" onclick="document.location.href='https://www.jvzoo.com/b/57051/250513/13';"><img src="https://i.jvzoo.com/57051/250513/13" alt="Submit"></button> <br/><br/> <input type="checkbox" name="terms" id="terms" onchange="activateButton(this)" data-id="submit2"/> Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a> <br/><br/> <button type="submit" id="submit2" onclick="document.location.href='https://www.jvzoo.com/b/57051/250513/13';"><img src="https://i.jvzoo.com/57051/250467/13" alt="Submit"></button> </body> </html>
解决方案3
0 2017-02-03 21:08:04
You don't need javascript, just HMTL5 and CSS 你不需要javascript，只需要HMTL5和CSS
<html> <head> <style type="text/css"> form:valid input[type="submit"]{ background: red; } </style> </head> <h6> Tube Cash Blueprint Agreement</h6> <body> <form action="#" onsubmit="alert('ok');"> <input type="checkbox" name="terms" id="terms" required /> Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a> <input type="submit" name="submit" id="submit"/></form> </body> </html>
解决方案4
0 2017-02-03 21:48:15
<html>
<head>
<script>
function disableSubmit() {
var checkbox = document.getElementById("terms");
activateButton(checkbox);
}
function activateButton(element) {
if(element.checked) {
document.getElementById("submitBtn").onclick = function() { submitForm(); };
}
else {
document.getElementById("submitBtn").onclick = function() { return false; };
}
}
function submitForm(element){
document.getElementById("testForm").submit();
}
</script>
</head>
<h6> Tube Cash Blueprint Agreement</h6>
<body onload="disableSubmit()">
<form id="testForm">
<input type="checkbox" name="terms" id="terms" onchange="activateButton(this)"/> Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a>
<br/><br/>
<a href="javascript:void(0)" id="submitBtn" ><img src="submit_button.gif" height="60px"></img></a>
</form>
</body>
</html>
You can use two different images, one for enable and another for disable and replace then dynamically using javascript. 您可以使用两个不同的图像，一个用于启用，另一个用于禁用和替换，然后使用javascript动态。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.