Ajax-submit form in component is not working

I am new to framework7 and was trying with submitting and receiving the response by submitting the form. But I did not find it working. Here is my code.

<template>
  <div class="page">
    <div class="page-content">
<form id="login-form" action="http://localhost/api/user/" method="get" class="ajax-submit>
<div class="item-title item-label">Username</div>
<input type="text" placeholder="Your username" id="username" class="input-with-value">
<div class="item-title item-label">Password</div>
<input type="password" placeholder="Your password" id="password" class="">
<input type="submit" name="signin" value="signin">
</form>
</div>
</div>
</template>

<script>
$('#login-form').on('submitted', function (e) {
         //Here is your Ajax response:
         console.log(e.detail.data)
        })
</script>

when I click on the submit button it takes me to the “http://localhost/api/user/” url in the browser and shows me the response. But here the ajax is not getting called in the background.

is there any good example on how to use the ajax-submit with forms?

Hey @mtech

What Framework7 version use you?

Regards

I am using framework 7 Version 2.0.2