I have an HTML div output using PHP which when "Submit" is clicked, it should submit the form and fire a JS function. When submitted, the JS console in Chrome gives me the following error:

Uncaught TypeError: Cannot read property 'element' of undefined

My HTML (wrapped in a PHP heredoc)

<div id="tab5" class="tab">
     <div id="reopen_case_form">
        This Case has been previously closed by Workbooks Support. You can re-open this ticket at any time by providing a reason why you'd like to do so and clicking "Re-open Case".
        <table class="update_case">
         <tr><td style="padding: 10px">Summary:<input id="name" name="name" type="text" size="80" maxlength="255" class="required"/></td></tr>
         <tr><td><textarea id="description" name="description" cols="255" rows="50"></textarea></td></tr>
         <tr>
          <td colspan="2" style="padding-top: 10px;">
            <input type="file" class="file" name="file1" id="file1" style="display: inline">
            <input type="file" class="file" name="file2" id="file2" style="display: inline">
            <input type="file" class="file" name="file3" id="file3" style="display: inline">
          </td></tr>
      </table>
      <p><button type="submit" onclick="on_reopen_case()" style="float:left; margin-top: 10px; margin-bottom: 10px;" value="reopen_case" id="reopen_case" name="reopen_case" class="quietbutton">Re-open Case</button></p>
    </div>
  </div>

My Javascript:

<script type="text/javascript">
    function on_reopen_case() {
      if (!$("#reopen_case_form").valid()){ return false; }
      $('#reopen_case').attr('disabled', 'disabled');
      $('#reopen_case').text('Re-opening case. Please wait...');
      document.body.style.cursor = "progress";
      $("#function").val("reopen_case");
      fade();
      $("#reopen_case_form").submit();
    };
  </script>

The form appears to submit but doesn't change the the button text to "Re-opening case" and it doesn't set #function to the specified value either.

Annoyingly I've used similar else where and this works:

<div id="tab3" class="tab">
     <div id="update_case_form">
        Provide a summary and detailed description of your update below, including screenshots where applicable. Click "Update Case" to submit your update to the Workbooks Support team.
      <table class="update_case">
         <tr><td style="padding: 10px">Summary:<input id="name" name="name" type="text" size="80" maxlength="255" class="required"/></td></tr>
         <tr><td><textarea id="description" name="description" cols="255" rows="50"></textarea></td></tr>
         <tr>
          <td colspan="2" style="padding-top: 10px;">
            <input type="file" class="file" name="file1" id="file1" style="display: inline">
            <input type="file" class="file" name="file2" id="file2" style="display: inline">
            <input type="file" class="file" name="file3" id="file3" style="display: inline">
          </td></tr>
      </table>
      <p><button type="submit" onclick="on_create_activity()" style="float:left; margin-top: 10px; margin-bottom: 10px;" value="create_activity" id="create_activity" name="create_activity" class="quietbutton">Update Case</button></p>
     </div>
  </div>

Javascript

 <script type="text/javascript">
    function on_create_activity() {
      if (!$("#update_case_form").valid()){ return false; }
      $('#create_activity').attr('disabled', 'disabled');
      $('#create_activity').text('Updating case. Please wait...');
      document.body.style.cursor = "progress";
      $("#function").val("create_activity");
      fade();
      $("#update_case_form").submit();
    };
  </script>

I can't figure this out for the life of me where I'm going wrong! Help....

I have an HTML div output using PHP which when "Submit" is clicked, it should submit the form and fire a JS function. When submitted, the JS console in Chrome gives me the following error:

Uncaught TypeError: Cannot read property 'element' of undefined

My HTML (wrapped in a PHP heredoc)

