javascript - 联系表上的帮助不大？

Question

我的联系表需要一些帮助。我正在 Dreamweaver 上构建我的网站，但我还没有服务器，我只需要你告诉我我的代码中还缺少什么才能让我的联系表正常工作。 2- 我还需要“已发送消息”显示在消息下方，因为我的站点是视差单页纸。我不想让人们离开我的页面。我不知道把我的电子邮件地址放在哪里:(

(function($){
	$(document).ready(function() {
		$('#submit-form').click(function(e){
		
			e.preventDefault();
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var Nome  = $('#form_name').val(),
				Email  = $('#form_email').val(),
				Assunto  = $('#form_subject').val(),
				Mensagem  = $('#form_message').val(),
				data_html,
				success = $('#success');
				
    		if(name == "")
                $('#form_name').val('Please enter your name.');
				
			if(subject == "")
                $('#form_subject').val('Please enter your name.');

            if(email == ""){
                $('#form_email').val('Digite um e-mail válido.');
            }else if(reg.test(email) == false){
                $('#form_email').val('E-mail inválido.');
            }
			
            if(message == "")
                $('#form_message').val('Digite sua mensagem.');

            if(message != "" && name != "" && reg.test(email) != false) {
            	data_html = "name=" + name + "&email="+ email + "&message=" + message + "&subject="+ subject;

                //alert(data_html);
                $.ajax({
                    type: 'POST',
                    url: 'contact_form.php',
                    data: data_html,
                    success: function(msg){
						
						if (msg == 'sent'){
                        	success.html('<div class="alert alert-success">Mensagem enviada!</div>')  ;
                            $('#form_name').val('');
							$('#form_email').val('');
							$('#form_message').val('');
                        }else{
                            success.html('<div class="alert alert-error">Message <strong>not</strong> sent! Please Try Again!</div>')  ; 
                        }
                    }
                });
    
            }
            return false;
        });
	});
})(jQuery);

textarea {
	height:167px;
	padding:20px;
	margin-bottom:20px; 
	overflow:auto;
}
	
.formSecWrap {
	float: left;
	margin-right: 20px;
}
.formSecWrap2 {
	margin-right: 0px;
}
input[type="text"], input[type="password"], input[type="email"], textarea, select {
    background: #222222;
    border: none;
    border-radius: 3px;
    color: #fff;
    display: block;
    margin: 0 0 10px 0;
    outline: medium none;
    padding: 6px 4px;
    width: 370px;
	font-family:'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 400;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
    box-shadow: 0 0 7px #fff;
}

.formWrap label{
	margin: 0 0 2px 0;
}
.formWrap input[type="submit"]{
	margin: 10px 0 20px 0;
	float: right;
}

a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	background: #7b133c; 
	border: none;
	padding: 4px 12px;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
	margin: 0 5px 10px 0;
	line-height: 21px;
}
a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	color: #222;
	background: #ddd;  
}

           <div id="contact_form">
                <div class="two-thirds column marginTop formWrap">
                    <form action="#" method="post" class="contactForm">
                        <div class="formSecWrap">
                            <label for="form_name">Nome</label>
                                <input type="text" id="form_name" name="form_name" value="" />
           
                            <label for="form_email">Email</label>
                                <input type="text" name="form_email" id="form_email" value="" />
                      
                            <label for="form_subject">Assunto</label>
                                <input type="text" name="form_subject" id="form_subject" value="" />
                        </div>
                        <div class="formSecWrap formSecWrap2">
                            <label for="form_message">Mensagem</label>
                                <textarea class="textarea" name="form_message" id="form_message"></textarea>
                        
                                <input class="button" id="submit-form" type="submit" name="submit" value="Enviar" />
                        </div>
                        <div id="sucess"></div>
                    </form>
                </div>
            </div>
   	   </div>
        
     </div>

Answer 1

你有几个问题。

但首先，您没有服务器，但使用 ajax 来 url:'contact_form.php'。

除非您配置本地服务器，否则我们永远无法在 Dreamweaver 中工作。

仅使用 javascript 而非 php 发送邮件在很多方面都是有问题的。

因此，为了取得一些进展，设置一个适当的本地环境(可能像 xampp，或带有本地服务器的 dreamweaver)并在那里测试您的邮件表单，您可以在其中调试最终的 javascript 和 php 错误。