остановить отправку формы ajax

209

19 декабря 2016, 19:36

Как при соответствующем ответе от пхп файла остановить отправку формы.Сейчас форма отправляется в любом случае.

 (function(){    
xml = eventsObj.getXmlHttp();    
         if(document.getElementById('hidden_change_password_table')){          
            changePassword = function(){
            var newPwd = document.getElementById('new_password').value,
                repeatPwd = document.getElementById('new_password_repeat').value;
                password = document.getElementById('old_password').value;
            if(password === "" || repeatPwd === "" || newPwd === "" || (password != repeatPwd)){
                document.getElementById('new_error').innerHTML = "new pwd != repeat pwd/ empty field";                               
            }
            else{
                xml.open("POST","../model/ajax/change_password.php",true);
                xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xml.send("password="+encodeURIComponent(password));
                xml.onreadystatechange = function(){
                    if(xml.readyState === 4){
                        if(xml.status === 200){
                            if(xml.responseText !== ""){
                                if(xml.responseText === "ok"){
                                    alert("old pwd == db pwd");                                    
                                }
                                else if(xml.responseText === "error"){
                                    document.getElementById('old_error').innerHTML = "old pwd != db pwd";
                                }   
                            }
                        }
                    }
                };
            }
    };
            eventsObj.addEvent(document.getElementById('change_pwd_form'), 'submit', changePassword, false);
        }
    })();

php

// $result[2]["password"] - пароль из бд
    if ( $_POST['old_password'] == $result[2]["password"] ){
        echo "ok";
    } else  {
        echo "error";
    }

Answer 1

Вот примерно так, можно реализировать всё это. Данные для переменной tmp_pass можно получать по-другому через json, или проверкой уже на бэкенде.

Если нужно больше деталей - то пишите на почту romanko95.rk@gmail.com. И после нахождения ответа - мы поделимся им с другими.

$(document).ready(function() { 
  var tmp_pass = "ooiusger7c34to7y" 
  var type = 1; 
 
  $('form input[type="button"]').on('click', function() { 
    $('form input[type="button"]').attr('disabled', 'disabled'); 
    var formData = $('form').serialize(); 
 
    switch (type) { 
      case 1: 
        if (tmp_pass != $('input[name="cPass"]').val()) { 
          $('div#result').removeClass('success').addClass('failed').text('Wrong current password').fadeIn(2000).fadeOut(2000); 
 
        } else { 
 
          if ($('input[name="pass1"]').val() == $('input[name="pass2"]').val()) { 
            $('div#result').removeClass('failed').addClass('success').text('Password changed to ' + $('input[name="pass1"]').val()).fadeIn(2000).fadeOut(2000); 
            tmp_pass = $('input[name="pass1"]').val(); 
          } else { 
            $('div#result').removeClass('success').addClass('failed').text('Wrong passwords for changing').fadeIn(2000).fadeOut(2000); 
          } 
 
        } 
        break; 
      case 2: 
 
        if ($('input[name="pass1"]').val() == $('input[name="pass2"]').val()) { 
 
          $.post('change_password.php', formData, function(resp) { 
            resp = JSON.parse(resp); 
 
            switch (resp['status']) { 
              case 1: 
                $('div#result').removeClass('failed').addClass('success').text('Password changed to ' + $('input[name="pass1"]').val()).fadeIn(2000).fadeOut(2000); 
 
                tmp_pass = $('input[name="pass1"]').val(); 
 
                break; 
              case 0: 
              default: 
                $('div#result').removeClass('success').addClass('failed').text('Wrong passwords for changing').fadeIn(2000).fadeOut(2000); 
                break; 
            } 
 
          }); 
 
        } else { 
          $('div#result').removeClass('success').addClass('failed').text('Wrong passwords for changing').fadeIn(2000).fadeOut(2000); 
        } 
 
 
        break; 
    } 
 
    $('form input[type="button"]').removeAttr('disabled'); 
 
 
  }); 
 
});

form { 
  width: 400px; 
  margin: 20px auto; 
  padding: 10px; 
} 
form input, 
form button { 
  width: 100%; 
  margin: 5px auto; 
  padding: 7px; 
} 
div#result { 
  width: 40%; 
  margin: 20px auto; 
  text-align: center; 
  border-radius: 10px; 
  padding: 10px; 
  ; 
} 
.success { 
  background: green; 
} 
.failed { 
  background: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
  <input type="hidden" name="id" value="5"> 
  <input type="password" name="cPass"> 
  <br> 
  <input type="password" name="pass1"> 
  <br> 
  <input type="password" name="pass2"> 
  <br> 
  <input type='button' value='Change Password'> 
</form> 
 
<div id="result" style="display : none;"></div>