I’m trying out framework7 and trying to do a simple post to api endpoint. The form is hitting the endpoint and everything is happening on the backend. The only question I have is, how to get the data returned from the endpoint and also how to set a header i.e Accept: application/json ?
My code is following:
<template>
<div class="page" data-name="register">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Create Account</div>
</div>
</div>
<div class="page-content">
<form id="frmRegister" action="http://localhost:8000/api/register" method="POST" class="form-ajax-submit">
<div class="list no-hairlines-md">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Name</div>
<div class="item-input-wrap">
<input type="text" class="txtName" name="name" placeholder="Your name" minlength="4" pattern="[a-zA-Z. ]+" required validate data-error-message="Please enter a valid name" />
<span class="input-clear-button"></span>
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Mobile</div>
<div class="item-input-wrap">
<input type="tel" class="txtPhone" name="phone" placeholder="Mobile" minlength="10" maxlength="10" required validate pattern="[0-9]*" data-error-message="Please enter a valid 10 digit mobile number." />
<span class="input-clear-button"></span>
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">E-mail</div>
<div class="item-input-wrap">
<input type="email" class="txtEmail" name="email" placeholder="E-mail" required validate />
<span class="input-clear-button"></span>
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" class="txtPassword" name="password" placeholder="Password" minlength="8" maxlength="16" required validate />
<span class="input-clear-button"></span>
</div>
</div>
</div>
</li>
</ul>
<div class="block">
<p class="row">
<input type="submit" class="col button button-large button-fill button-raised btn-register disabled" value="Create Account" />
</p>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
export default (props, { $, $on, $f7 }) => {
$on('pageInit', () => {
$("input[type='text'], input[type='tel'], input[type='email'], input[type='password']").change(function () {
if (!$f7.input.validate(".txtName")) {
$(".btn-register").addClass("disabled");
return;
}
if (!$f7.input.validate(".txtPhone")) {
$(".btn-register").addClass("disabled");
return;
}
if (!$f7.input.validate(".txtEmail")) {
$(".btn-register").addClass("disabled");
return;
}
if (!$f7.input.validate(".txtPassword")) {
$(".btn-register").addClass("disabled");
return;
}
$(".btn-register").removeClass("disabled");
})
$('#frmRegister').on('submit', function () {
$f7.preloader.show();
return false;
});
$('form.form-ajax-submit').on('formajax:success', function (e) {
var xhr = e.detail.xhr; // actual XHR object
var data = e.detail.data; // Ajax response from action file
// do something with response data
console.log(JSON.stringify(data));
alert("Account Created");
$f7.preloader.hide();
});
});
return $render;
}
</script>
Any help is appreciated. Thanks in advance.
