Answered by:
Jquery error unable to get property 'reset' of undefined or null reference

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