联系表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提交按钮不工作（按钮标签，而不是输入标签）

回答

相关问题