Purpose
My aim is to clear a form once it has been successfully submitted.
Problem
Upon submitting the form, I encounter the error message in my console:
Uncaught TypeError: $(...)[0].reset is not a functionWhen examining the content before resetting, I observe the form as follows:
<div id=new-store-form>..</div>Steps Taken So Far
- I have verified that there are no elements named "reset" within my application using classes or IDs).
- Using vanilla JavaScript
results in the same error.document.getElementById('new-store-form').reset();
Code Samples views/stores/index.html.erb
<div class="show-panel-form"></div>
<%= render "partials/show_panel_stores_overview"%>
</div>
views/partials/show_panel_stores_overview.html.erb
<%= link_to 'New store', new_store_path, remote: true %>
views/stores/new.js.erb
var form = $("<%= j(render 'form') %>");
var wrapper = $('<div>').attr('id', 'new-store-form').append(form);
$('.show-panel-form').html(wrapper);
views/stores/_form
<%= simple_form_for (Store.new) do |f|%>
<%= f.input :name %>
<%= f.button :submit%>
views/stores.create.js.erb
var form = $("<%= j(render 'form') %>");
var wrapper = $('<div>').attr('id', 'new-store-form').append(form);
$('.show-panel-form').html(wrapper);
console.log($("#new-store-form")[0])
$("#new-store-form")[0].reset(); // doesn't work
store controller
def new
@store = current_user.store.build
@store.age_tables.build
respond_to do |format|
format.html { redirect_to root_url, alert: 'Page not accessible' }
format.js
end
authorize @store
end
def create
@store = current_user.stores.create(store_params)
authorize @store
if @store.save
respond_to do |format|
format.js
end
else
format.js
end
end