简体   繁体   中英

PHP,jQuery,HTML form with ajax is not working

I'm trying to submit form data to php script with jQuery .post() method,than to receive php script data back and display it on form page,but it doesnt work.Also I'm using jQuery validate plugin for client side validation as well.Here is my code: 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 for posting:

$(document).ready(function(){

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

and 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();
        }
    }

I'm hoping that this makes sense,to me it had,but I'm strugling with it for last couple of hours,still trying to figure out what went wrong,I also tryed posting with $.ajax() and no response.One more thing,form is geting loaded using jquery .load() method to popup box,that is why it is important to me to do it with ajax

From a cursory inspection of your code, it seems that you have added an extra closing parentheses in this line, like so: function(data))

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

try

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

instead

HTH

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM