CODEWITHSUNDEEP
javascriptjquery
LiveEn
LiveEn

Reputation: 3253

jquery form not posting values to php on click

I have a simple contact form which i ahve created using php and jquery. The problem is when i click on the image, which im using as a submit button it doesnt post the values to my php files.

i jus put up some alert boxes to check if the click events work. it works but the values dont post.

jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Start jQuery code -->
<script type="text/javascript">
$(document).ready(function() {
    $("#submitbtn").click(function() {
       alert('clicked');
        var proceed = true;
        //simple validation at client's end


        if(proceed) 
        {
            alert('proceeded');

            post_data = {
                'fname': $('input[name=fname]').val(),
                'lname': $('input[name=lname]').val(),
                'email': $('input[name=email]').val()
            };

            //post data to server
            $.post('posts.php', post_data, function(response){  
            alert('posted');

                if(response.type == 'error'){ //load json data from server and output message    
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';
                    //reset values in all input fields
                    $("#contact_form  input[required=true], #contact_form textarea[required=true]").val('');
                    $("#contact_form #contact_body").slideUp(); //hide form after success
                }
                $("#contact_form #contact_results").hide().html(output).slideDown();
            }, 'json');
        }
    });

});
</script>

html form

<div id="contact_form">
   <div id="contact_results"></div>

    <div class="form-title-box">Enter Your <br />
    Shipping Information</div>
    <div class="form-inside-box">First Name: <br />
        <input name="fname" type="text" class="input-box" id="fname" />
      Last Name:<br />
      <input name="lname" type="text" class="input-box" id="lname" />

      Email:<br />
      <input name="email" type="text" class="input-box" id="email"/>
    </div>
    <div class="form-botton-box"><a href="#" id="submitbtn" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/send-hover-botton.jpg',1)"><img src="images/send-normal-botton.jpg" alt="SEND MY FREE TRIAL" name="Image3" width="244" height="71" border="0" style="margin-top:13px;" /></a></div>
  </div>
</div>

i dont see any errors in my firebug console. can someone tell me what am i doing wrong here?

Upvotes: 0

Views: 47

Answers (2)

mplungjan
mplungjan

Reputation: 178422

You have typos but are also not cancelling the click event - that will execute the href.

Instead do

 $("#submitbtn").click(function(e) {
   e.preventDefault();

I would personally wrap the fields in a form tag and post using 

$.post($("#formID").attr("action"), $("#formID").serialize(),function(e) {
   e.preventDefault();

and a real submit button. That would allow JS to be turned off and also save you some typos.

Upvotes: 1

Kypros
Kypros

Reputation: 2986

The first thing that catches my eye as wrong, is using the jquery selectors wrong without quotes.

 'fname': $('input[name=fname]').val(),

should be 

 'fname': $('input[name="fname"]').val(),

adding the quotes in the input selector by name

Update: You also have an error and a typo in the declaration of the last name and email field where 

   <input<br /> name="lname" type="text" class="input-box" id="lname" />

It has a name of lname yet you are selecting it with lmail and i'm not sure what tha <br/> tag is doing inside that element.

  <input name="email" type="text" class="input-box" id="email"/>

Email is input and you try to select it as a textarea?

Upvotes: 1

Related Questions