0

I have a form to insert user to a database. On the other side I have two scripts of password validation and ajax script which retrieve php result.

Right now the two script are working separately.

What should I do so that the ajax script run after the password validation?

Password Validation

 function Validate() {
        var password = document.getElementById("UserPwd").value;
        var confirmPassword = document.getElementById("ConfirmUserPwd").value;
        if (password != confirmPassword) {
            alert("Please enter the same password");
            return false;
        }
        return true;
    }

Script

  $.ajax({
      url: "insert_sp.php",
      method: "POST",
      data: {submit: 'true'},
      success: function(response) {

        var data = JSON && JSON.parse(response) || $.parseJSON(response);
        alert(data);
    }
});

Update

isset : if(isset($_POST['Submit']))

button : <input type="submit" name="Submit" value="Submit"/>

$(function() {
  $("#myForm").on("sumbit", function(e) {
    e.preventDefault(); 
    var password = $("#UserPwd").val(),
      confirmPassword = $("#ConfirmPassword").val(); 
    if ($.trim(password) === password && 
        password !== "" &&               
        password === confirmPassword) { 
      $.ajax({
        url: "insert_sp.php",
        method: "POST",
        data: {
          submit: 'true' 
        },
        success: function(response) {
          var data = JSON && JSON.parse(response) || $.parseJSON(response);
          alert(data);
        }
      });
    }
    else {
      alert("Please enter the same password");
    }
  });
});
Iman Yasmin
  • 447
  • 2
  • 11
  • 31
  • http://stackoverflow.com/questions/25970071/how-to-perform-some-action-before-submit-form-via-ajaxform this might help –  Mar 13 '17 at 05:52
  • Now the question does no longer make sense - but you still need to change `submit: 'true' ` to `Submit: 'true' ` – mplungjan Mar 14 '17 at 06:46

2 Answers2

2
  1. Never call anything "submit" in a form. It will hide the submit event if you need it.

  2. Use the form's submit event and event.preventDefault instead of submit buttons click events

  3. If you have jQuery, why not use it all the way?

  4. Remember to do the exact same validation on the server before inserting

I cannot make you a running snippet because SO does not allow submit in their pages. Here is the code - it should work as designed

$(function() {
  $("#myForm").on("submit", function(e) {
    e.preventDefault(); // cancel form submission
    var password = $("#UserPwd").val(),
      confirmPassword = $("#ConfirmPassword").val();
    console.log(password,confirmPassword)  
    if ($.trim(password) === password && // spaces?
      password !== "" && // empty?
      password === confirmPassword) { // the same?
      $.ajax({
        url: "insert_sp.php",
        method: "POST",
        data: {
          Submit: 'true' // remember to change the $_POST test too
        },
        success: function(response) {
          var data = $.parseJSON(response);
          console.log(data);
        }
      });
    } else {
      alert("Please enter the same password");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="password" value="" id="UserPwd" /><br/>
  <input type="password" value="" id="ConfirmPassword" /><br/>
  <input type="submit" name="Submit" value="Submit" />
</form>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Is your point of _Never call anything "submit" in a form_ refer to the submits of the button? I'm a beginner and trying to understand. Is there any different if I tell you I use `if(isset($_POST['submit']))` for the submit? – Iman Yasmin Mar 13 '17 at 06:36
  • The point is that form.submit will no longer be an event but the button. Just change the $_POST['submit'] to $_POST['Submit'] or something else and change the name of the button to Submit if you need. – mplungjan Mar 13 '17 at 06:37
  • Alright, I get it. I've tried your solution but when I entered differents password, the data is still sent to the db. @mplungjan – Iman Yasmin Mar 14 '17 at 03:41
  • Look in console – mplungjan Mar 14 '17 at 05:02
  • There is no error. @mplungjan . I updated my question. If you don't mind can you please have a look? – Iman Yasmin Mar 14 '17 at 06:07
  • You should not have updated the question since now it no longer makes sense. You do have to change the `submit: 'true'` to `Submit: 'true'` since you changed the $_POST test on the server – mplungjan Mar 14 '17 at 06:48
  • The password validation worked perfectly. But unexpectedly this error come out `Uncaught SyntaxError: Unexpected token` at this line `var data = JSON && JSON.parse(response) || $.parseJSON(response);` . I think I have to ask a new question. Thank you for your time :) I learned a lot. – Iman Yasmin Mar 15 '17 at 01:00
  • Make sure your JSON is valid – mplungjan Mar 15 '17 at 04:45
  • `Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'undefined'` The error I got when validate the json @mplungjan . Now, a popup which contains html code of xdebug-error and some of my user form keep coming out for success response. – Iman Yasmin Mar 15 '17 at 06:37
  • Please ask a new question. Be sure to include the JSON structure with an example – mplungjan Mar 15 '17 at 06:42
  • PS> No need to do native JSON parsing when using jQuery anyway: var `data = $.parseJSON(response);` – mplungjan Mar 15 '17 at 06:43
  • [Here](http://stackoverflow.com/questions/42800415/uncaught-syntaxerror-unexpected-token-in-json-at-position-0/42800919#42800919) . – Iman Yasmin Mar 15 '17 at 06:47
0

Make a other functuon of ajax request after password validation if success then call ajax function like below.

function ajax_request(){
$.ajax({
url: "insert_sp.php",
method: "POST",
data: {submit: 'true'},    
success: function(response) {
var data=JSON&&JSON.parse(response)||$.parseJSON(response);
alert(data);
console.log(data);
}
});

function Validate() {
var password = document.getElementById("UserPwd").value;
var confirmPassword = document.getElementById("ConfirmPassword").value;
if (password == confirmPassword) {
ajax_request();            
}else{
alert("Wrong Password");
return false;
}
}
bharat savani
  • 339
  • 5
  • 18