在 PHP 表单验证后使用 jQuery 更改图像属性和禁用输入答案

【问题标题】：Change img attribute and disable inputs with jQuery after PHP form validation在 PHP 表单验证后使用 jQuery 更改图像属性和禁用输入
【发布时间】：2017-06-20 11:08:05
【问题描述】：

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

<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>

【问题讨论】：

如果您使用submit按钮，您的表单将被提交，您需要使用普通按钮而不是提交按钮以及使用$('#design_course').submit()手动提交表单
或者您可以添加一个隐藏的表单字段，该字段在验证通过后和表单提交前设置。提交后，您将检查此隐藏字段的某个值，表明您必须更改 src 和其他内容
表单完成验证后有什么方法可以触发javascript函数吗？
我不太清楚这里的意图是什么。您想在提交后修改页面吗？所以...下次加载？如果您的验证逻辑在 PHP 中，那么您可以根据该逻辑的结果有条件地输出您想要的任何 HTML。
你想用ajax提交表单还是重新加载整个页面？

标签： php jquery jquery-form-validator

【解决方案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 } ?>

因此请注意，如果表单“通过验证”，则使用的图像是 something_else.png 而不是 create_course.png。因此，当页面在通过验证逻辑后重新加载时，用户将看到另一张图片。

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

另请注意，当页面首次加载且根本没有提交任何表单时，您需要为$passedValidation 处理默认情况下的false。

【讨论】：