I have a custom form with html custom element, I tried to submit form, but it didn’t work.
My form is like this:
<.form let={f} for={@changeset} phx-change="validate" phx-submit="save">
<div class="form-group">
<%= bx_label f, :slug %>
<%= bx_text_input f, :slug %>
<%= error_tag f, :slug %>
</div>
<div class="form-group">
<%= bx_label f, :title %>
<%= bx_text_input f, :title %>
<%= error_tag f, :title %>
</div>
<div class="form-group">
<%= bx_label f, :date %>
<%= bx_date_select f, :date, format_pattern: "yyyy-MM-dd" %>
<%= error_tag f, :date %>
</div>
<div class="form-group">
<%= bx_label f, :author %>
<%= bx_text_input f, :author %>
<%= error_tag f, :author %>
</div>
<div class="form-group">
<%= bx_label f, :content %>
<ui5-tabcontainer class="full-width">
<ui5-tab text="RAW">
<ui5-label class="full-width">
<%= bx_textarea f, :content, [rows: 50, class: "full-width", style: "width: 960px"] %>
<%= error_tag f, :content %>
</ui5-label>
</ui5-tab>
<ui5-tab text="Preview">
<ui5-label class="full-width">
<remark-element id="content-preview"><%= @blog.content |> raw %></remark-element>
<script>
const ipt = document.getElementById('blog_content');
const pre = document.getElementById('content-preview');
ipt.addEventListener('input', () => {
pre.innerHTML = ipt.value;
pre.requestUpdate();
// pre.updated();
});
</script>
</ui5-label>
</ui5-tab>
</ui5-tabcontainer>
</div>
<div class="form-group">
<%= bx_submit "Save", phx_disable_with: "Saving...", id: "form-submit" %>
<%= submit "Save", phx_disable_with: "Saving..." %>
</div>
<script>
var sb = document.getElementById('form-submit');
sb.addEventListener('click', (evt) => {
console.log('form evt', evt.target);
const find = (el) => {
if (el.parentElement) {
if (el.parentElement.tagName === 'FORM') {
return el.parentElement;
} else {
return find(el.parentElement);
}
} else {
return null;
}
}
const f = find(evt.target);
console.log('form el', f);
f.addEventListener('submit', (evt) => {
evt.preventDefault();
return false;
});
// <%# f.submit(); %>
});
</script>
</.form>
Live view did not Intercept form submit event, is it a bug ?
