簡體   English   中英

PHP,jQuery,帶有ajax的HTML表單不起作用

[英]PHP,jQuery,HTML form with ajax is not working

我正在嘗試使用jQuery .post()方法將表單數據提交到php腳本,而不是接收php腳本數據並將其顯示在表單頁面上,但它不起作用。我也使用jQuery validate插件進行客戶端驗證以及。這是我的代碼:Html:

<div class="contact-form">
<button class="contact-close">X</button>
    <form method="post" action="formular.php" id="quote-form">
        <div id="returned"></div>
        <div class="houndred">
            <input type="text" name="name" placeholder="Name*" class="input-half" id="name" min-width="2" autofocus required>
            <input type="email" name="email" placeholder="Email*" class="input-half" id="email" required>
            <input type="text" name="subject" placeholder="Subject" class="input-half" id="subject" required>
            <input type="url" name="url" placeholder="Website" class="input-half" id="website">
        </div>

        <div class="houndred">
            <textarea name="message" class="textarea" id="message" placeholder="message*" required></textarea>
            <br><p></p>
        </div>
        <div class="eightytwo">
            <button id="quote-button">Send</button>
        </div>
        <div id="summary"></div>
    </form>

</div><!-- .padding-fix -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="js/validation.js"></script>
<script src="js/ajaxform.js"></script>

JS發布:

$(document).ready(function(){

    $('form').on('submit', function(event) {
        event.preventDefault();
        $.post('formular.php', $(this).serialize(), function(data)) {
            var dataForm = data;
            $("#returned").append(dataForm);
        }
    });
)};

和PHP:

if(!empty($_POST)) {
        $errors = array();
        $name = $_POST['name'];
        $email = $_POST['email'];
        $subject = $_POST['subject'];
        $url = $_POST['url'];
        $message = $_POST['message'];

        if(empty($name) || empty($email) || empty($subject) || empty($url) || empty($message)) {
            $errors[] = 'All fields are required!';
        } else {
            if(filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
                $errors[] = 'Please enter a valid email address';
            }
            if(ctype_alpha($name === false)) {
                $errors[] = 'Name can only contain letters';
            }
            if (ctype_alpha($subject === false)) {
                $errors[] = 'Subject can only contain letters';
            }
            if(filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_PATH_REQUIRED) === false) {
                $errors[] = 'Please enter a valid url address with http in front';
            }
            if(empty($message)) {
                $errors[] = 'Please enter a message';
            }
        }

        if(!empty($errors)) {
            echo '<ul style=\"list-style: circle; color: #f74d4e\">';
            foreach($errors as $error) {
                echo '<li style=\"color: #f74d4e;\"' . $error . '</li>';
            }
            echo '</ul>';
        }

        $send_message = 'From:' . $url . '<br>' . strip_tags(addslashes($message));

        if(empty($errors)) {
            mail('something@something.com', $subject, $send_message , $email);
            echo '<h4 style=\"color: #f74d4e;\">Thank you for contacting me!</h4>';
            exit();
        }
    }

我希望這對我來說是有道理的,但是我在最近幾個小時里一直在努力,仍在努力弄清楚出了什么問題,我還嘗試用$ .ajax()發帖並沒有回應。還有一件事,使用jquery .load()方法將表單加載到彈出框中,這就是為什么使用ajax對我來說很重要

從粗略檢查您的代碼,似乎您在此行中添加了一個額外的右括號,如下所示: function(data))

$.post('formular.php', $(this).serialize(), function(data)) {

嘗試

$.post('formular.php', $(this).serialize(), function(data) {

代替

HTH

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM