1

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

3
  • Please have a look at the console log in your browser (enable developer tools if you have not already!). See if there are any errors displayed. Might shed more light on the issue for you about why it doesnt work. Also be sure to check your php script directly, to make sure you are not getting any server 500 errors. Commented Oct 12, 2017 at 18:11
  • Just tryed console and got: VM491:5 Uncaught SyntaxError: Unexpected token ) at p (jquery-3.2.1.min.js:2) at Function.globalEval (jquery-3.2.1.min.js:2) at text script (jquery-3.2.1.min.js:4) at Qb (jquery-3.2.1.min.js:4) at A (jquery-3.2.1.min.js:4) at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4) at Object.send (jquery-3.2.1.min.js:4) at Function.ajax (jquery-3.2.1.min.js:4) at Function.r._evalUrl (jquery-3.2.1.min.js:4) at Ja (jquery-3.2.1.min.js:3) will try with different version of jQuery. Commented Oct 12, 2017 at 18:14
  • Its not your version of jquery. See the answer below by darthaditya... syntax error. Commented Oct 12, 2017 at 18:18

1 Answer 1

3

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

Sign up to request clarification or add additional context in comments.

7 Comments

Good catch. I missed that one myself when looking over it. That end paren needs to be after that end curlybrac for the function(data).
Yes, that's right. I'd suggest a good JSLint.com or atleast have a js linter plugin installed for whatever code editor op is using.
just fixed it,but it still doesnt behaive as espected...great catch by the way,thanks :)
Also spotted that the end of .ready is ")};" when it should be "});".
I have marked it as solved,will try something different...Thank you for looking at it :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.