0

我正在尝试更改图像元素的“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>
4

1 回答 1

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块中或类似的东西中。

另请注意，当页面首次加载并且根本没有提交任何表单时，您将希望处理默认情况false。$passedValidation

于 2017-06-20T11:20:27.847 回答