jQuery and Ajax Submits + Modal Dialog

Question

I'm trying to accomplish the following task:

1. Make a modal box appear when #emailJQButton is clicked (presume this button already exists).

2. Validate the input from the form #emailPost2 to make sure that it exists and is a proper email format.

3. If the input is valid, when #eb2 is clicked, submit the form via Ajax (no need for any data back, only a submit), and closes the modal window.

The problems I am having are:

1. $("button, input:submit, input:button, a#jql, input:radio").button(); ceases to work if I make one of these: $(document).ready(function() {...}); (the button() is in a regular $(function() {...});)

2. No matter how I try it, I cannot get the form to stop submitting and show an error message when it is invalid.

Here's the plugin that I'm using: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Here's the form that is being validated:

<form action="php/emailPost.php" method="POST" class="inline" id="emailPost2">
<label name="error"></label>
<input type="text" value="Enter an Email" class="required email" name="emailAddress" style="display: inline-block;">
<input type="button" value="Email" id="eb2"/>
<input type="hidden" name="passedCoupID" value="1"/>
</form>

Here's all of my jQuery code:

$(function() {
$("button, input:submit, input:button, a#jql, input:radio").button();

$('#emailJQButton').click(function() {
    $("#emailModal").dialog('open');
});

$('#eb1').click(function() {
    $('#emailPost').submit();
    $("#emailModal").dialog('close');
});

$('#eb2').click(function() {
    $('#emailPost2').submit();
    $("#emailModal").dialog('close');
});
});

The above doesn't actually function as I want, but it's the last working code I had - it submits the forms ignoring validation, and it works fine. I just need to modify it to validate the email.

Here is the file that the submit should call (emailPost.php)

<?php
$passedCoupID = $_REQUEST["passedCoupID"];
$emailAddress = $_REQUEST["emailAddress"];

//some database queries and an email function

echo "Sent.";
?>

Lastly, here is #emailModal:

<div id="emailModal">
<form action="php/emailPost.php" method="POST" class="inline" id="emailPost2">
<label name="error"></label>
<input type="text" value="Enter an Email" class="required email" name="emailAddress" style="display: inline-block;">
<input type="button" value="Email" id="eb2"/>
<input type="hidden" name="passedCoupID" value="1"/>
</form>
</div>

I'm pretty new to jQuery, and I've been searching forever and everywhere, but I can't find the solution to this problem. Any help?

Answer 1

I think your problem can be simplified by using the built in buttons for the .dialog().

I posted a working example over at jsfiddle so you can try it out and let me know if that is what you need. I removed the submit button from your form and used the 'buttons' property of the .dialog() to create a submit button that only works when the email is valid. Also added the properties to make the dialog modal and hidden at startup I also added a call to $('#emailPost2').validate(); that hooks up the form validation.

Answer 2

it might help if u use live for the clicks:

$(function() {
$("button, input:submit, input:button, a#jql, input:radio").button();

$('#emailJQButton').live('click',function() {
    $("#emailModal").dialog('open');
});

$('#eb1').live('click',function() {
    $('#emailPost').submit();
    $("#emailModal").dialog('close');
});

$('#eb2').live('click',function() {
    $('#emailPost2').submit();
    $("#emailModal").dialog('close');
});
});

instead of the submit element you can do a $.post() or $.get() functions with jquery and you can use the return values to see if the post went through successfully.

something like:

$('#emailPost').submit(function(){
        $.post('phpFILE.php',$(this).serialize(),function(data){
            console.log(data);
            //do something with return data
        })
   return false; //so normal submit does not occur
    })

and here is a fnction to check email addresses in php: its not always the best idea to use javascript of jquery for the validation bc it can be tampered with.

function check_email_address($email) {
  // First, we check that there's one @ symbol,
  // and that the lengths are right.
  if (!ereg("^[^@]{1,64}@[^@]{1,255}$", $email)) {
    // Email invalid because wrong number of characters
    // in one section or wrong number of @ symbols.
    return false;
  }
  // Split it into sections to make life easier
  $email_array = explode("@", $email);
  $local_array = explode(".", $email_array[0]);
  for ($i = 0; $i < sizeof($local_array); $i++) {
    if(!ereg("^(([A-Za-z0-9!#$%&'*+/=?^_`{|}~-][A-Za-z0-9!#$%&'*+/=?^_`{|}~\.-]{0,63})|(\"[^(\\|\")]{0,62}\"))$",$local_array[$i])) {
      return false;
    }
  }
  // Check if domain is IP. If not,
  // it should be valid domain name
  if (!ereg("^\[?[0-9\.]+\]?$", $email_array[1])) {
    $domain_array = explode(".", $email_array[1]);
    if (sizeof($domain_array) < 2) {
        return false; // Not enough parts to domain
    }
    for ($i = 0; $i < sizeof($domain_array); $i++) {
      if(!ereg("^(([A-Za-z0-9][A-Za-z0-9-]{0,61}[A-Za-z0-9])|([A-Za-z0-9]+))$",$domain_array[$i])) {
        return false;
      }
    }
  }
  return true;
}

Answer 3

Why not use Ajax if you already have the modal? You could just grab the fields send them then change the contents of the Modal to the response.

http://api.jquery.com/jQuery.ajax/