Ajax post not posting email address?

Question

UPDATE: It will not work in Firefox, but will work on any other browser. I even tried loading Firefox in safe mode (disabling all plugins, etc.) and still no worky. :(

I'm trying to do an AJAX post (on form submission) to a separate PHP file, which works fine without trying to send an email address through the post. I'm fairly new to AJAX and pretty familiar with PHP. Here's my form and ajax call

<form class="form" method="POST" name="settingsNotificationsForm">
                        <div class="clearfix">
                            <label>Email <em>*</em><small>A valid email address</small></label><input type="email" required="required" name="email" id="email" />
                        </div>
                        <div class="clearfix">
                            <label>Email Notification<small>...when a new subscriber joins</small></label><input type="checkbox" name="subscribe_notifications" id="subscribe_notifications"> Receive an email notification with phone number when someone  new subscribes to 'BIZDEMO'
                        </div>
                        <div class="clearfix">
                            <label>Email Notification<small>...when a subscriber cancels</small></label><input type="checkbox" name="unsubscribe_notifications" id="unsubscribe_notifications"> Receive an email notification with phone number when someone  new unsubscribes to 'BIZDEMO'
                        </div>
                        <div class="action clearfix top-margin">
                            <button class="button button-gray" type="submit" id="notifications_submit"><span class="accept"></span>Save</button>
                        </div>
                        </form>

and AJAX call:

<script type="text/javascript">
    jQuery(document).ready(function () {

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


                var keyword_value = '<?php echo $keyword; ?>';
                var email_address = $("input#email").val();
                var subscribe_notifications_value = $("input#subscribe_notifications").attr('checked');
                var unsubscribe_notifications_value = $("input#unsubscribe_notifications").attr('checked'); 

                var data_values = { 
                    keyword : keyword_value,
                    email : email_address,
                    subscribe_notifications : subscribe_notifications_value,
                    unsubscribe_notifications : unsubscribe_notifications_value
                };


                $.ajax({
                    type: "POST",
                    url: "../includes/ajax/update_settings.php", 
                    data: data_values,
                    success: alert('Settings updated successfully!'),
                });
         });
    });

and receiving page:

<?php
include_once ("../db/db_connect.php");

$keyword = FILTER_INPUT(INPUT_POST, 'keyword' ,FILTER_SANITIZE_STRING);
$email = FILTER_INPUT(INPUT_POST, 'email' ,FILTER_SANITIZE_EMAIL);
$subscribe_notifications = FILTER_INPUT(INPUT_POST, 'subscribe_notifications' ,FILTER_SANITIZE_STRING);
$unsubscribe_notifications = FILTER_INPUT(INPUT_POST, 'unsubscribe_notifications' ,FILTER_SANITIZE_STRING);


$table = 'keyword_options';
$data_values = array('email' => $email, 'sub_notify' => $subscribe_notifications, 'unsub_notify' => $unsubscribe_notifications);

foreach ($data_values as $name=>$value)
{

// See if keyword is already in database table
$filter = array('keyword' => $keyword);
$result = $db->find($table, $filter);

if (count($result) > 0 && $new != true)
{
    $where = array('keyword' => $keyword, 'keyword_meta' => $name);
    $data = array('keyword_value' => $value);
    $db->update($table, $where, $data); 
}
else
{
    $data = array('keyword' => $keyword, 'keyword_meta' => $name, 'keyword_value' => $value);
    $db->create($table, $data);
    $new = true; // If this is a new record, always go to else statement
}

}

unset($value);

Here are some weird things that happen:

• When I only enter text into the email field, (i.e. - abc), it works fine, posts correctly, etc.
• When I enter a bogus email address with the "." before the "@", it works fine
• When I enter a validated email address (with the "." after the "@"), the post fails.

Ideas?

Answer 1

i had the same problem too.. you need to preventDefault() on the submit button. Then continue with the posting.

 $("notifications_submit").click(function(ev){
  ev.preventDefault();
  //form variables
//post via ajax
}
);

Answer 2

If it was me, I'd first simplify things by passing in the serialized form rather than the individual vars. It's trivial, but then again setting up all those different vars to go in individually does leave a lot of room for error. To do it, simply do this:

 $.ajax({
    ...
    data:$('#formid').serialize(),
    ...
 });

Note that serialize sends in based on the name variable of input fields. Ensure that those are set as you need to proceed on.

There is a known bug with the @ symbol in older versions of jQuery. Versioning up if you are behind might also solve the issue.

Answer 3

Try escaping the email address. http://www.w3schools.com/jsref/jsref_escape.asp

I know you are using type: "POST" ,but lets just see.

Answer 4

I ended up using a tutorial from a different site and rebuilding it from scratch... the jquery code below is what worked.

jQuery(document).ready(function () {
          $("#settingsNotificationsForm").submit(function() {

                //setup variables  
                var form = $(this),  
                formData = form.serialize(),
                formUrl = form.attr('action'),
                formMethod = form.attr('method');
                /* responseMsg = $('#signup-response') */

                //send data to server  
                $.ajax({  
                    url: formUrl,
                    type: formMethod,
                    data: formData,
                    success:function(data){
                        alert('Settings updated successfully!');
                }  
            })

            //prevent form from submitting  
            return false;

         });
    });