私の提出ボタンを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にはフォーム要素がありませんので、送信ボタンの機能は何ですか？ 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-image）。 –

悪い考えでは、このようなアクセスなど、他の地域のために問題を与えることができます。

必要なのは、フォームの検証とソリューションに応じて必要な属性を設定することです。

達成しようとしている以下の例を確認してください。

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

出典

2017-02-03 20:56:09

あなただけHMTL5とCSSあなたは2枚の異なる画像、有効ための1つを使用することができます

<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

こんにちは@romulealdはあなたの答えをありがとう！これで、送信ボタンをこのに置き換えます。クリックすると画像が表示され、チェックアウトページに移動します。どうやってやるの？してくださいもう一度ありがとう！ – Katina

@Katinaディスプレイを使用します。入力とディスプレイに：block; on tha element – romuleald

あなたは宝石です@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>

、JavaScriptを必要としませんdの別のものそれからjavascriptを使って動的に置き換えてください。

出典

2017-02-03 21:48:15

私の提出ボタンをhref画像にしたい

答えて

関連する問題