联系表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
}
}
?>
我没有足够的知识,以便您的帮助深表感谢!
答
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元素。