php - Submitting form issues: TypeError: this.form is null

I have a php page that displays all of the service logs for a given site in a table.

At the end of the table I have a new row that has an "Add new service log" button.

Clicking the button hides that row and displays a new row with a form and the desired inputs as well as a new row with buttons "Save" and "Cancel".

The "Save" button calls a Javascript function that checks that the key input has been filled out. When hitting "Save", I see in the console log

TypeError: this.form is null

Here is my code:

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

My inputCheck function looks like this:

<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>

I tried changing the submit button to this:

<input type=submit value=Save>

but nothing happens, nothing on the page or in the log.

Anyone have any idea as to what I am doing wrong or what the problem is here?

Thanks in advance!

EDIT:

After using Steven's advice, I was able to successfully submit the form. However, the inputs aren't properly being sent. I am submitting to the same page so that the table reloads and and the user can see their latest entry. At the beginning of the script I have this:

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

             // Start SQL Query
      }

The inputs return null. Is there something wrong with the way I am setting my inputs?

I have a php page that displays all of the service logs for a given site in a table.

At the end of the table I have a new row that has an "Add new service log" button.

Clicking the button hides that row and displays a new row with a form and the desired inputs as well as a new row with buttons "Save" and "Cancel".

The "Save" button calls a Javascript function that checks that the key input has been filled out. When hitting "Save", I see in the console log

TypeError: this.form is null

Here is my code:

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

My inputCheck function looks like this:

<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>

I tried changing the submit button to this:

<input type=submit value=Save>

but nothing happens, nothing on the page or in the log.

Anyone have any idea as to what I am doing wrong or what the problem is here?

Thanks in advance!

EDIT:

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

             // Start SQL Query
      }

The inputs return null. Is there something wrong with the way I am setting my inputs?

Share Improve this question edited Feb 12, 2016 at 21:38 marc_s 757k184 gold badges1.4k silver badges1.5k bronze badges asked May 29, 2013 at 22:12 user1504583 2356 silver badges11 bronze badges

<textarea> elements should not have a value attribute. The value goes in between the opening and closing textarea tags. – showdev Commented May 29, 2013 at 22:26
Thanks for the correction. I have changed this in my code. – user1504583 Commented May 30, 2013 at 1:01
While both answers were correct and did solve my problems, Steven's answer solved the original question's problem, but both Steven and RobG should get credit. Thanks guys! – user1504583 Commented May 30, 2013 at 1:15

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

The general strategy here is to make the save button a submit button, then put the validation on the form's submit handler and cancel submit if validation fails, e.g.

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

then if validation fails, return false from the inputCheck function.

Your issue is probably because you have a form in a place it can't be, so it's being moved outside the table, i.e. you have:

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

which the browser is "correcting" to:

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

Now the form is outside the table but the controls are still inside it. So change the markup to:

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

so the table and form controls stay inside the form.

when this.form is null:

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

replace with:

onclick='inputCheck();'

and edit your inputCheck method:

function inputCheck() {
    console.log("checking...");
    if ($('textarea[name=issue]').val().length > 0){
        $('form#AddNewService').submit();
    } else {
        alert("You didn't describe the problem!");
    }
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

php - Submitting form issues: TypeError: this.form is null - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)