HTML提交表单未将数据提交到相关页面

时间:2018-09-05 09:32:37

标签: html forms submit href

我正在尝试将模板联系表单添加到网站,但是无法获取要提交的自定义html表单。提交后,将显示“已提交联系表单”消息,但未收到电子邮件。如果将数据传递给的页面是独立运行的,但不是从表单运行的,则有任何想法吗?

<form id="form" method="post" action="contactengine.php">
<div class="success_wrapper">
    <div class="success-message">Contact form submitted</div>
    </div>
        <label class="name">
            <input type="text" name="Name" id="Name" placeholder="Name:" data-constraints="@Required @JustLetters" />
            <span class="empty-message">*This field is required.</span>
            <span class="error-message">*This is not a valid name.</span>
        </label>
        <label class="email">
            <input type="text" name="Email" id="Email" placeholder="E-mail:" data-constraints="@Required @Email" />
            <span class="empty-message">*This field is required.</span>
            <span class="error-message">*This is not a valid email.</span>
        </label>
        <label class="phone">
            <input type="text" name="Contact" id="Contact" placeholder="Phone:" data-constraints="@Required @JustNumbers"/>
        <span class="empty-message">*This field is required.</span>
        <span class="error-message">*This is not a valid phone.</span>
        </label>
        <label class="message">
            <textarea name="Message" id="Message" placeholder="Message:" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
        <span class="empty-message">*This field is required.</span>
        <span class="error-message">*The message is too short.</span>
        </label>
    <div>
    <div class="clear"></div>
    <div class="btns">
        <a href="#" data-type="reset" class="btn">Clear</a>
        <a href="#" data-type="submit" class="btn">Submit</a>                                   
    </div>
    </div>
</form> 

看不到用于提交表单数据的文件,并怀疑这可能是问题所在吗? “清除”按钮按预期工作。

我在下面设置了一个像这样的简单表单,它确实符合我的期望,但是公司希望该表单与网站的其余部分匹配,因此尝试以此方式进行。

<form  action="contactengine.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
Your name:<br>
<input name="name" type="text" value="" size="30"/><br>
Your email:<br>
<input name="email" type="text" value="" size="30"/><br>
Your message:<br>
<textarea name="message" rows="7" cols="30"></textarea><br>
<input type="submit" value="Send email"/>
</form>

以下是发送邮件的代码:

<?php

$EmailFrom = Trim(stripslashes($_POST['Email']));
$EmailTo = "grahamdrummond@sky.com";
$Subject = "Test Contact Form";
$Name = Trim(stripslashes($_POST['Name'])); 
$Tel = Trim(stripslashes($_POST['Contact'])); 
$Email = Trim(stripslashes($_POST['Email'])); 
$Message = Trim(stripslashes($_POST['Message'])); 

$Body  = 'MIME-Version: 1.0' . "\r\n";
$Body .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$Body .= 'From: '. $EmailFrom . "\r\n" . 'X-Mailer: PHP/' . phpversion();
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Tel: ";
$Body .= $Tel;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

$from = "$Email <>";
$headers  = "From: $from\r\n"; 

// send email 
mail($EmailTo, $Subject, $Body, $headers);

?>

2 个答案:

答案 0 :(得分:0)

您确定表格提交正确吗? $ _POST中是否有任何数据?

答案 1 :(得分:0)

目前,html中没有任何内容可以提交表单。检查此代码笔以找到一种方法:https://codepen.io/jonolayton/pen/mGMJeX

function submitted() {
  
  alert("The form has been submitted!");
  
}
<form id="form" method="post" action="contactengine.php">
<div class="success_wrapper">
    <div class="success-message">Contact form submitted</div>
    </div>
        <label class="name">
            <input type="text" name="Name" id="Name" placeholder="Name:" data-constraints="@Required @JustLetters" />
            <span class="empty-message">*This field is required.</span>
            <span class="error-message">*This is not a valid name.</span>
        </label>
        <label class="email">
            <input type="text" name="Email" id="Email" placeholder="E-mail:" data-constraints="@Required @Email" />
            <span class="empty-message">*This field is required.</span>
            <span class="error-message">*This is not a valid email.</span>
        </label>
        <label class="phone">
            <input type="text" name="Contact" id="Contact" placeholder="Phone:" data-constraints="@Required @JustNumbers"/>
        <span class="empty-message">*This field is required.</span>
        <span class="error-message">*This is not a valid phone.</span>
        </label>
        <label class="message">
            <textarea name="Message" id="Message" placeholder="Message:" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
        <span class="empty-message">*This field is required.</span>
        <span class="error-message">*The message is too short.</span>
        </label>
    <div>
    <div class="clear"></div>
    <div class="btns">
        <a href="#" data-type="reset" class="btn">Clear</a>
        <a href="#" data-type="submit" class="btn">Submit</a>                      
    </div>
    </div>
  <input type="submit" onclick="submitted()">
</form>

目前,您(我认为)正在尝试使用链接中的data属性:

<a href="#" data-type="submit" class="btn">Submit</a>

提交表格。但是,如果没有一些代码(通常是JavaScript)来对数据属性进行处理,则data属性不会自行提交表单。您可以在此处了解有关数据属性的更多信息:https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

您需要添加一些html或一些javascript(或同时添加这两种javascript),以便在点击时实际提交表单。