我想讓我的提交按鈕成爲一個href圖像

我有一個巨大的問題，試圖找出如何使這個協議形式的工作。它的設計使得人們必須接受條款和條件才能提交，如果他們沒有選中該框，那麼提交按鈕會變灰並且不可用。它的工作方式完全是這樣的，但現在我想用此圖像替代該提交按鈕我想讓我的提交按鈕成爲一個href圖像

這就像是一個訂單圖像，可將您重定向到結帳頁面。我做了很多研究，但我似乎沒有得到我正在尋找的答案。我嘗試過設計它，但沒有任何工作。

我真的很感謝你的幫助，非常感謝！

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

來源

2017-02-03 Katina

'' –

您的html沒有表單元素，那麼Submit按鈕的功能是什麼？您可以用一段Javascript代碼完成您的要求。 –

@Punit Sachan我只想把一個圖像，而不是一個提交按鈕，但給它的功能阻止用戶通過，如果不同意條款 – Katina

嘗試運行下面的代碼段，基本上它是增加按鈕的內部的圖像。

<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/570‌51/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/570‌51/250513/13';"><img src="https://i.jvzoo.com/57051/250467/13" alt="Submit"></button> 
 

 
</body> 
 
</html>

來源

2017-02-03 20:59:04

評論是不適合擴展討論;這個對話已經[轉移到聊天]（http://chat.stackoverflow.com/rooms/134899/discussion-on-answer-by-noah-i-want-to-make-my-submit-button-an- HREF圖像）。 –

禁用提交按鈕是一個壞主意，它可以給問題的其他領域，如可訪問性。

你想要的是進行表單驗證，並根據你的解決方案需要一個屬性。

看看下面的例子，它正在做你正在努力實現的。

http://www.the-art-of-web.com/html/html5-checkbox-required/

來源

2017-02-03 20:56:09

你不需要的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>

來源

2017-02-03 21:08:04 romuleald

Hello @romuleald非常感謝您的回答！現在，我想用此替換該提交按鈕這是他們點擊並將其帶到結帳頁面的圖像。我怎樣才能做到這一點？請再次謝謝！ – Katina

@Katina使用顯示：無;在輸入和顯示：塊; on tha 元素 – romuleald

你是一個gem @romuleald。這是我的代碼如何與您的更正https://www.screencast.com/t/rCQsaFvt9u，這是該網站如何看https：// www。screencast.com/t/rCQsaFvt9u 看起來很完美，但客戶端仍然可以通過檢查框，我希望這個圖像具有與提交按鈕相同的功能。如果他們沒有選中該框，圖像將不可用。請幫助我，你一直很有幫助。非常感謝！ – Katina

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

您可以使用兩種不同的圖像，一個用於啓用另一個是d是可行的，並使用JavaScript動態替換。

來源

2017-02-03 21:48:15

我想讓我的提交按鈕成爲一個href圖像

回答

相關問題