I am attempting to create a collapsible sidebar on my website that includes a search form with a search field and submit button.
In order to accomplish this, I have included the following scripts:
https://code.jquery.com/jquery-1.11.3.min.js
and
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
However, when using these scripts together, the form does not submit as expected. Instead, it appears to add the parameters to the URL and then triggers some form of preventDefault. This issue led me to believe that I may be using an outdated version of jQuery. To test this theory, I attempted to update to:
https://code.jquery.com/jquery-3.2.1.min.js
Upon updating to the newer version of jQuery, I encountered several problems including the collapse feature no longer functioning and the overall style of the site being disrupted. Additionally, I was unable to recreate the issue in a fiddle due to their reliance on jQuery.
Sample 1 (Collapse works but form does not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
Sample 2 (Form works but Collapse does not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
To address the issue in the first sample, I attempted to change the input type from submit to button and manually trigger the form submission using the following piece of code:
$('#submitbutton').click(function() {
$('#myform').submit();
});
Unfortunately, this approach did not resolve the issue. Any insights or suggestions would be greatly appreciated!