За последние 24 часа нас посетили 62939 программистов и 1743 робота. Сейчас ищут 859 программистов ...

Отправка формы ajax

Тема в разделе "JavaScript и AJAX", создана пользователем igroc, 30 июл 2014.

  1. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    Всем привет есть форма регистрации

    Код (Text):
    1. <form action="#" method="post">
    2.                 <label>ФИО:</label>
    3.                 <input name="nam" type="text" size="50" id="nam"> <span></span><br>
    4.                 <label>Логин:</label>
    5.                 <input name="login" type="text" size="50" id="login"> <span></span><br>
    6.                 <label>E-mail:</label>
    7.                 <input name="email" type="text" size="50" id="email"> <span></span><br>
    8.                 <label>Пароль:</label>
    9.                 <input name="password" type="password" size="50" id="password"> <span></span><br>
    10.                 <label>Подтвердите пароль:</label>
    11.                 <input name="password2" type="password" size="50" id="password2"> <span></span><br><br>
    12.                     <input type="submit" name="submit" value="Зарегистрироваться" id="submit" disabled><br><br>
    13.                         <center>Все поля, обязательные для заполнения.</center>
    14.         </form>
    js обработчик

    Код (Text):
    1. <style>
    2. .inputRed{
    3. border:1px solid #ff4040;
    4. background: #ffcece;
    5. }
    6. .inputGreen{
    7. border:1px solid #83c954;
    8. background: #e8ffce;
    9. }
    10.  
    11. </style>
    12.  
    13.  
    14. <script type="text/javascript">
    15.  
    16. var  nam,
    17.     login,
    18.     email,
    19.     password,
    20.     password2,
    21.     namStat,
    22.     loginStat,
    23.     emailStat,
    24.     passwordStat,
    25.     password2Stat;
    26.  
    27. $(function() {
    28.  
    29.     //ФИО
    30.         $("#nam").change(function(){
    31.         nam = $("#nam").val();
    32.         var expNam = /^[а-яёА-ЯЁa-zA-Z0-9._ ]+$/g;
    33.         var resNam = nam.search(expNam);
    34.         if(resNam  == -1){
    35.             $("#nam").removeClass().addClass("inputRed");
    36.             namStat = 0;
    37.             buttonOnAndOff();
    38.         }else{
    39.             $("#nam").removeClass().addClass("inputGreen");
    40.             namStat = 1;
    41.             buttonOnAndOff();
    42.         }      
    43.     });
    44.         $("#nam").keyup(function(){
    45.         $("#nam").removeClass();
    46.         $("#nam").next().text("");
    47.     });
    48.  
    49.  
    50.  
    51.  
    52.  
    53.  
    54.     //Логин
    55.     $("#login").change(function(){
    56.         login = $("#login").val();
    57.         var expLogin = /^[a-zA-Z0-9._]+$/g;
    58.         var resLogin = login.search(expLogin);
    59.         if(resLogin == -1){
    60.             $("#login").removeClass().addClass("inputRed");
    61.             loginStat = 0;
    62.             buttonOnAndOff();
    63.         }else{
    64.             $.ajax({
    65.             url: "rez2.php",
    66.             type: "POST",
    67.             data: "login=" + login,
    68.             cache: false,
    69.             success: function(response){
    70.                 if(response == "no"){
    71.                     $("#login").removeClass().addClass("inputRed");                
    72.                 }else{ 
    73.                     $("#login").removeClass().addClass("inputGreen");
    74.                     $("#login").next().text("");
    75.                    
    76.                 }          
    77.                
    78.             }
    79.         });
    80.             loginStat = 1;
    81.             buttonOnAndOff();
    82.         }
    83.        
    84.     });
    85.     $("#login").keyup(function(){
    86.         $("#login").removeClass();
    87.         $("#login").next().text("");
    88.     });
    89.    
    90.  
    91.  
    92.  
    93.     // Email
    94.     $("#email").change(function(){
    95.         email = $("#email").val();
    96.         var expEmail = /[-0-9a-z_]+@[-0-9a-z_]+\.[a-z]{2,6}/i;
    97.         var resEmail = email.search(expEmail);
    98.         if(resEmail == -1){
    99.             $("#email").removeClass().addClass("inputRed");
    100.             emailStat = 0;
    101.             buttonOnAndOff();
    102.         }else{
    103.            
    104.             $.ajax({
    105.             url: "rez2.php",
    106.             type: "POST",
    107.             data: "email=" + email,
    108.             cache: false,          
    109.             success: function(response){
    110.                 if(response == "no"){
    111.                     $("#email").removeClass().addClass("inputRed");                
    112.                 }else{     
    113.                     $("#email").removeClass().addClass("inputGreen");
    114.                     $("#email").next().text("");
    115.                 }                  
    116.             }
    117.         });
    118.             emailStat = 1;
    119.             buttonOnAndOff();
    120.         }
    121.        
    122.     });
    123.     $("#email").keyup(function(){
    124.         $("#email").removeClass();
    125.         $("#email").next().text("");
    126.     });
    127.    
    128.    
    129.     //Пароль
    130.     $("#password").change(function(){
    131.         password = $("#password").val();
    132.         if(password.length < 6){
    133.             $("#password").removeClass().addClass("inputRed");
    134.             passwordStat = 0;
    135.             buttonOnAndOff();
    136.         }else{
    137.             $("#password").removeClass().addClass("inputGreen");
    138.             $("#password").next().text("");
    139.             passwordStat = 1;
    140.             buttonOnAndOff();
    141.         }      
    142.     });
    143.     $("#password").keyup(function(){
    144.         $("#password").removeClass();
    145.         $("#password").next().text("");
    146.     });
    147.    
    148.     //Проверка пароля
    149.     $("#password2").change(function(){
    150.         if(password2 != password){
    151.             $("#password2").removeClass().addClass("inputRed");
    152.             password2Stat = 0;
    153.             buttonOnAndOff();
    154.         }else{
    155.             $("#password2").removeClass().addClass("inputGreen");
    156.             $("#password2").next().text("");
    157.         }      
    158.     });
    159.     $("#password2").keyup(function(){
    160.         password2 = $("#password2").val();
    161.         if(password2 == password){
    162.             password2Stat = 1;
    163.             buttonOnAndOff();
    164.         }else{
    165.             password2Stat = 0;
    166.             buttonOnAndOff();
    167.         }
    168.     });
    169.    
    170.    
    171.     function buttonOnAndOff(){
    172.         if(namStat == 1 && emailStat == 1 && passwordStat == 1 && password2Stat == 1 && loginStat == 1){
    173.             $("#submit").removeAttr("disabled");
    174.         }else{$("#submit").attr("disabled","disabled");}
    175.    
    176.     }
    177.  
    178.  
    179.  
    180.  
    181.    
    182.             //Нажата кнопка
    183.                
    184.    
    185.    $("#submit").onsubmit(function(){
    186.       //var nam = $("#nam").val(); 
    187.           //var login = $("#login").val();
    188.       //var email = $("#email").val();
    189.       //var password = $("#password").val();
    190.            
    191.       $.ajax({
    192.          type: "POST",
    193.          url: "rez2.php",
    194.     data: "data1=$d1&data2=$d2&data3=$d3",
    195.         // data: {"nam": nam, "login": login, "email": email, "password": password},
    196.          cache: false,
    197.          success: function(response){}
    198.           });
    199.           return false;
    200.                                                                
    201.     });
    202.  
    203.    
    204.    
    205.        
    206.        
    207.        
    208.        
    209.        
    210.        
    211.        
    212.        
    213.        
    214.        
    215.        
    216.        
    217.    
    218.    
    219.    
    220. });
    221.  
    222.  
    223.  
    224.  
    225.  
    226.  
    227.  
    228. </script>
    файл rez2.php
    Код (Text):
    1. <?
    2.  
    3. $host='localhost'; // имя хоста (уточняется у провайдера)
    4. $database='baza'; // имя базы данных, которую вы должны создать
    5. $user='root'; // заданное вами имя пользователя, либо определенное провайдером
    6. $pswd=''; // заданный вами пароль
    7.  
    8. // подключаемся к MySQL
    9. $dbh = mysql_connect($host, $user, $pswd) or die("Не могу соединиться с MySQL.");
    10. mysql_select_db($database) or die("Не могу подключиться к базе.");
    11.  
    12.  
    13. //$nam=1;
    14. //$login=2;
    15. //$email=3;
    16. //$password=4;
    17.  
    18.  
    19. //$result = mysql_query ("INSERT INTO users VALUES ('',$nam,$login,$email,md5($password))");
    20. //if ($result) echo "Книга добавлена в базу данных.";
    21.  
    22.  
    23.  
    24.  
    25.  
    26. if(isset($_POST['email'])){
    27.  
    28.  
    29.     $email = $_POST['email'];
    30.     $str=mysql_result(mysql_query("SELECT COUNT(email) FROM users WHERE email='".$email."'"),0);
    31.     if($str == 1){
    32.         echo "no";
    33.     }else{
    34.         echo "yes";
    35.     }
    36. }
    37.  
    38.  
    39.  
    40.  
    41.  
    42.  
    43.  
    44.  
    45.  
    46.  
    47. if(isset($_POST['login'])){
    48.     $login = $_POST['login'];
    49.     $str=mysql_result(mysql_query("SELECT COUNT(login) FROM users WHERE login='".$login."'"),0);
    50.     if($str == 1){
    51.         echo "no";
    52.     }else{
    53.         echo "yes";
    54.     }
    55. }
    56.  
    57.  
    58.  
    59.  
    60.  
    61.  
    62. if(isset($_POST['submit'])){
    63.  
    64. $nam=100;
    65. $login=200;
    66. $email=300;
    67. $password=400;
    68.  
    69.  
    70. $result = mysql_query ("INSERT INTO users VALUES ('',$nam,$login,$email,md5($password))");
    71. if ($result) echo "Книга добавлена в базу данных.";
    72.  
    73. }
    74.  
    75.  
    76.  
    77. ?>
    не могу отправить и обработать форму выручайте
    проверка полей работает
     
  2. smitt

    smitt Старожил

    С нами с:
    3 янв 2012
    Сообщения:
    3.166
    Симпатии:
    65
    Копаться в этой коде сложно. Скажи ты смотрел js дебагер на наличие ошибок?
    еррор лог веб сервера?
    Если не работает, значит где то ошибка, если есть ошибка значит она есть в логах.
     
  3. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    каким js дебагер проверить?

    Добавлено спустя 1 минуту 37 секунд:
    упрощаю вопрос
    форма та же

    Код (Text):
    1. //Нажата кнопка
    2.            
    3.    
    4.    $("#submit").onsubmit(function(){
    5.      //var nam = $("#nam").val();  
    6.            //var login = $("#login").val();
    7.      //var email = $("#email").val();
    8.      //var password = $("#password").val();
    9.            
    10.       $.ajax({
    11.          type: "POST",
    12.          url: "rez2.php",
    13.    data: "data1=$d1&data2=$d2&data3=$d3",
    14.         // data: {"nam": nam, "login": login, "email": email, "password": password},
    15.          cache: false,
    16.          success: function(response){}
    17.           });
    18.           return false;
    19.                                                                
    20.     });
    что не так в коде
     
  4. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    Дебагер - например, вкладка console в фаерфоксовом Firebug.
    Поставьте в начало функции alert('123'), чтобы понять, вызывается ли функция вообще.
    Поставьте в success что-нибудь типа console.log(response), чтобы понять, что вам возвращают.
    Передайте в rez2.php те же данные, но обычным постом, не через ajax, и посмотрите, что он возвращает.
     
  5. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    ничего не могу понять запутался помогите можно кодом
     
  6. smitt

    smitt Старожил

    С нами с:
    3 янв 2012
    Сообщения:
    3.166
    Симпатии:
    65
    igroc у тебя здесь много кода. Где дебагер js знаешь? В хроме по Ф12 откроется вкладка перейди на console.
    Есть там ошибка?
    Пихни в самое начало функции js алерт проверь что функция вызывается.
     
  7. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    написано в хроме
    inspector registered
    что означает не понимаю

    пихаю в начало функции результата нет
     
  8. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    Значит, эта функция у тебя не вызывается.
    Пихни в самое начало js-кода, может, у тебя JS вообще отключен?
     
  9. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    не получается
    кнопка <input type="submit" name="submit" value="Зарегистрироваться" id="submit" disabled><br><br>

    скрипт
    script type="text/javascript">
    //при клике на кнопку
    $("#submit").submit(
    function() {

    //отправляем ( куда , что (имя / значение) , получаем ответ)
    $.post('rez2.php', { nam: $("#nam").val() } , function(data) {
    //ответ заносим в див
    $('#result1').html(data);
    } );
    }

    );
    </script>

    файл обработки rez2.php
    if(isset($_POST['submit'])){

    $nam=100;
    $login=200;
    $email=300;
    $password=400;


    $result1 = mysql_query ("INSERT INTO users VALUES ('',$nam,$login,$email,md5($password))");
    if ($result1) echo "Книга добавлена в базу данных.";

    }

    Добавлено спустя 3 минуты 23 секунды:
    проверка формы проходит там тоже данные из базы бирутся
     
  10. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    if(isset($_POST['submit'])){
    Ну естественно, откуда бы ему взяться, если в форму не передается никакой $_POST['submit'], а только nam: $("#nam").val()
     
  11. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    непонял
    опишу что работает
    есть на форме логин

    <label>Логин:</label><input name="login" type="text" size="50" id="login"> <span></span><br>

    js

    $("#login").change(function(){
    login = $("#login").val();
    var expLogin = /^[a-zA-Z0-9._]+$/g;
    var resLogin = login.search(expLogin);
    if(resLogin == -1){
    $("#login").removeClass().addClass("inputRed");
    loginStat = 0;
    buttonOnAndOff();
    }else{
    $.ajax({
    url: "rez2.php",
    type: "POST",
    data: "login=" + login,
    cache: false,
    success: function(response){
    if(response == "no"){
    $("#login").removeClass().addClass("inputRed");
    }else{
    $("#login").removeClass().addClass("inputGreen");
    $("#login").next().text("");

    }

    }
    });
    loginStat = 1;
    buttonOnAndOff();
    }

    });
    $("#login").keyup(function(){
    $("#login").removeClass();
    $("#login").next().text("");
    });

    rez2.php

    if(isset($_POST['login'])){
    $login = $_POST['login'];
    $str=mysql_result(mysql_query("SELECT COUNT(login) FROM users WHERE login='".$login."'"),0);
    if($str == 1){
    echo "no";
    }else{
    echo "yes";
    }
    }

    и проверка проходит а кнопку как не могу понять
     
  12. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    Проверил у себя, убрав эти непонятные buttonOnAndOff - все работает.
    Дебажьте методом Франкенштейна - по кусочкам. Выбросили все вообще, проверили, что PHP-код правильно отрабатывает, передавая запрос руками. Потом проверили, что ajax инициируется. Потом - что правильные значения в rez.php передает.
    Вообще - ставьте alert во всех местах и проверяйте, как у вас идет исполнение кода. Я из ваших объяснений не могу понять ничего.
     
  13. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    это проверяет все поля. если правильно заполнены кнопка активна иначе не активна
     
  14. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    почему то не получается уже вынес для проверки

    сам файл весь
    Код (Text):
    1. <? session_start(); error_reporting(0);?>
    2. <!DOCTYPE html>
    3. <html>
    4. <head>
    5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    6. <title>Простой пример использования AJAX</title>
    7. <link rel="stylesheet" type="text/css" href="style.css" />
    8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    9.  
    10. </head>
    11. <body>
    12.     <table>
    13.         <tr>
    14.             <th>Запрос</th>
    15.             <th>Ответ сервера</th>
    16.         </tr>
    17.         <tr>
    18.             <td>
    19.                
    20.                
    21.        
    22.         <form action="" method="post">
    23.        
    24.        
    25.         <label>Переменная 1: <input type="text" size="10" id="data_1" /></label><br /><br>
    26.         <label>Переменная 2: <input type="text" size="10" id="data_2" /></label><br /><br>
    27.        
    28.        
    29.                 <label>ФИО:</label>
    30.                 <input name="nam" type="text" size="50" id="nam"><br>
    31.                 <label>Логин:</label>
    32.                 <input name="login" type="text" size="50" id="login"><br>  
    33.                 <label>E-mail:</label>
    34.                 <input name="email" type="text" size="50" id="email"><br>  
    35.                 <label>Пароль:</label>
    36.                 <input name="password" type="password" size="50" id="password"><br>
    37.                 <label>Подтвердите пароль:</label>
    38.                 <input name="password2" type="password" size="50" id="password2"><br><br>
    39.                 </form>
    40.                 <input type="submit" name="submit" value="Зарегистрироваться" id="submit" onclick="SendRequest();" ><br><br>
    41.                         <center>Все поля, обязательные для заполнения.</center>
    42.        
    43.                
    44.                
    45.                
    46.    
    47.                
    48.             </td>
    49.             <td>
    50.                 <div id="response"></div>
    51.             </td>
    52.         </tr>
    53.     </table>
    54. </body>
    55.  
    56.  
    57.  
    58. <script type="text/javascript">
    59. function SendRequest(){
    60.     $.ajax({
    61.         type: "POST",
    62.         url: "obrabotchik.php",
    63.        
    64.         data: "sid=<?=session_id()?>&nam="+$('#nam').val()+"&login="+$('login').val()+"&email="+$('email').val()+"&password="+$('password').val()+"&data_1="+$('#data_1').val()+"&data_2="+$('#data_2').val(),
    65.            
    66.        
    67.         success: function(response){
    68.             $('#response').html(response);
    69.         }
    70.     });
    71. };
    72. </script>
    73. </html>
    и обработчик obrabotchik.php
    Код (Text):
    1. <?
    2. session_start();
    3. if(session_id() != $_POST['sid']) die('Wrong Request');
    4. ?>
    5.  
    6. Значение переменной 1:<br />
    7. <strong><?=$_POST['data_1']?></strong>
    8. <hr />
    9. Значение переменной 2:<br />
    10. <strong><?=$_POST['data_2']?></strong>
    11. <hr />
    12. Значение переменной nam:
    13. <strong><?=$_POST['nam']?></strong>
    14. <hr />
    15. Значение переменной login:
    16. <strong><?=$_POST['login']?></strong>
    17. <hr />
    18. Значение переменной email:
    19. <strong><?=$_POST['email']?></strong>
    20. <hr />
    21. Значение переменной password:
    22. <strong><?=$_POST['password']?></strong>
    и что не так не пойму
     
  15. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    Код верный, у меня все работает. Ищите ошибку за пределами этого кода.