jquery .ajax() issue

Question

I am using Jquery 1.7.1 and am having issues.. I'm working with a CRM in my script and am working to get the page finished but I'm stuck with this issue..

my html:

<form class="collector" action="https://www.domain.biz/admin/transact.php" method="POST">
  <input type="hidden" name="method" value="NewProspect">
  <input type="hidden" name="campaignId" value="3">
  <input type="hidden" name="ipAddress" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
  <fieldset>
    <div style=" padding-left: 50px">
      <table>
        <tr>
          <td><span style="color:red;">*</span>Your First Name: 
              <span id="rfvFirstName" style="display:none;">*</span>
          </td>
          <td><span style="color:red;">*</span>Your Last Name: 
              <span id="rfvFirstName" style="display:none;">*</span>
          </td>
                                            <td><span style="color:red;">*</span>Your Phone Number: </td>
                                            <td><span style="color:red;">*</span>Primary Email: </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            <input name="firstName" type="text" id="firstName" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="lastName" type="text" id="lastName" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="phone" type="text" id="phone" class="" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="email" type="text" id="email" class="required email" style="width:150px;" value="">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="clear"></div>
                                <center>
                                    <input type="submit" name="continue" id="imgbtnSubmit" class="button" style="background-image: url('<?php echo base_url();?>inc/img/button-check.png');
                                background-repeat: no-repeat; width: 348px; height: 46px; border:none; background-color:transparent;" value="" />
                                </center>
                            </fieldset>
                            <p align="center" style="font-size:12px;">
                                &nbsp;
                            </p>
                        </form>

the JS:

$('.collector').submit(function(){
    validate = true;
        $(this).find("input:text:visible:enabled").each(function() {
            if ($(this).attr("value") == "") {
                alert("Please fill in all fields!");
                $(this).focus();
                validate = false;
                return false;
            }
            else if ($(this).hasClass("email") && !$(this).attr("value").match(/@/)) {
                alert("Please enter an email address...");
                $(this).focus();
                validate = false;
                return false;
            }
        });
    if (validate != false)  { 
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) { 
                    alert(response);
                }
            });
        }
    return false;
});

Now both of these things work, and they work together fine... the issue comes in that I don't get any response and I'm not sure why. I imagine it is because of what firebug is saying... POST https://www.domain.biz/admin/transact.php 200 OK 1.04s jquery.js (line 8102)

This line in my firebug is displayed as red, and the line 8102 in jquery.js is: xhr.send( ( s.hasContent && s.data ) || null );

Answer 1

Here are some suggestions that might help you find the error:

In your ajax call, after the success, add the following code:

success: function(response) { 
    alert(response);
},
error: function(response) {
    console.log(response.status + " " + response.statusText);
}

That will print in your console a clue to what is causing this error.

By the way, there are some other suggestions, your validations can be achieved with the new HTML5 input types (email, phone), if you have to maintain compatibility with browsers that don't support these, you can find a jQuery plugin that handles this.