javascript - JQuery/PHP 表单未提交

标签 javascript php jquery html forms

我正在制作一个网站 Modestewebstudio.com

在网站的联系部分,我有一个表单,我正在尝试使用 jQuery 和 pHp 提交该表单。由于某种原因,该表格未提交。验证工作正常,但每当我点击提交时,什么也没有发生。

$(document).ready(function () {

$(window).load(function() { $("#load").fadeOut("slow"); });
    
var fadeInElement = function(id) {
    $('#' + id).fadeIn();
};
    
//HOME-------------------------------------------------

$(".home").click(function () {
    $('#about, #works, #contact').filter(":visible").fadeOut();
    fadeInElement('home');
});
    
//ABOUT------------------------------------------------
    
$(".about").click(function () {
    $('#home, #works, #contact').filter(":visible").fadeOut();
    fadeInElement('about');
});
    
//WORKS------------------------------------------------

$(".works").click(function () {
    $('#home, #about, #contact').filter(":visible").fadeOut();
    fadeInElement('works');
});
    
//CONTACT----------------------------------------------
   
$(".contact").click(function () {
    $('#home, #about, #works').filter(":visible").fadeOut();
    fadeInElement('contact');
});
    
<!--//--><![CDATA[//><!--  
$('form#contact-us').submit(function() { 
    $('form#contact-us .error').remove();  
    var hasError = false;  
    $('.requiredField').each(function() {  
        if($.trim($(this).val()) == '') {  
            var labelText = $(this).prev('label').text();  
            $(this).parent().append('<span class="error">Your '+labelText+' is missing.</span>');  
            $(this).addClass('inputError');  
            hasError = true;  
        } else if($(this).hasClass('email')) {  
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
            if(!emailReg.test($.trim($(this).val()))) {  
                var labelText = $(this).prev('label').text();  
                $(this).parent().append('<span class="error">Your '+labelText+' is invalid.</span>');  
                $(this).addClass('inputError');  
                hasError = true;  
            }  
        }  
    });
    if(!hasError) {
        var formInput = $(this).serialize();
        $.post($(this).attr('action'),formInput, function(data){
            $('form#contact-us').slideUp("fast", function() {				   
                $(this).before('<p>Your email has been delivered!</p>');
            });
        });
    }
		
    return false;	
});
//-->!]]>
//-----------------------------------------------------    
});
<?php 
error_reporting(E_ALL ^ E_NOTICE); // hide all basic notices from PHP

//If the form is submitted
if(isset($_POST['submitted'])) {
	
	// require a name from user
	if(trim($_POST['contactName']) === '') {
		$nameError =  'Forgot your name!'; 
		$hasError = true;
	} else {
		$name = trim($_POST['contactName']);
	}
	
	// need valid email
	if(trim($_POST['email']) === '')  {
		$emailError = 'Forgot to enter in your e-mail address.';
		$hasError = true;
	} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
		$emailError = 'You entered an invalid email address.';
		$hasError = true;
	} else {
		$email = trim($_POST['email']);
	}
		
	// we need at least some content
	if(trim($_POST['comments']) === '') {
		$commentError = 'You forgot to enter a message!';
		$hasError = true;
	} else {
		if(function_exists('stripslashes')) {
			$comments = stripslashes(trim($_POST['comments']));
		} else {
			$comments = trim($_POST['comments']);
		}
	}
		
	// upon no failure errors let's email now!
	if(!isset($hasError)) {
		
		$emailTo = 'zenneson@gmail.com';
		$subject = 'Submitted message from '.$name;
		$sendCopy = trim($_POST['sendCopy']);
		$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
		$headers = 'From: ' .' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
        
        // set our boolean completion value to TRUE
		$emailSent = true;
	}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Denneson Modeste</title>

<!--Fonts-->
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Syncopate' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
    
<!--CSS-->
<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>
	<div id="load">
        <div class="load-logo pulse"></div>
        <p>Loading</p>
    </div>
    
	<div class="tv"></div>
    
    <div class="home tv-btn">HOME</div>
    <div class="about tv-btn">ABOUT</div>
    <div class="works tv-btn">WORKS</div>
    <a href="http://nobizlikemy.biz"><div class="blog tv-btn">BLOG</div></a>
    <div class="contact tv-btn">CONTACT</div>
    
    <div id="home" class="channel">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/JdRO97mFMx8?rel=0&controls=0&autoplay=1&showinfo=0&disablekb=1&disablekb=1&modestbranding=1&start=7&loop=1&playlist=JdRO97mFMx8&wmode=opaque" frameborder="0" allowfullscreen></iframe>
    </div><!-- end of home -->

    <div id="about" class="channel">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/JdRO97mFMx8?rel=0&controls=0&autoplay=1&showinfo=0&disablekb=1&disablekb=1&modestbranding=1&start=7&loop=1&playlist=JdRO97mFMx8&wmode=opaque" frameborder="0" allowfullscreen></iframe>
    </div><!-- end of about -->
    
    <div id="works" class="channel">

    </div><!-- end of works -->
    
    <div id="contact" class="channel">
        <div class="contact-border"></div>
        <div class="stamp"></div>
        
        <div class="contact-section">
            <h3>Have a question or wanna say hello? Leave a message below.</h3>
            
            <?php if(isset($emailSent) && $emailSent == true) { ?>  
                <p class="info">Your message was sent and will be responded to ASAP.</p>  
            <?php } else { ?>
            
            <form id="contact-us" action="contact.php" method="post"> 
                
                    <?php if(isset($hasError) || isset($captchaError) ) { ?>  
                        <p class="alert">There was a mistake in the message</p>  
                    <?php } ?>
                    
                    <label>Name</label>
                    <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="txt requiredField" placeholder="Name:" />  
          
                    <?php if($nameError != '') { ?>  
                        <br /><span class="error"><?php echo $nameError;?></span>   
                    <?php } ?>    
         
                    <label>E-mail</label>
                    <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="txt requiredField email" placeholder="Email:" />  
          
                    <?php if($emailError != '') { ?>  
                        <br /><span class="error"><?php echo $emailError;?></span>  
                    <?php } ?>   
             
                    <label>Message</label>
                    <textarea name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>  
              
                    <?php if($commentError != '') { ?>  
                        <br /><span class="error"><?php echo $commentError;?></span>   
                    <?php } ?>  
                          
                    <button name="submit" type="submit" class="subbutton"> </button>  
                    <input type="hidden" name="submitted" id="submitted" value="true" />  
            </form>             
        </div><!-- end of contact-section -->
                  
<?php } ?>  
</div>  
        </div>
    </div><!-- end of contact -->
    
<!--Javascript-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/application.js"></script>
    
</body>
</html>

最佳答案

提交表单会导致以下错误

404 (Not Found) http://modestewebstudio.com/contact.php

确保该文件实际上名为 contact.php,并且放置在您的 Web 服务器的根目录中。

关于javascript - JQuery/PHP 表单未提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26395597/

相关文章:

javascript - foreach 检查图像是否存在

php - 如何将 Iframe 重定向到另一个 URL php

javascript - 主干没有用 require js 定义

PHP SESSIONS 检查用户是否仍在数据库中,同时登录

php - 错误 edit() 必须是 App\User 的实例,没有给出

php - 邻接表与嵌套集模型

javascript - 能够调用不同PHP页面的单个Ajax函数

javascript - CSV 到多级/嵌套 JSON

javascript - 随机数生成器在 var 元素内部每次调用时都会给出相同的输出

jquery - Jquery 中的 mouseleave 时 Div 不会返回