Uncaught TypeError: Cannot read property 'reset' of undefined

Question

I am trying to reset a forms values to the initial ones:

This is the jquery being used and this is the line that is getting the error. Specifically the $("#gquestion")[0].reset();

    function questionhide() {
    $("#gquestion")[0].reset();
}

and it's called like this as I want this to happen on the hiding of the form:

    $("#gquestion").hide(questionhide());

in this file:

$(document).ready(function() {
$("#passwordreset").hide(passwordhide());
$("#hardwareissue").hide(hardwarehide());
$("#softwareissue").hide(softwarehide());
$("#servicerequest").hide();
$("#question").hide(questionhide());

$("#problemtype").change(function() {
    if ($("#problemtype").val() == "passwordreset") {
        $("#question").hide(questionhide());
        $("#hardwareissue").hide(hardwarehide());
        $("#softwareissue").hide(softwarehide());
        $("#servicerequest").hide();
        $("#passwordreset").show();

    } else if ($("#problemtype").val() == "hardware") {
        $("#question").hide(questionhide());
        $("#passwordreset").hide(passwordhide());
        $("#softwareissue").hide(softwarehide());
        $("#servicerequest").hide();
        $("#hardwareissue").show();

    } else if ($("#problemtype").val() == "software") {
        $("#passwordreset").hide(passwordhide());
        $("#question").hide(questionhide());
        $("#hardwareissue").hide(hardwarehide());
        $("#softwareissue").show();


    } else if ($("#problemtype").val() == "servicerequest") {
        $("#servicerequest").show();


    } else if ($("#problemtype").val() == "question") {
        $("#passwordreset").hide(passwordhide());
        $("#hardwareissue").hide(hardwarehide());
        $("#softwareissue").hide(softwarehide());
        $("#question").show();
    }

});



// Password jquery handling ---------------------------------

function passwordhide() {
    $("#system option:eq(0)").attr('selected','selected');
    $("#passwordreset")[0].reset();
    $("#otherdiv").hide();
}

$("#system").change(function() {
    if ($("#system").val() == "Other") {
        $("#otherdiv").show();
    }
    else {
        $("#otherdiv").hide(function () {
            $("#pwother").val('');
        });
    }
});


// General Question handling ---------------------------------

function questionhide() {
    $("#question")[0].trigger('reset');
}

and here is the entire html form that it refers to:

<form method="POST" action="/ticket" id="gquestion">
{{ csrf_field() }}
<input name="probtype" type="hidden" value="General Question">

<div class="form-group">
    <label form="control-label">Please tell us your question:</label>
    <textarea class="form-control" name="other" id="gqtext"></textarea>
    <br>
</div>
<div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

The form is included in this:

<h1 id='CaT'>Create a Ticket</h1>

<div class="container">
<form method="POST" action='/ticket' name="categoryselect">

    {{ csrf_field() }}

    <div class="form-group">
        <label class="control-label">Please select what you are having a     problem with:</label><br>
        <div class="selectContainer">
            <select class="form-control" name="problemtype" id="problemtype">
                <option disabled selected value>--Select a Category--</option>
                <option value="passwordreset">I want to reset my password</option>
                <option value="hardware">I want to report a hardware issue</option>
                <option value="software">I want to report a system/software issue</option>
                <option value="sevicerequest">I want to submit a service request</option>
                <option value="question">I have a general question</option>
            </select>
        </div>
    </div>
</form>
@include('createTicket/question')

I have used the indexing on other forms as can be seen with the password reset in the same document, and it has worked. They have more elements in them but they do contain textarea and they have cleared properly and I haven't encountered errors. Doing

function questionhide() {
    $("#gtext").val('');
}

works but I would like to know why it won't work with the reset line I have now when other forms do. The title is the error I get when I load it up.

Answer 1

Try one of the following:

$("#gquestion").hide(100, questionhide()); // You can change 100 to any other number. It represents the duration of the hide effect.

or:

 $("#gquestion").hide({complete: questionhide()});

And Change: $("#gquestion")[0].reset(); to $("#gquestion").trigger('reset');

Didn't test it, but it should work.

You may also try:

function questionhide(){
    document.forms.namedItem("gquestion").reset();
}

Looks to me like your function is being created before the document loads, making $('#gquestion') undefined.