Javascript form not working as should

Question

I'm currently trying to create a contact form which I have used on other websites I have developed before, however, I'm having a problem with this one. If the required fields are not filled in, an error message should fade in near the submit button and say "... is required."

Once all necessary fields are filled in, and the "Send message" button is clicked, the form is supposed to fade away and the success message is supposed to fade in, but at the minute, the form does nothing when you click the button.

Here is the HTML I am using;

<form id="contactForm" action="#" method="post">
  <fieldset>
    <div><input name="name" type="text" id="name" title="Name" value="Name &#8226;" /></div>
    <div><input name="email" type="text" id="email" title="Email" value="Email &#8226;" /></div>
    <div><input name="number" type="text" id="number" title="Contact Number" value="Contact number" /></div>
    <div><input name="datepicker" type="text" id="datepicker" title="Date required" value="Date required"><div id="datepicker"></div></div>
    <div><textarea name="message" class="form-poshytip" id="message" title="Message">Enter your message below; &#8226;</textarea></div>

The send mail configuration;

<!-- send mail configuration -->
    <input type="hidden" value="my@email.co.uk" name="to" id="to" />
    <input type="hidden" value="You have mail" name="subject" id="subject" />
    <input type="hidden" value="send-mail.php" name="sendMailUrl" id="sendMailUrl" />
<!-- ENDS send mail configuration -->

    <p><input type="button" value="Send message" name="Button" id="submit"  span id="error" class="warning"></span></p>
  </fieldset>
</form>

I have tried changing the input type of the button from

<input type="button" to <input type="submit"

and all that does is reload the page without sending the form.

This is the Javascript code I have;

// hide messages 
$("#error").hide();
$("#sent-form-msg").hide();

// on submit...
$("#contactForm #submit").click(function() {
    $("#error").hide();

    // number
    var number = $("input#number").val();

    //datepicker
    var name = $("input#datepicker").val();

    //required:

    //name
    var name = $("input#name").val();
    if(name == ""){
        $("#error").fadeIn().text("Name required.");
        $("input#name").focus();
        return false;
    }

    // email
    var email = $("input#email").val();
    if(email == ""){
        $("#error").fadeIn().text("Email required.");
        $("input#email").focus();
        return false;
    }

    // message
    var message = $("#message").val();
    if(message == ""){
        $("#message").fadeIn().text("Message required.");
        $("input#message").focus();
        return false;
    }       

    // send mail php
    var sendMailUrl = $("#sendMailUrl").val();

    //to, from & subject
    var to = $("#to").val();
    var from = $("#from").val();
    var subject = $("#subject").val();

    // data string
    var dataString = 'name='+ name
                    + '&email=' + email
                    + '&message=' + message
                    + '&to=' + to
                    + '&from=' + from
                    + '&subject=' + subject;                                 
    // ajax
    $.ajax({
        type:"POST",
        url: sendMailUrl,
        data: dataString,
        success: success()
    });
});  


// on success...
 function success(){
    $("#sent-form-msg").fadeIn();
    $("#contactForm").fadeOut();
 }

return false;

I have tried over and over again to get this to work but it doesn't... And it doesn't make any sense why it doesn't on this webpage I'm developing but does on others...

Is there SOMETHING I'm missing that I just can't see or is this code completely chuffed?

For an example, it's supposed to work like this; (http://www.klfrxbrand.com/Contact.html) — Stephen Evans, Dec 06 '15 at 14:19
*"This is the PHP code I have"* - that's JS, not PHP. Check for errors, check your console. *"The send mail configuration"* - configuration? — Funk Forty Niner, Dec 06 '15 at 14:41
Your webserver responds with a _405 - HTTP verb used to access this page is not allowed_. http://stackoverflow.com/questions/6841139/server-error405-http-verb-used-to-access-this-page-is-not-allowed — bmla, Dec 06 '15 at 14:43
`` Email harvesters will pick up on that so fast! You're defeating the purpose of using an Email form. Place that in your PHP. — Funk Forty Niner, Dec 06 '15 at 14:44
@Fred-ii- what do you mean by that? I'm not 100% in code lingo... — Stephen Evans, Dec 06 '15 at 15:01
Just use `required` attribute in input fields. Javascript form validation was used last century, today it is matter of HTML5. — Jan Turoň, Dec 06 '15 at 15:45

score 0 · Answer 1 · answered Dec 06 '15 at 14:31

0

Try to include this

$(document).ready(function(){
   //your code here
});

answered Dec 06 '15 at 14:31

Shailender Singh

1
1

score 0 · Answer 2 · answered Dec 06 '15 at 14:42

Your function in javascript capture click button but your form is current working if you doesn't capture it.. try this code I hope it help Change your code to

$("#contactForm").submit(function(e) {
    $("#error").hide();

    // number
    var number = $("input#number").val();

    //datepicker
    var name = $("input#datepicker").val();

    //required:

    //name
    var name = $("input#name").val();
    if(name == ""){
        $("#error").fadeIn().text("Name required.");
        $("input#name").focus();
        return false;
    }

    // email
    var email = $("input#email").val();
    if(email == ""){
        $("#error").fadeIn().text("Email required.");
        $("input#email").focus();
        return false;
    }

    // message
    var message = $("#message").val();
    if(message == ""){
        $("#message").fadeIn().text("Message required.");
        $("input#message").focus();
        return false;
    }       

    // send mail php
    var sendMailUrl = $("#sendMailUrl").val();

    //to, from & subject
    var to = $("#to").val();
    var from = $("#from").val();
    var subject = $("#subject").val();

    // data string
    var dataString = 'name='+ name
                    + '&email=' + email
                    + '&message=' + message
                    + '&to=' + to
                    + '&from=' + from
                    + '&subject=' + subject;                                 
    // ajax
    $.ajax({
        type:"POST",
        url: sendMailUrl,
        data: dataString,
        success: success()
    });
    return false;
});

Javascript form not working as should

2 Answers2