0

特定のサイトのすべてのサービス ログをテーブルに表示する php ページがあります。

表の最後に、「新しいサービス ログの追加」ボタンがある新しい行があります。

ボタンをクリックすると、その行が非表示になり、フォームと目的の入力を含む新しい行と、[保存] ボタンと [キャンセル] ボタンのある新しい行が表示されます。

「保存」ボタンは、キー入力が入力されたことを確認する Javascript 関数を呼び出します。「保存」を押すと、コンソールログに表示されます

TypeError: this.form が null です

これが私のコードです：

 // 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);" ...>

検証が失敗した場合は、 inputCheck関数falseから戻ります。

あなたの問題はおそらく、あるはずのない場所にフォームがあるため、テーブルの外に移動されているためです。つまり、次のような場合です。

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

ブラウザが「修正」しているもの：

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

フォームはテーブルの外にありますが、コントロールはまだテーブルの中にあります。したがって、マークアップを次のように変更します。

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

そのため、テーブルとフォーム コントロールはフォーム内にとどまります。

于 2013-05-29T22:47:13.097 に答える