stelarossa
stelarossa

Reputation: 59

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('[email protected]', $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

Upvotes: 1

Views: 200

Answers (1)

darthaditya
darthaditya

Reputation: 124

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

Upvotes: 3

Related Questions