Fetch Form

[QJan84]

Thanks for the example #467. Unfortunately I have an error and don't know why.

submitForm is not defined

My error log:

VM10728:3 Uncaught ReferenceError: submitForm is not defined
at eval (eval at (index.php:39), :3:21)
at index.php:95
at ee.evaluateCommandExpression (index.php:95)
at b (index.php:95)
at HTMLButtonElement.o (index.php:95)

HTML:

<div x-data="{ 'callbackModal': false}, component()">
	<?php /* Trigger Callback Modal */ ?>
	<button @click="callbackModal = true" type="button" class="fixed z-20 flex flex-col justify-center items-center h-16 w-16 rounded-sm overflow-hidden text-white right-0 mb-2 mr-2 bg-primary-500 shadow-box bottom-0 lg:top-1/2 lg:mr-0" title="<?php echo LANG['callback']['titel']; ?>">
		<svg class="fill-current h-8 w-8" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
			<path d="M21.058 9.057l-3.724-3.724v9.334h9.333l-3.724-3.724 6-6-1.886-1.886-6 6z" />
			<path d="M21.896 17.924a1.335 1.335 0 0 0-1.855.057l-3.19 3.282c-.767-.147-2.311-.628-3.9-2.214-1.59-1.59-2.071-3.138-2.214-3.901l3.279-3.192a1.334 1.334 0 0 0 .057-1.855L9.147 4.684a1.333 1.333 0 0 0-1.855-.116L4.399 7.049c-.231.232-.37.54-.388.866-.02.333-.402 8.229 5.72 14.354C15.074 27.61 21.766 28 23.608 28c.27 0 .434-.008.478-.01a1.32 1.32 0 0 0 .864-.389l2.482-2.894a1.335 1.335 0 0 0-.115-1.855l-5.42-4.928z" /></svg>
		<div class="text-3xs leading-normal font-medium uppercase tracking-widest"><?php echo LANG['callback']['titel']; ?></div>
	</button>
	<?php /* Callback Modal Overlay */ ?>
	<div class="fixed z-30 inset-0 flex justify-center items-center" style="background-color: rgba(0,0,0,0.3)" x-show="callbackModal" x-transition:enter="ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-75" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
	</div>
	<?php /* Callback Modal Content */ ?>
	<div class="fixed flex justify-center items-center inset-0 z-50" x-show="callbackModal" >
		<div class="relative px-4 py-6 max-h-90vh max-w-90vw overflow-y-scroll bg-white shadow-box md:overflow-y-visible md:max-w-xl md:py-12 md:px-12" @click.away="callbackModal = false">
			<div class="absolute flex-col top-0 right-0 justify-center items-center -mr-6 -mt-6 h-12 w-12 rounded-full overflow-hidden bg-primary-500 text-white shadow-box hidden md:flex md:-mr-12 md:-mt-12 md:h-24 md:w-24">
				<svg class="fill-current h-6 w-6 md:w-12 md:h-12" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
					<path d="M21.058 9.057l-3.724-3.724v9.334h9.333l-3.724-3.724 6-6-1.886-1.886-6 6z" />
					<path d="M21.896 17.924a1.335 1.335 0 0 0-1.855.057l-3.19 3.282c-.767-.147-2.311-.628-3.9-2.214-1.59-1.59-2.071-3.138-2.214-3.901l3.279-3.192a1.334 1.334 0 0 0 .057-1.855L9.147 4.684a1.333 1.333 0 0 0-1.855-.116L4.399 7.049c-.231.232-.37.54-.388.866-.02.333-.402 8.229 5.72 14.354C15.074 27.61 21.766 28 23.608 28c.27 0 .434-.008.478-.01a1.32 1.32 0 0 0 .864-.389l2.482-2.894a1.335 1.335 0 0 0-.115-1.855l-5.42-4.928z" /></svg>
			</div>

			<!-- <p class="alert alert-success" x-show="success">Thanks! </p>
			<p class="alert alert-error" x-show="error">Error!</p> -->

			<form x-ref="form">
				<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

				<div class="flex flex-col">
					<?php /* Header */ ?>
					<div class="relative">
						<!-- <div class="h-px2 w-12 bg-primary-500 rounded-lg mb-6"></div> -->
						<div class="h4 text-center mb-10"><?php echo LANG['callback']['headline']; ?></div>
					</div>
					<?php /* Content */ ?>
					<div class="relative max-h-60vh flex-grow-0 overflow-y-auto">
						<div class="space-y-3">
							<div class="form__group">
								<input class="appearance-none border rounded w-full py-3 px-6 text-gray-700 leading-tight font-light text-base transition-colors duration-300 focus:outline-none" id="inputFirma" type="text" name="Firma" placeholder="<?php echo LANG['callback']['placeholder']['firma']; ?>">
							</div>
							<div class="form__group">
								<input class="appearance-none border rounded w-full py-3 px-6 text-gray-700 leading-tight font-light text-base transition-colors duration-300 focus:outline-none" id="inputName" type="text" name="Name" placeholder="<?php echo LANG['callback']['placeholder']['name']; ?>">
							</div>
							<div class="form__group">
								<input class="appearance-none border rounded w-full py-3 px-6 text-gray-700 leading-tight font-light text-base transition-colors duration-300 focus:outline-none" id="inputTelefon" type="tel" name="Telefon" placeholder="<?php echo LANG['callback']['placeholder']['telefon']; ?>" required>
							</div>
							<div class="form__group">
								<input class="appearance-none border rounded w-full py-3 px-6 text-gray-700 leading-tight font-light text-base transition-colors duration-300 focus:outline-none" id="inputWann" type="text" name="Wann" placeholder="<?php echo LANG['callback']['placeholder']['wann']; ?>" required>
							</div>
							<div class="form__group" x-data="{checked : false}">
								<label for="checkboxDatenschutz" class="checkbox flex items-center justify-center rounded px-3 py-4 transition-colors duration-200 ease-out hover:cursor-pointer" :class="checked ? 'bg-green-500' : 'bg-gray-700'">
									<input type="checkbox" name="Datenschutz" id="checkboxDatenschutz" x-model="checked" required>
									<span class="ml-4 text-sm text-white leading-normal text-center">
										<?php $page_id = PAGE[LANGUAGE]['datenschutz']; ?>
										<?php echo LANG['kontakt']['field']['datenschutz'][0]; ?> <we:a id="$page_id" target="_blank" rel="noopener" class="underline text-white hover:text-white"><?php echo LANG['kontakt']['field']['datenschutz'][1]; ?></we:a><?php echo !empty(LANG['kontakt']['field']['datenschutz'][2]) ? ' '.LANG['kontakt']['field']['datenschutz'][2] : ''; ?>.
									</span>
								</label>
							</div>
						</div>
					</div>
					<?php /* Footer */ ?>
					<div class="relative text-center mt-6">
						<div class="flex items-center justify-center">
							<button class="btn btn-primary" @click.prevent="submitForm($refs)">
								<?php echo LANG['callback']['button']['absenden']; ?>
							</button>
							<div class="btn btn-link text-xs" @click="callbackModal = false"><?php echo LANG['callback']['button']['schliessen']; ?></div>
						</div>
						<div class="text-sm mt-6 text-gray-600 leading-normal max-w-sm">
							<?php echo LANG['callback']['info'][0]; ?>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

JS:

function component () {
	return {
		error: false,
		success: false,
		submitForm() {
			fetch('https://httpstat.us/200', {
				method: 'POST',
				body: new FormData(this.$refs.form)
			})
			.then(response => {
				console.log(response.data);
				return this.success === true
			});
		}
	}
}

[ryangjchandler]

Hi @QJan84, your x-data attribute has an invalid value. You're declaring an object literal and a function in the expression.

You should move the callbackModal: false into the object returned by component() instead and then make your x-data attribute value x-data="component()".

[QJan84]

Thanks! Works perfect!