Home/ Questions/Q 8184857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T01:39:06+00:00

I have the form below. The problem with it is that after I click

  • 0

I have the form below. The problem with it is that after I click the submit button nothing happens. The form just disappears. Even if I insert an alert in the form function it is not shown or if delete 

if(hasError == false){
    $(this).hide
};

Why is this happening?

<html><body><ul>
    <li><a href="#" title="Share with a friend"><span>NOTIFY A FRIEND</span></a>
        <div class="navLinks">
            <form name="send-to-friend" id="form2" action="">
                <label for="name" class="blockItem">Your Name</label>
                <input type="text" id="name" class="blockItem" name="your name" maxlength="60" size="30"/>
                <label for="emailFrom" class="blockItem">Your Email Address</label>
                <input type="text" id="emailFrom" class="blockItem" name="your email" maxlength="60" size="30" />
                <label for="friend-email" class="blockItem">Your friend's e-mail Address</label>
                <input  type="text" id="emailTo" class="blockItem" name="your friends email" maxlength="60" size="30"  />
                <input class="button" id="submitt2" type="submit" value="Send Message" />
                <input  class="button"  type="submit" value="Cancel"  />
            </form>
        </div>
    </li>
</ul></body></html>

CSS:

.navLinks {
    text-align: left;
    color: #b9cce4;
    background: #2C75D8;
    padding: 0 5px;
    z-index: 10000;
        background: #333;
    }
form {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    color: #222;
    text-decoration: none;
    padding: 1em;
    margin-bottom: 1em; 
    }   
label {
    margin: 10px 0 0 0;
    }
.blockItem {
    display: block;
    }
.button {
    display: inline;
    margin-top: 10px;
    }

JavaScript:

    $('.navLinks').hide();

    //hide show the main nav content
    $(".nav a").on("click", function(e) {
        $(".navLinks").hide();
        $(this).siblings(".navLinks").show();
        e.preventDefault();
    });
    //error checking
    $("#submit2").click(function(){
          $(".error").hide();
          var hasError = false;
          var emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

          var nameVal = $("#name").val();
          if(nameVal == '') {
            $("#name").after('<span class="error">You forgot to enter the name.</span>');
            hasError = true;
          }

          var emailToVal = $("#emailTo").val();
          if(emailToVal == '') {
            $("#emailTo").after('<span class="error">You forgot to enter the email address to send to.</span>');
            hasError = true;
          } else if(!emailReg.test(emailToVal)) {
            $("#emailTo").after('<span class="error">Enter a valid email address to send to.</span>');
            hasError = true;
          }

          var emailFromVal = $("#emailFrom").val();
          if(emailFromVal == '') {
            $("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>');
            hasError = true;
          } else if(!emailReg.test(emailFromVal)) {
            $("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>');
            hasError = true;
          }

          if(hasError == false){
              $(this).hide();
              $.ajax({
                    type: "POST", 
                    url: "sendemail.php", 
                    data: data,
                    success: function(){ 
                     $("#loading").fadeOut(100).hide(); $('#message-sent').fadeIn(500).show(); } 
                });
          };
          return false;
    });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a couple of problems …

    Your HTML shows this (note the id attribute)

    <input class="button" id="submitt2" type="submit" value="Send Message" />

    your jQuery :

    $("#submit2").click(function(){

    and your listening for the click event on submit2 and the id of the button is submitt2.

    I would suggest that rather than listening to the click event of the submit button you listen for the submit event of the form :

    $('#form2').submit(funciton(evt) {
   // your validation here

   // then to prevent submission
   evt.preventDefault();
}

    Docs for the .submit() function here and event.preventDefault() here

    You havent initialised the data parameter

    data: data,

    should perhaps be

    data: $('#form2').serialize(),

    Read the docs on .serialize() here

    • 0