我可以在表单提交上调用php文件，并从中调用或回显JS函数吗？

Question

So I'm basically trying to create an HTML form that will

1. process my login through php POST method
2. close my login lighbox with javascript, or display an error (right now I'm using JS to change an invisible form value under the login form.

HTML

      if (isset($_GET['error'])) {
             echo '<p class="error">Error Logging In!</p>';
          }?>
      <br />
       <form action="process_login.php" method="post" name="login_form">                      
           Email: <input class="searchform" type="text" name="email" size="20"/><br />
           Password: <input class="searchform" type="password" 
                         name="password" 
                           id="password" size="20"/><br />
          <input type="button"  class="searchform"
               value="Submit" size="40"  style="height:45px; width:90px"
               onclick="formhash(this.form, this.form.password);" /> 
   <input type="text" id="errorbox" style="height:45px; width:180px" value=""><br>
   </form>

here's the php file:

    if (isset($_POST['email'], $_POST['p'])) {
      $email = $_POST['email'];
      $password = $_POST['p'];

      if (login($email, $password, $mysqli) == true) {
      // Login success 
    echo "<script>document.getElementById('light').style.display=
      'none';document.getElementById('fade').style.display=    'none'</script>";
    } else {
      // Login failed 
      echo "<script>document.getElementById('errorbox').value='Error'</script>";
  }
  } else {
     // The correct POST variables were not sent to this page. 
     echo 'Invalid Request';
   }

I know I'm not doing this right, I'm just not sure HOW to do it at all...

Answer 1

Well, yes, technically you can do that, but it is a VERY bad practice, and extremely not clean.

what you'd prefer to do is use Ajax, and do those JS actions in it's success callback:

Note: you will need to include the jQuery lib in your scripts.

Another none: if you don't have PHP 5.4 on your server, just remove the second callback function, and handle all the scenarios in the success callback

!(function($){
   $(function() {
         $('#submitBtn').on('submit', function(){
            $.post('process_login.php', $('form[name="login_form"]').serialize(), function(data){
              //data is a json object which contans the reponse
              data = $.parseJSON(data);
              $("fade").fadeOut();
              $("light").fadeOut();
            },
            function(data){//error callback
              data = $.parseJSON(data);
              if(data.forbidden){
                  $("#errorBox").html("Error!");
              }
              else if(data.error){
                $("#errorBox").html("Invalid request!");
              }
            });
          });

    });
})(window.jQuery);

HTML:

<form name="login_form">
  <div>
    <input type="text" name="email" placeholder="email">
  </div>
  <div>
    <input type="password" name="p" placeholder="password">
  </div>
  <div>
    <input type="button" id="submitBtn" value="Login">
  </div>
</from>

PHP:

$response = array();
if (isset($_POST['email'], $_POST['p'])) {
  $email = $_POST['email'];
  $password = $_POST['p'];

      if (login($email, $password, $mysqli) == true) {
          http_response_code(200);//HTTP OK, requires php 5.4
          $response['success'] = true;

    } else {
      // Login failed 
      $response['forbidden'] = true;
      http_response_code(401);//HTTP forbidden
  }
  } else {
     // The correct POST variables were not sent to this page. 
      $response['error'] = true;
      http_response_code(400);//HTTP bad request
   }

echo json_encode($response);

Answer 2

add onsubmit event attribute to the form: <form onsubmit="return validate();"> ...

where validate() is a js function that closes lightbox and returns true if form is ok, or displays errors and returns false if form is bad.