I have a code in javacript with which I want to make an app that registers series, the issue is that I get an error and I do not know what it can be:
Set form File.js
$('form').on('sumbit', function () {
var nombre = $('#name').val();
var fecha = $('input[type="date"]').val();
var medio = $('#medio').val();
var episodios = $('#episodios').val();
var nuevo_div = $('<div></div>');
var contenido = "<strong>"Los increibles"</strong><br> <span>" 1 / 7 / 2018 "< /span><br><strong>"Pelicula"</strong> < br > < strong > 01 < /strong> " ;
nuevo_div.html(contenido);
var cantidad_divs = $('#grilla > div').length;
if (cantidad_divs % 2 == 0) {
nuevo_div.attr("class", "ui-block-a");
} else {
nuevo_div.attr("class", "ui-block-b");
}
$('#grilla').append(nuevo_div);
$.mobile.navigate('#series');
return false;
});
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Noteflix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jqm/jquery-1.12.3.min.js"></script>
<script src="jqm/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="themes/estilos.css"/>
<link rel="stylesheet" href="themes/tusseries.min.css"/>
</head>
<body>
<!--Presentación -->
<div data-role="page" id="home" data-theme="e">
<div data-role="header">
<h1>Noteflix</h1>
<a href="#info"
data-role="button"
data-icon="info"
data-iconpos="notext">Alumnos</a>
</div>
<div role="main" class="ui-content">
<p>Acá vas a poder anotar tus series y películas favoritas, las que estás siguiendo y las quue querés ver, películas que te recomendaron para que no te las olvides o los próximos entrenos para que no se te pase ninguno.</p>
<ul data-role="listview" data-theme="e" style="margin-top: 30px;">
<li style="margin-bottom: 5px;"><a href="#series">NOTAS</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<h2>DAM - 5to Cuatrimestre - 2018</h2>
</div>
</div>
<!--Seccion de series -->
<div data-role="page" id="series" data-theme="e">
<div data-role="header">
<h1>Tus series</h1>
<a href="#home"
data-role="button"
data-icon="home"
data-iconpos="notext">Home</a>
<a href="#agregar"
data-icon="plus"
data-iconpos="notext"
class="ui-btn-right">Agregar</a>
</div>
<div role="main" class="ui-content">
<div class="ui-grid-a" id="grilla">
<div class="ui-block-a">
<strong>Los increibles</strong><br>
<span>1/7/2018</span><br><strong>Pelicula</strong><br><strong>01</strong>
</div>
<div class="ui-block-b">
<strong>Dragon Ball</strong><br>
<span>5/7/2018</span><br><span>serie</span><br><span>536</span>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#series" data-icon="alert" class="ui-btn-active">Series</a>
</li>
<li><a href="#peliculas" data-icon="camera">Películas</a></li>
<li><a href="#estrenos" data-icon="check">Estrenos</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="peliculas" data-theme="e">
<div data-role="header">
<h1>Tus películas</h1>
<a href="#home"
data-role="button"
data-icon="home"
data-iconpos="notext">Home</a>
</div>
<div role="main" class="ui-content">
<div class="ui-grid-a" id="grilla">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#series" data-icon="alert">Series</a>
</li>
<li><a href="#peliculas" data-icon="camera" class="ui-btn-active">Películas</a></li>
<li><a href="#estrenos" data-icon="check">Estrenos</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="estrenos" data-theme="e">
<div data-role="header">
<h1>Tus estrenos</h1>
<a href="#home"
data-role="button"
data-icon="home"
data-iconpos="notext">Home</a>
</div>
<div role="main" class="ui-content">
<div class="ui-grid-a" id="grilla">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#series" data-icon="alert">Series</a>
</li>
<li><a href="#" data-icon="camera">Películas</a></li>
<li><a href="#" data-icon="check" class="ui-btn-active">Estrenos</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="agregar">
<div data-role="header">
<h1>Nuevo Serie/Pelicula/Estreno</h1>
</div>
<div role="main" class="ui-content">
<form>
<input type="text" id="name" placeholder="Nombre serie,pelicula o serie" required>
<input type="date" name="fecha" placeholder="Fecha" required />
<select name="donde" id="medio">
<option value="Serie">Serie</option>
<option value="Película">Película</option>
<option value="Estreno">Estreno</option>
</select>
<input type="number" id="episodios" placeholder="Episodios" step=".1" required/>
<a href="#series" data-role="button" data-inline="true">Cancelar</a>
<input type="submit"
value="Agregar"
data-theme="e"
data-inline="true"/>
</form>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<h2>DAM - 5to Cuatrimestre - 2018</h2>
</div>
</div>
<script src="main.js"></script>
</body>
</html>