Я занимаюсь разработкой приложения Jquery Mobile - Song Lyrics, имеющего одну страницу index.html, в которую я вручную добавил несколько песен в виде списка. Теперь я хочу добавить новые тексты песен, которые должны отображаться в виде списка. У меня есть форма, где пользователь заполняет: имя песни, имя автора текста и текст песни. Я не хочу использовать базу данных. так что теперь мой вопрос заключается в том, как сохранить форму данных и отобразить ее в виде списка. Есть ли способ сохранить данные динамической формы в некоторый файл .txt и отобразить их на html-странице или любым другим способом, я пробовал некоторые способы, но не смог найти решение.
Пожалуйста, помогите спасибо.
Вот мой код index.html Страница
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile App using Jquery</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fullscreen{
max-width: 100%;
height: auto;
}
h1{
font-size: 14pt;
color: #E76C67;
margin-top: 0%;
}
h2{
font-size: 12pt;
color: #444444;
margin-top: -3%;
}
</style>
</head>
<body>
<!--Index Page startes Here -->
<div data-role="page" id="demo-page" data-url="demo-page">
<div data-role="header">
<h1>Gospel Songs </h1>
<a href="#" id="home" data-icon="home" data-iconpos="notext"> Home</a>
<a href="#" class="jqm-search-link ui-shadow ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
</div><!-- /header -->
<div role="main" class="ui-content">
<ul data-role="listview" data-autodividers="true" id="sortedList" data-filter="true">
<li><a href="#"><h1>All The Way My Saviour Leads Me lyrics</h1>
<p>All the way my Savior leads me
What have I to ask beside?....
</p>
<a href="#A1"> </a>
</a>
</li>
<li><a href="#"><h1>Amazing Grace lyrics</h1>
<p>"Amazing Grace, how sweet the sound,...</p>
<a href="#A2" > </a>
</a>
</li>
<li><a href="#"><h1><span id='display_song_name'></span> </h1> </a></li>
</ul><!-- /listview -->
</div><!-- /content -->
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home"> Home </a></li>
<li><a href="index.html" data-icon="grid">Photos</a></li>
<li><a href="#add_song" data-icon="plus" data-transition="flip" id="#add_song"> Add Song </a> </li>
</ul>
</nav>
</footer><!-- /footer -->
</div>
<div data-role="page" id="add_song">
<div data-role="header">
<h1>Add Songs Lyrics</h1>
<a href="index.html" id="home" data-icon="back" data-iconpos="notext"> Home</a>
</div>
<div role="main" class="ui-contain">
<form id="myform" type="post">
<label for="basic">Song Name:</label>
<input type="text" name="name" id="song_name" value="">
<label for="basic">lyricist Name:</label>
<input type="text" name="name" id="lyricist_name" value="">
<label for="textarea">Song Lyrics:</label>
<textarea name="song_lyrics" id="song_lyrics"></textarea>
<input type="submit" value="submit">
</form>
</div>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home"> Home </a></li>
<li><a href="index.html" data-icon="grid">Photos</a></li>
<li><a href="" data-icon="plus" id="add_song"> Add Song </a> </li>
</ul>
</nav>
</footer><!-- /footer -->
</div><!-- ADD_SONG_PAGE content -->
</body>
</html>
У меня есть кнопка в нижнем колонтитуле: добавление песни, когда пользователь нажимает на кнопку, переносит нас на новую страницу: открывает форму.