Great. It’s responding now. Before, I used something like this:
<script>
$(document).ready(function() {
$("#sendit").click(function(e) {
alert("sendit clicked");
});
});
</script>
Thanks. Next challenge is getting the values of the form inputs:
var phone = $("#phone").val();
This is the simplified version om code:
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
</head>
<body>
<ons-splitter>
<ons-page>
<!-- menu links to template pages goes here-->
</ons-page>
</ons-splitter>
<template id="page1.html">
<ons-page>
</ons-page>
</template>
<template id="page2.html">
<ons-page>
<form action="" method="post">
<input id="dname" type="text" name="Name" placeholder="Your Name" required>
<input id="email" type="text" name="Email" placeholder="Your Email" required>
<input id="phone" type="text" name="Subject" placeholder="Your Phone" required>
<textarea id="message" name="Message" placeholder="Your Message" required></textarea>
<input type="submit" id="sendit" value="SUBMIT"></div>
</form>
</ons-page>
</template>
<template id="page3.html">
<ons-page>
</ons-page>
</template>
</body>
</html>
As you can see, on page2.html, there is a form, the submit button has the id **sendit **. I want to submit the form to an external url by jquery, but the form input id’s are not recognized, the challenge is, how do I achieve this?
Any solution to this? I cant use jquery in template pages?
Or is there another way to wrap the content of a page on the main page without using the <template> tag?
Ok. Ive checked that out. Can someone just give me an example of how to solve this particular issue without using a separate html file for that page?
@Fran-Diox Yes. I changed it initially while trying to fix the problem, but part of it was truncated as a result, so I returned to the status quo, and the solution provided by @jamal is working for me.
The button <ons-button>Click me!</ons-button> is not recognised by jquery when placed within the page template tags, but works when placed outside it.
<template id="mypage.html">
<ons-page>
</ons-page>
</template>
I was trying to use jquery to submit a form in my app page, but got no response, I then copied the entire code here into a separate file, it worked : https://onsen.io/v2/guide/jquery/
But using the same code with same dependencies within my app page did not work, there was no response on clicking the <ons-button> . How do I make jquery work?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
// Initialization code
$('ons-button').on('click', function(e) {
ons.notification.alert('Button is tapped!');
})
});
</script>
<ons-button>Click me!</ons-button>
</body>
</html>