I’m using bootstrap 5.2 to build a form that takes several inputs, one of which being a textarea from TinyMCE.
Since adding the tinyMCE textarea, I now have to click the submit button twice to get the form to submit.
*Note that the submission works fine but when I comment out the tinyMCE textarea the form goes to the server on the first click. Any idea why this is happening?
(The tinyMCE input is at the very bottom under the <!-- message for contest winners -->)
Form
<% layout('layouts/boilerplate') %>
<div class="row">
<h1 class="text-center">Setup</h1>
<div class="col-xl-8 offset-xl-2">
<form action="/events/new" method="POST" class="needs-validation" novalidate>
<h5 class="mt-2">Activation setup</h5>
<hr>
<label for="event[promotion_type]">Select which of your qr codes you'll use for this event</label>
<div class="btn-group-lg my-4 d-flex flex-wrap justify-content-center" role="group"
aria-label="Basic radio toggle button group" required>
<% for (let q of qr) { %>
<input type="radio" class="btn-check" onselect="setQrName" name="event[qr_name]" value="<%= q.name %>"
id="<%= q.name %>" autocomplete="off">
<label class="btn btn-outline-primary m-2" for="<%= q.name %>">
<%= q.name %>
</label>
<% } %>
</div>
<div class="invalid-feedback">
You must select a QR code
</div>
<small class="form-text text-muted">*Do not select a qr code that's mapped to another
activation. Manage qr codes on the <a href="/users/<%= user.id %>/activations">activations
page</a>.
</small>
<div class="row flex-row d-flex" style="margin-top: 4em;">
<div class="mb-2 col-6">
<label class=" form-label" for="event[event_start]">Start date & time*</label>
<input class="form-control" type="datetime-local" onchange="timeCheck()" id="eventStart"
name="event[event_start]" required>
<div class="invalid-feedback">
Must be filled out - max 50 characters
</div>
</div>
<div class="mb-2 col-6">
<label class="form-label" for="event[event_end]">End date & time*</label>
<input class="form-control" type="datetime-local" onchange="timeCheck()" id="eventEnd"
name="event[event_end]" required>
<div class="invalid-feedback">
Must be filled out
</div>
</div>
<p id="timeValidate" style="color: red; font-style: italic;">
<%= %>
</p>
</div>
<div class="my-3">
<div class="mb-3">
<label class="form-label fw-medium" for="event_name">Activation title*</label>
<input class="form-control" placeholder='Ex, "Win 50% off!" or "1 in 10 win a free hat!"'
maxlength="50" type="text" id="event[event_name]" onchange="checkActivationNameLength()" name="event[event_name]" required>
<div class="invalid-feedback">
Must be filled out
</div>
<p id="activationNameLengthValidate" style="color: red; font-style: italic;">
<%= %>
</p>
<small class="my-2">A title that will get people excited to participate. Max 50 characters.</small>
</div>
<div class="mb-2">
<label class="form-label" for="event[description]">Activation description</label>
<input class="form-control" type="text" length="500" id="event[description]"
name="event[description]">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Max 350 characters
</div>
</div>
<div class="mb-2">
<label class="form-label" for="event[redemption_details]">Define how the prize be
shared*</label>
<select class="form-control" id="event[redemption_details]" name="event[redemption_details]"
required>
<option value="online">Digitally</option>
<option value="in-person">In person</option>
</select>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="mb-2">
<label class="form-label" for="event[notification_method]">
Choose how you'd like winner notificaitons to be delivered*</label>
<select class="form-control" id="event[notification_method]" name="event[notification_method]"
required>
<option value="browser">In the browser</option>
<option value="email">Email</option>
<option value="both">Both</option>
</select>
<div class="valid-feedback">
Looks good!
</div>
</div>
<!--- Message for contest winners --->
<div class="my-4">
<label class="form-label" for="event[redemption_message]">Use this message to award prizes digitally
(eg., coupon code, gift card, etc) or provide instructions on
how to redeem prizes in person for on-site redemptions.* (2000 char max)</label>
<small class="form-text text-muted">A prize image can be added on the next page</small>
<textarea class="fs-5 form-control" type="text" placeholder="Message body" id="tiny"
name="event[redemption_message]" max="2000" rows="10" required></textarea>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Required. Max 2000 characters
</div>
</div>
<div class="mb-3">
<button class="btn btn-primary"
onclick="update(document.getElementById('eventStart').value,document.getElementById('eventEnd').value)">Next</button>
</div>
</form>
<a href="/events">Back to all events</a>
</div>
</div>
<script src="/javascripts/newEvent.js"></script>