0

我有一个 php 页面，它在表格中显示给定站点的所有服务日志。

在表的末尾，我有一个新行，其中有一个“添加新服务日志”按钮。

单击该按钮会隐藏该行并显示带有表单和所需输入的新行以及带有“保存”和“取消”按钮的新行。

“保存”按钮调用一个 Javascript 函数来检查键输入是否已被填写。点击“保存”时，我在控制台日志中看到

类型错误：this.form 为空

这是我的代码：

 // SQL Query
 // Table data of queried results

 // Add a new service log   
 echo "<tr id='AddNew'>
       <td><input type=button value='Add New' onclick=\"$('#AddNew').hide();$('#AddNewHid').show();$('#SaveCancel').show();\"></td>
       <td colspan=12> &nbsp </td></tr>
       <form name='AddNewLog' method='POST' action='servicelook.php' id='AddNewService'>  
       <tr style='display: none;' id='AddNewHid'>
       <td><input type='text' value='$lastID' name='ticketid' size=10></td>
       <td><input type='text' value='$siteID' name='SiteID' size=4></td>
       <td><input type='text' value='$siteName' name='SiteName' size=20></td>
       <td><input type='text' value='$userid' name='takenBy' size=4></td>
       <td><input type='text' value='$now' name='callTime' size=20></td>
       <td><input type='text' value='' name='caller' size=20></td>
       <td><input type='text' value='' name='callPhone' size=14></td>
       <td><textarea name='issue' value = '' rows=3 cols=10></textarea></td>
       <td><textarea name='fix' value = '' rows=3 cols=10></textarea></td>
       <td><input type='text' value='$userid' name='solvedBy' size=4></td>
       <td><input type='text' value='$now' name='solvedTime' size=20></td>
       <td style='min-width:100px;max-width:100px;'><input type='checkbox' name='fup' value='fup'>Follow Up</td></tr>
       <input type='hidden' value='Yes' name='AddNew'>
       <input type='hidden' value='$userid' name='userid'>
       <input type='hidden' value='$session' name='session'>
       <input type='hidden' value='$siteid' name='siteid'>
       <tr  style='display: none;' id='SaveCancel'>
       <td colspan=2>
       <input name='save' type='button' onclick='inputCheck(this.form.issue);' value='Save'> &nbsp 
       <input type='button' value='Cancel' onclick=\"$('#AddNew').show();$('#AddNewHid').hide();$('#SaveCancel').hide();\"></td>
       <td colspan=11> &nbsp </td>
       </tr></form>";
 echo "</table>";

我的 inputCheck 函数如下所示：

<script type="text/javascript">
function inputCheck(areaName) 
{
console.log("checking...");
if (areaName.value.length > 0)
{
    $('form#AddNewService').submit();
} 
else
{
    alert("You didn't describe the problem!");
}
} // end noteCheck function
</script>

我尝试将提交按钮更改为：

<input type=submit value=Save>

但没有任何反应，页面或日志中没有任何内容。

任何人都知道我做错了什么或这里的问题是什么？

提前致谢！

编辑：

在使用史蒂文的建议后，我能够成功提交表格。但是，输入未正确发送。我正在提交到同一页面，以便重新加载表格，并且用户可以看到他们的最新条目。在脚本的开头我有这个：

if($AddNew == 'Yes')
 {
     echo "YES...Adding New";
     echo $ticketid .$SiteID. $SiteName. $takenBy. $callTime. $caller. $callPhone. $issue. $fix. $solvedBy. $solvedTime;

             // Start SQL Query
      }

输入返回 null。我设置输入的方式有问题吗？

4

2 回答 2

3

这里的一般策略是使保存按钮成为提交按钮，然后将验证放在表单的提交处理程序上，如果验证失败则取消提交，例如

<form onsubmit="return inputCheck(this.issue);" ...>

然后如果验证失败，false则从inputCheck函数返回。

你的问题可能是因为你有一个表格在一个不可能的地方，所以它被移到桌子外面，即你有：

<table>
  <form>
    ...
  </form>
</table>

浏览器正在“纠正”到：

<table>
    ...
</table>
<form>
</form>

现在表单在表格之外，但控件仍在其中。因此，将标记更改为：

<form>
  <table>
    ...
  </table>
</form>

因此表格和表单控件保留在表单内。

于 2013-05-29T22:47:13.097 回答
1

当 this.form 为空时：

onclick='inputCheck(this.form.issue);'

用。。。来代替：

onclick='inputCheck();'

并编辑您的 inputCheck 方法：

function inputCheck() {
    console.log("checking...");
    if ($('textarea[name=issue]').val().length > 0){
        $('form#AddNewService').submit();
    } else {
        alert("You didn't describe the problem!");
    }
}
于 2013-05-29T22:15:29.107 回答