时间戳

首页 > 解决方案 > onclick 还会重定向到“表单操作”

javascript - onclick 还会重定向到“表单操作”

问题描述

我有一个用于密码的小字段，旁边有一个按钮。如果您单击该按钮，它会显示您的密码，如果您再次单击它，它将隐藏它。这一切都很好，但在它显示您的密码后，它会立即执行我为表单设置的操作。关于如何解决这个问题的任何想法？

<form action='bod.php' method='post'>
<table>
   <tr>
     <td class='col-2'>
    <input type='text' name='Email' id='Email' placeholder='E-mail' class='input-effect form__input' value='$Email'>
     </td>
     <td class='col-2'>
    <input type='password' name='Wachtwoord' id='Wachtwoord' placeholder='Wachtwoord' class='input-effect form__input' value='$Wachtwoord'>
     </td>
     <td>
    <input type='image' src='img/eye.png' onClick='showPswd()' class='show'>
     </td>
    </tr>
    <tr>
      <td class='col-2'>
    <input type='text' name='Bod' id='Bod' placeholder='Bod' class='input-effect form__input' onchange='controleerBod()'>
       </td>
       <td class='col-2'>
     <button type='submit' id='Bied'>Bied</button>
       </td>                            
      </tr>                     
   </table>
</form>



 // This is my JavaScript (it works)
// Show password
function showPswd() {
  var x = document.getElementById("Wachtwoord");
  if (x.type === "password") {
     x.type = "text";
  } else {
    x.type = "password";
  }
}

因此，如果您单击图像“eye.png”，它将显示您的密码，如果您再次单击它，它将隐藏它。现在它会显示您的密码并立即重新连接到“bod.php”（表单操作）。

标签： javascriptphphtmlcss

解决方案

您需要使用preventDefault()函数。而且您还需要在函数中传递事件参数

<input type='image' src='img/eye.png' onClick='showPswd(event)' class='show'>

这应该是你的 JS 代码

function showPswd(evt) {
    evt.preventDefault();
    var x = document.getElementById("Wachtwoord");
    if (x.type === "password") {
       x.type = "text";
    } else {
      x.type = "password";
    }
}

推荐阅读