javascript - 简单的 javascript 函数在表单内不起作用

Question

我有一个简单的 Javascript 函数，但它无法在表单内运行。它看起来像这样:

echo "<tr><td><form name='formfolder' method='POST' action='?module=pindah_dok_index' >";
echo "<input type=hidden name='id_debt' value='$_GET[id_debt]' />";
echo "move docs</td><td>";
echo "<input type='text' name='index1_dok' id='xcvbn' onkeyup='xcvbn()' style='width:80px;' required />";

但是当我将输入 #xcvbn 放置在表单之前/之外时，它可以正常工作。

我的 Javascript 函数很简单，如下所示:

function xcvbn(){    
  var xx=document.getElementById("xcvbn");
  var x = xx.value;
  var str = x.replace(/[^0-9a-zA-Z\-_.]/g, ''); 
  var str = str.toUpperCase();
  xx.value = str;
}

Answer 1

您的 input 元素的 id 与函数名称相同。

有些浏览器直接接受JS中表单元素的id。请参阅下面的代码片段(在 FF 中测试)。

console.log(asdf.value);

<form>
<input id="asdf" value="text" />
</form>

所以这会产生冲突。这就是函数没有被触发的原因。为输入元素 id 和函数使用不同的名称。

更好的是，您可以在函数参数中传递 this 对象，如下所示。

function xcvbn(elem) {
  var x = elem.value;
  var str = x.replace(/[^0-9a-zA-Z\-_.]/g, '');
  var str = str.toUpperCase();
  elem.value = str;
}

<tr>
  <td>
    <form name='formfolder' method='POST' action='?module=pindah_dok_index'>
      <input type=hidden name='id_debt' value='$_GET[id_debt]' />move docs</td>
  <td>
    <input type='text' name='index1_dok' id='elemId' onkeyup='xcvbn(this)' style='width:80px;' required />