locked
Jquery error unable to get property 'reset' of undefined or null reference RRS feed

  • Question

  • User1941728045 posted

    Hi,

    Im getting the below error, when im returning back from my Controller after clicking on "sub_btn"

    JQuery is below for ALLTLHeaderTR,cshtml

       <script type="text/javascript">
          $(function () {
             $('#dTable').DataTable();
    
             $('#dTable tbody').on('click', 'tr', function () {
                var tID = $.trim($(this).find("td").eq(0).text());
                $(this).toggleClass('clickable');
    
                var self = this;
                $.ajax(
                         {
                            type: "POST",
                            url: "/TL/AllTDetail",
                            data: { tlID: tID },
                            dataType: 'text',
                            success: function (data) {
                               $('html, body').animate({ scrollTop: 0 }, 'slow');
                               $('#result').html(data);
                               $(self).off('click');
                            }
                         });
             });
    
             $(document).ready(function () {
                var oTable = $(".dTable").dataTable({
                   "sPaginationType": "full_numbers",
                   "iDisplayLength": 10,
                   "bDestroy": true,
                   "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
                }).after('<br />');
    
                $("#sub_btn").click(function () {
                   $.ajax({
                      type: "POST",
                      url: "/Home/Subscribe",
                      data: $('#sub_form').serialize(),
                      datatype: "text",
                      success: function () {
                         alert("You have succesfully subscribed");
                         $('#sub_form')[0].reset();
                      },
                      error: function () {
                         alert("An error had ocurred. Please contact support");
                         $('#sub_form')[0].reset();
                      }
                   });
                });
    
             });
          });
    
       </script>

    Here is the button part within  ALLTLHeaderTR,cshtml

                         <form id="sub_form">
                            <div class="input-group">
                               <input name="subscribe_email" type="text" class="form-control sub-box" placeholder="Your Email Address	" />
                               <span class="input-group-btn"
                                     style="width:10%;">
                                  <button id="sub_btn" class="btn btn-default sub-btn" type="button">Subscribe</button>
                               </span>
                            </div>
                            <!-- /input-group -->
                         </form>

    And here is the POST of Controller which inserts the email address into the DB before returning back to ALLTLHeaderTR.cshtml

           [HttpPost]
            public ActionResult Subscribe(string subscribe_email)
            {
               DBController dbcontroller = new DBController();
    
               if (dbcontroller.DBConnection())
               {
                  MySqlCommand command = new MySqlCommand("insert_subscription", dbcontroller.conn);
                  command.CommandType = System.Data.CommandType.StoredProcedure;
    
                  command.Parameters.Add(new MySqlParameter("subscribe_email", subscribe_email));
                  command.Parameters["@subscribe_email"].Direction = System.Data.ParameterDirection.Input;
    
                  try
                  {
                     command.ExecuteNonQuery();
    
                     dbcontroller.conn.Close();
                  }
    
                  catch (MySql.Data.MySqlClient.MySqlException ex)
                  {
                     dbcontroller.conn.Close();
                     ViewBag.Message = "Could not add you to the the database. Error " + ex.Number + " has ocurred. Please try again or contact the system administrator";
    
                     return View();
                  }
    
                  return View();
               }
               else
               {
                  ViewBag.Message = "Could not connect to the database. Please try again or contact the system administrator";
                  return View();
               }
            }
        

    Please can you assist ?

    Thanks,

    Monday, October 7, 2019 1:26 AM

Answers

  • User665608656 posted

    Hi ngokal,

    According to your description, I tested your code and everything worked well.

    This error indicates that your current $('#sub_form')[0] is null, I recommend that you debug your js code using the F12 tool.

    If you just want to clear the input box after submitting it , I suggest you change this statement "$('#sub_form')[0].reset();" to

      $("input[name='subscribe_email']").val("");

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 8, 2019 2:54 AM

All replies

  • User475983607 posted

    The error is telling you the selector returned undefined.  I assume it's this one...

    $('#sub_form')[0].reset();

    The common cause is the jQuery selector runs before the element exists.  You'll need to debug your code using dev tools.

    Monday, October 7, 2019 11:44 AM
  • User665608656 posted

    Hi ngokal,

    According to your description, I tested your code and everything worked well.

    This error indicates that your current $('#sub_form')[0] is null, I recommend that you debug your js code using the F12 tool.

    If you just want to clear the input box after submitting it , I suggest you change this statement "$('#sub_form')[0].reset();" to

      $("input[name='subscribe_email']").val("");

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 8, 2019 2:54 AM
  • User1941728045 posted

    Thank you Yongqing Yu,

    Agreed, my sub_form is null .. I see that ... Im not sure why im posting null .. but it is ... I will debug the js code .. 

    Thereafter i'll try your piece of code.

    Sunday, October 13, 2019 5:38 PM