<div id="tab5" class="tab">
     <div id="reopen_case_form">
        This Case has been previously closed by Workbooks Support. You can re-open this ticket at any time by providing a reason why you'd like to do so and clicking "Re-open Case".
        <table class="update_case">
         <tr><td style="padding: 10px">Summary:<input id="name" name="name" type="text" size="80" maxlength="255" class="required"/></td></tr>
         <tr><td><textarea id="description" name="description" cols="255" rows="50"></textarea></td></tr>
         <tr>
          <td colspan="2" style="padding-top: 10px;">
            <input type="file" class="file" name="file1" id="file1" style="display: inline">
            <input type="file" class="file" name="file2" id="file2" style="display: inline">
            <input type="file" class="file" name="file3" id="file3" style="display: inline">
          </td></tr>
      </table>
      <p><button type="submit" onclick="on_reopen_case()" style="float:left; margin-top: 10px; margin-bottom: 10px;" value="reopen_case" id="reopen_case" name="reopen_case" class="quietbutton">Re-open Case</button></p>
    </div>
  </div>

My Javascript:

<script type="text/javascript">
    function on_reopen_case() {
      if (!$("#reopen_case_form").valid()){ return false; }
      $('#reopen_case').attr('disabled', 'disabled');
      $('#reopen_case').text('Re-opening case. Please wait...');
      document.body.style.cursor = "progress";
      $("#function").val("reopen_case");
      fade();
      $("#reopen_case_form").submit();
    };
  </script>

The form appears to submit but doesn't change the the button text to "Re-opening case" and it doesn't set #function to the specified value either.

Annoyingly I've used similar else where and this works:

<div id="tab3" class="tab">
     <div id="update_case_form">
        Provide a summary and detailed description of your update below, including screenshots where applicable. Click "Update Case" to submit your update to the Workbooks Support team.
      <table class="update_case">
         <tr><td style="padding: 10px">Summary:<input id="name" name="name" type="text" size="80" maxlength="255" class="required"/></td></tr>
         <tr><td><textarea id="description" name="description" cols="255" rows="50"></textarea></td></tr>
         <tr>
          <td colspan="2" style="padding-top: 10px;">
            <input type="file" class="file" name="file1" id="file1" style="display: inline">
            <input type="file" class="file" name="file2" id="file2" style="display: inline">
            <input type="file" class="file" name="file3" id="file3" style="display: inline">
          </td></tr>
      </table>
      <p><button type="submit" onclick="on_create_activity()" style="float:left; margin-top: 10px; margin-bottom: 10px;" value="create_activity" id="create_activity" name="create_activity" class="quietbutton">Update Case</button></p>
     </div>
  </div>

Javascript

 <script type="text/javascript">
    function on_create_activity() {
      if (!$("#update_case_form").valid()){ return false; }
      $('#create_activity').attr('disabled', 'disabled');
      $('#create_activity').text('Updating case. Please wait...');
      document.body.style.cursor = "progress";
      $("#function").val("create_activity");
      fade();
      $("#update_case_form").submit();
    };
  </script>

I can't figure this out for the life of me where I'm going wrong! Help....

• javascript
• html

Share Improve this question Follow edited Dec 19, 2015 at 16:32 Dave 3,28822 gold badges2525 silver badges4040 bronze badges asked Dec 19, 2015 at 16:30 Jamie LoweJamie Lowe 14711 gold badge11 silver badge99 bronze badges 7

• Where is to your form? – mariocatch Commented Dec 19, 2015 at 16:33
• As @mariocatch is saying, you need to use the <form> element to use the submit() event. Change your <div id="reopen_case_form"> to <form.. and see what error you get then :) – azium Commented Dec 19, 2015 at 16:35
• Just tried that quickly and I now get a similar message: Uncaught TypeError: Cannot read property 'form' of undefined – Jamie Lowe Commented Dec 19, 2015 at 16:38
• Do you create the <div id="reopen_case_form">.... in a loop in php? Is it possible you have n number of <div id="reopen_case_form"> in the same html document? – Sean Commented Dec 19, 2015 at 16:41
• I'm creating tabs at the bottom of a screen, one of the tabs content is generated via a PHP foreach loop. It doesn't have a submit button though. The reference to reopen_case_form only exists the once... – Jamie Lowe Commented Dec 19, 2015 at 16:45

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 2

I think I may have figured this out... I was using nested forms which is apparently not allowed... Cannot Read Property 'Elements' of Undefined - in JS Console

Thanks for the suggestions guys :)