2015-07-30 5 views
1

У меня есть форма, в которой пользователь может ввести поля и нажать кнопку, чтобы отправить представленные данные в php-скрипт, который добавляет данные в базу данных.JQuery Lightbox form submit

Проблема в том, что данные не отправляются.

Код:

$(document).on("click" ,".save_new_user",function() { 
    var form_data = { 
     "first_name" : $(".first_name").val(), 
     "last_name"  : $(".last_name").val(), 
     "email"   : $(".email").val(), 
     "username"  : $(".username").val(), 
     "auth_level" : $(".auth_level").find(":selected").text() 
    }; 

    console.log(form_data); 

    var request = $.ajax({ 
     method: "POST", 
     url: "ajax/create_user.php", 
     data: form_data, 
    }) 
    .done(function(data) { 
     console.log(data); 
    }); 
}); 

Разметка:

First Name: <input type="text" name="first_name" class="first_name"> 
Last Name: <input type="text" name="last_name" class="last_name"> 
Email Address: <input type="text" name="email" class="email"> 
Username: <input type="text" name="username" class="username"> 
Auth Level: <select class="auth_level"><option>Admin</option><option>Editor</option></select> 
<div class="save_new_user">Add User</div> 

Бревно консоль form_data возвращает следующий, даже если форма заполнена: массив ( [first_name] => [last_name] => [email] => [имя пользователя] => [auth_level] => Администратор )

Пожалуйста, помогите!

+0

я ве проверил это в скрипку и работает отлично https://jsfiddle.net/csdrn54t/ (ничего не изменилось из кода) – Vanojx1

+0

Должно быть что-то еще мешающее тогда хммм. Благодаря! – TEster

+0

есть другой обработчик событий на этом классе ?? – Vanojx1

ответ

0

Это работает шарм (я заменил class с id):

<head> 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>  
    <script type="text/javascript"> 

      $(document).on("click" ,".save_new_user",function() { 
        var form_data = { 
         "first_name" : $("#first_name").val(), 
         "last_name"  : $("#last_name").val(), 
         "email"   : $("#email").val(), 
         "username"  : $("#username").val(), 
         "auth_level" : $("#auth_level").find(":selected").text() 
        }; 

        console.log(form_data); 
      }); 
/* 
      var request = $.ajax({ 
       method: "POST", 
       url: "ajax/create_user.php", 
       data: form_data, 
      }) 
      .done(function(data) { 
       console.log(data); 
      });*/ 
    </script> 
    <title></title> 
</head> 
<body> 
First Name: <input type="text" name="first_name" id="first_name"/> 
Last Name: <input type="text" name="last_name" id="last_name"/> 
Email Address: <input type="text" name="email" id="email"/> 
Username: <input type="text" name="username" id="username"/> 
Auth Level: <select id="auth_level"><option>Admin</option><option>Editor</option></select> 
<input type="button" class="save_new_user" value="Add User"></input> 

</body> 
</html>