聯繫表SVG提交按鈕不工作（按鈕標籤，而不是輸入標籤）

我有一個SVG動畫按鈕，提交按鈕的接觸形式。我發現與標籤標籤here一個整潔的解決方案，但可惜的標籤不允許它裏面的div。我搜索了網頁，並在按鈕標籤中找到了解決方案，該解決方案據稱與輸入提交功能相同。不幸的是，我不知道爲什麼它不起作用。如果我使用標籤解決方案對其進行測試，它會起作用，並且表單被提交，所以PHP部分似乎沒問題。聯繫表SVG提交按鈕不工作（按鈕標籤，而不是輸入標籤）

HTML：

<form method="post" action="resources/js/send_email.php" id="contact_form"> 
    <div class="row"> 
     <div class="col span-2-of-4"> 
      <input type="text" name="name" id="name" placeholder="Name" required> 
      <input type="email" name="email" id="email" placeholder="E-mail" required> 
    </div> 
    <div class="row"> 
     <textarea name="message" placeholder="Message" id="message" required></textarea> 
    </div> 
    <div class="row" id="send-btn"> 
     <div class="btn btn-main"> 
      <button type="submit" class="send-btn">  
      <svg> 
       <rect fill="none" width="100%" height="100%"/> 
      </svg> 
        SEND 
       </button> 
      </div>  
     </div> 
    </div>     
</form>

CSS：

.btn { 
    color: #c9234a; 
    cursor: pointer; 
    display: inline-block; 
    font-weight: 400; 
    line-height: 45px; 
    max-width: 240px; 
    position: relative; 
    text-decoration: none; 
    text-transform: uppercase; 
    vertical-align: middle; 
    width: 100%; 
    margin: 0 20px; 
    border-radius: 5px; 
} 

.btn p { 
    color: #373638; 
} 

.btn-main { 
    font-weight: 100; 
} 

.btn-main svg { 
    height: 45px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

.btn-main rect { 
    fill: none; 
    stroke: #c9234a; 
    stroke-width: 2; 
    stroke-dasharray: 422, 0; 
} 

.btn-main:hover { 
    background: rgba(225, 51, 45, 0); 
    font-weight: 700; 
    letter-spacing: 1px; 
} 

.btn-main:hover rect { 
    stroke-width: 3; 
    stroke-dasharray: 74, 380; 
    stroke-dashoffset: 85; 
    transition: all 1.35s cubic-bezier(0.35, 1, 0.1, 1); 
}

PHP：

<?php 
//we need to get our variables first 

$to  = '[email protected]'; //the address to which the email will be sent 
$name  = $_POST['name']; 
$email = $_POST['email']; 
$message = $_POST['message']; 
$subject = 'CONTACT FORMULAR'; 

/*the $header variable is for the additional headers in the mail function, 
we are assigning 2 values, first one is FROM and the second one is REPLY-TO. 
That way when we want to reply the email gmail(or yahoo or hotmail...) will know 
who are we replying to. */ 
$headers = "From: $email\r\n"; 
$headers .= "Reply-To: $email\r\n"; 

if ($_POST['submit']){  
if(mail($to, $subject, $message, $headers)){ 
    echo '<p>Thank you. We will answer your message in the shortest time possible.</p>'; // we are sending this text to the ajax request telling it that the mail is sent.  
}else{ 
    echo '<p>Something went wrong, go back and try again!</p>';// ... or this one to tell it that it wasn't sent  
} 
} 
?>

我沒有足夠的知識，以便您的幫助深表感謝！

來源

2017-05-31 Samo Abnormalno

2解決方案， 1.使用JavaScript來提交點擊事件的形式，在這種情況下，你可以使用幾乎任何觸發事件。

簡單JS例如

var form = document.getElementById("myFormId"); 
document.getElementById("myButtonId").addEventListener("click", function() { 
    form.submit(); 
});

節省單獨SVG和使用它作爲現有按鈕

SVG文件例如通知動畫如何是背景圖像保存在文件內

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="50px" height="50px" viewBox="0 0 128 128" xml:space="preserve"><g><path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z" fill="#ffffff" fill-opacity="1"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1200ms" repeatCount="indefinite"></animateTransform></g></svg>

CSS

.myButtonElement{ 
    background-image:url('path to my SVG'); 
}

第二種方法的缺點是，您將無法訪問CSS或JS目的的svg元素。

來源

2017-05-31 09:52:13

聯繫表SVG提交按鈕不工作（按鈕標籤，而不是輸入標籤）

回答

相關問題