Problem with Java form for hybrid app

0

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>
    
asked by Matt 02.07.2018 в 00:17
source

1 answer

0

It is not very clear what you want to achieve, but I see that you have an error in your code. At the time of creating the content put quotes and leave some names outside the string. The way to create the content is this:

var contenido = "<strong>Los increibles</strong><br> <span> 1 / 7 / 2018 < /span><br><strong>Pelicula</strong> < br > < strong > 01 < /strong> " ;

And if you want to use variables you have to concatenate them with the "+":

var contenido = "<strong>" + titulo +"</strong><br> <span>" + fecha + "< /span><br><strong>" + pelicula + "</strong> < br > < strong > 01 < /strong> " ;
    
answered by 02.07.2018 в 08:42