在 PHP 表单验证后更改 img 属性并使用 jQuery 禁用输入

Question

我正在尝试更改图像元素的 'src'，并在验证并提交表单后将输入元素的属性更改为 'readonly'。表单的验证发生在 PHP 中，因此我无法附加 on submit 事件处理程序，因为即使表单未通过验证它也会触发。如果没有某种插件，有没有办法做到这一点？

<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">  </script>
 </head>

 <body>

  <script> 
   $(document).ready(function() 
   {
      $("#button_img").click(function ()
      {
         alert("button clicked");
         $("#course_name").css("background-color", "yellow");
         $("#course_name").attr("readonly",true);
         $("#button_img").attr('src','../images/edit_course.png');
      });
   });    

  </script>

  <form id='design_course'  action="<?php ($_SERVER['PHP_SELF']); ?>" method="post">
   <label id="course_name_label">Course Name:</label>
   <input type=text   id="course_name" name="course_design_name" value="default">
   <button  id="create_course" type="submit" ><img id="button_img" src="../images/create_course.png"></button>  
  </form>

 </body>
</html>

Answer 1

由于您为此使用的验证逻辑是服务器端的，因此页面将在重新加载期间发生变化。因此，您在 HTML 中有条件地设置值的逻辑将是服务器端。

您可以根据任何if 语句从PHP 有条件地输出到页面。您没有显示验证逻辑，但为了示例起见，我们假设如果验证通过，则有一个名为 $passedValidation 的布尔变量。然后你可以在你的代码中做这样的事情：

<?php if ($passedValidation) { ?>
    <img id="button_img" src="../images/something_else.png">
<?php } else { ?>
    <img id="button_img" src="../images/create_course.png">
<?php } ?>

所以请注意，如果形式 "passed validation" 那么使用的图像是 something_else.png 而不是 create_course.png。因此，当页面在通过验证逻辑后重新加载时，用户将看到另一张图片。

其他 HTML 输出也可以这样做。如何组织它取决于您，因为为页面上的各种属性重复使用相同的 if/else 结构可能会变得很丑陋。也许您可以将两个完整的表格包裹在一个 if/else 块或类似的东西中。

另请注意，您需要 $passedValidation 的默认大小写 false 来处理首次加载页面且根本没有提交表单时的情况。

在 PHP 表单验证后更改 img 属性并使用 jQuery 禁用输入

Change img attribute and disable inputs with jQuery after PHP form validation

php

jquery

jquery-form-validator