button.addEventListener在浏览器上有效,但在Android浏览器上无效

时间:2019-06-01 10:39:32

标签: javascript mobile browser

当前正在网站上工作,并且正在使用JavaScript。我在按钮上使用了addEventListener,以便当用户单击它时将用户输入数据发送到数据库。它可以在我的笔记本电脑上正常工作,但不能在我的手机上工作。在移动设备上单击该按钮时,它将刷新页面。

HTML

<div class="lg-devices">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-1 col-md-1" style="padding:0px;">
                <div class="side-bar">
                    <div>
                        <i class="fas fa-cannabis"></i>
                    </div>
                    <div>
                        <i class="fas fa-user-friends"></i> 
                    </div>
                    <div>
                        <i class="fas fa-crown"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-10 col-md-11 col-sm-12 col-xs-12">
                <div class="container main-content">
                    <div class="row justify-content-md-center">
                        <div class="col-lg-10 col-md-12 col-sm-12 col-xs-12">
                        <h3> <i class="fas fa-user-lock"></i> Change Password</h3>
                        <h6>You can change your password here</h6>
                        <div class="card add-more-box-shadow">
                            <div class="card-body">
                                <h4>Personal Information</h4>
                                <form>
                                    <div class="form-row">
                                        <div class="form-group col-md-12 col-lg-12 col-12">
                                        <label for="inputEmail4">Old Password</label>
                                        <input type="text" class="form-control" id="oldPassword" placeholder="Old Password">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-6 col-12">
                                        <label for="inputPassword4">New Password</label>
                                        <input type="text" class="form-control" id="newPassword" placeholder="Last Name">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-6 col-12">
                                        <label for="inputPassword4">Confirm Password</label>
                                        <input type="text" class="form-control" id="confirmPassword" placeholder="Confirm Password">
                                        </div>
                                    </div>
                                    <button class="btn btn-primary" id="changePassword"  style="width: 100%; height: 60px;">
                                        Update <i class="fas fa-edit"></i> 
                                        <img src="includes/images/rolling.gif" />
                                     </button>
                                </form> 
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="small-devices">
    <div class="row">
        <div class="col-lg-10 col-md-11 col-sm-12 col-xs-12">
            <div class="container main-content">
                <div class="row justify-content-md-center">
                    <div class="col-lg-10 col-md-12 col-sm-12 col-xs-12">
                    <h3> <i class="fas fa-user-lock"></i> Change Password</h3>
                    <h6>You can change your password here</h6>
                    <div class="card add-more-box-shadow">
                        <div class="card-body">
                            <h4>Personal Information</h4>
                            <form>
                                <div class="form-row">
                                    <div class="form-group col-md-12 col-lg-12 col-12">
                                    <label for="inputEmail4">Old Password</label>
                                    <input type="text" class="form-control" id="oldPassword" placeholder="Old Password">
                                    </div>
                                    <div class="form-group col-md-6 col-lg-6 col-12">
                                    <label for="inputPassword4">New Password</label>
                                    <input type="text" class="form-control" id="newPassword" placeholder="Last Name">
                                    </div>
                                    <div class="form-group col-md-6 col-lg-6 col-12">
                                    <label for="inputPassword4">Confirm Password</label>
                                    <input type="text" class="form-control" id="confirmPassword" placeholder="Confirm Password">
                                    </div>
                                </div>
                                <button class="btn btn-primary" id="changePassword"  style="width: 100%; height: 60px;">
                                    Update <i class="fas fa-edit"></i> 
                                    <img src="includes/images/rolling.gif" />
                                </button>
                            </form> 
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT

/* hide preloader  */
$("#changePassword img").css({"display": "none"});

var changePassword = document.querySelector("#changePassword");
console.log(changePassword);
changePassword.addEventListener("click", function(evt){ 
  evt.preventDefault();

  /* show preloader  */
  $("#changePassword i").css({"display": "none"});
  $("#changePassword img").css({"display": "inline"});

  /* get the client data */
  var voldPassword = document.querySelector("#oldPassword").value;
  var vnewPassword = document.querySelector("#newPassword").value;
  var vconfirmPassword = document.querySelector("#confirmPassword").value;
  checkIfPasswordExist(voldPassword, vnewPassword, vconfirmPassword)

});

  function checkIfPasswordExist(voldPassword, vnewPassword, vconfirmPassword){

    /* Send all data to the server */
    var request = $.ajax({
      url: "clientJavascriptRequests.php",
      method: "POST",
      data: { 
              oldPassword: voldPassword,
              functionName: 'checkIfPasswordExist'
            },
      contentType: 'application/x-www-form-urlencoded',
    });
    request.done(function( msg ) {
      checkifUpdateIsSuccessful(msg)
    });

    request.fail(function( jqXHR, textStatus ) {
      $.notify("Network error. Please Try again", "error");
    });

    function checkifUpdateIsSuccessful(msg){
      if(msg === "confirmed"){
        /* check if password match */
        if(vnewPassword === vconfirmPassword){
          /* send password to server function */
          sendDataToServer(voldPassword, vnewPassword, vconfirmPassword)
        }else{
          setTimeout(function(){
          $.notify("Password does not match", "error");

          /* show icon  */
          $("#changePassword i").css({"display": "inline"});
          $("#changePassword img").css({"display": "none"});
          }, 3000);

        }
      }else{
        setTimeout(function(){
          $.notify("Password does not match our database", "error");

        /* show icon  */
        $("#changePassword i").css({"display": "inline"});
        $("#changePassword img").css({"display": "none"});
        }, 3000);
      }
    }
  }
  function sendDataToServer(voldPassword, vnewPassword, vconfirmPassword){

  /* Send all data to the server */
  var request = $.ajax({
    url: "clientJavascriptRequests.php",
    method: "POST",
    data: { 
            newPassword: vnewPassword,
            functionName: 'changePassword'
          },
    contentType: 'application/x-www-form-urlencoded',
  });
  request.done(function( msg ) {
    checkifUpdateIsSuccessful(msg)
  });

  request.fail(function( jqXHR, textStatus ) {
    $.notify("Network error. Please Try again", "error");
  });

  function checkifUpdateIsSuccessful(msg){
    if(msg === "done"){

      setTimeout(function(){

        $.notify("Update Successful", "success");

        /* Clear inputs */
        document.querySelector("#oldPassword").value = "";
        document.querySelector("#newPassword").value = "";
        document.querySelector("#confirmPassword").value= "";



        /* show icon  */
        $("#changePassword i").css({"display": "inline"});
        $("#changePassword img").css({"display": "none"});

      }, 3000);
    }else{
      setTimeout(function(){
        $.notify("error: " + msg, "error");

      /* show icon  */
      $("#changePassword i").css({"display": "inline"});
      $("#changePassword img").css({"display": "none"});


      }, 3000);
    }
  }
  }

我希望在网络和移动设备上都能获得相同的结果

0 个答案:

没有答案