Dialog for mobile app fails to come out - javascript

I'm developing an app by Jquery, and signup/login page occurs some problems with the signup/login dialogue. it doesn't come out when I click the trigger button, when I clicked the button, there is just nothing happens.
My home page looks like this:
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Home Page</title>
<link rel="stylesheet" href= "css/normalise.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js"/>
<link rel="stylesheet" href= "css/jquery.mobile-1.4.5.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js"/>
<link rel="stylesheet" href= "css/jquery.mobile.structure-1.4.5.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js"/>
<link rel="stylesheet" href= "css/jquery.mobile.theme-1.4.5.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js"/>
<link rel="stylesheet" href= "css/signup.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js"/>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style1.css"> <!-- Gem style -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<title>Welcome</title>
<body>
<img alt="full screen background image" src="images/background1.png" id="full-screen-background-image" />
<div class="intro__content">
<div class="grid">
<figure class="effect-bubba">
<img src="images/signup.png" alt="img02"/>
<figcaption>
<h2>SIGN <span>UP</span></h2>
View more
</figcaption>
</a>
</figure>
<figure class="effect-bubba">
<img src="images/signin.png" alt="img16"/>
<figcaption>
<h2>SIGN <span>IN</span></h2>
<a href="#cd-login" class="ui-shadow cd-signin" >View more</a>
</figcaption>
</figure>
</div>
</div>
<div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
<div class="cd-user-modal-container"> <!-- this is the container wrapper -->
<ul class="cd-switcher">
<li>Sign in</li>
<li>New account</li>
</ul>
<div id="cd-login"> <!-- log in form -->
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="signin-email">E-mail</label>
<input class="full-width has-padding has-border" id="signin-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password" for="signin-password">Password</label>
<input class="full-width has-padding has-border" id="signin-password" type="text" placeholder="Password">
Hide
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input type="checkbox" id="remember-me" checked>
<label for="remember-me">Remember me</label>
</p>
<p class="fieldset">
<input class="full-width" type="submit" value="Login">
</p>
</form>
<p class="cd-form-bottom-message">Forgot your password?</p>
<!-- Close -->
</div> <!-- cd-login -->
<div id="cd-signup"> <!-- sign up form -->
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-username" for="signup-username">Username</label>
<input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="Username">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-email" for="signup-email">E-mail</label>
<input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password" for="signup-password">Password</label>
<input class="full-width has-padding has-border" id="signup-password" type="text" placeholder="Password">
Hide
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input type="checkbox" id="accept-terms">
<label for="accept-terms">I agree to the Terms</label>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Create account">
</p>
</form>
<!-- Close -->
</div> <!-- cd-signup -->
<div id="cd-reset-password"> <!-- reset password form -->
<p class="cd-form-message">Lost your password? Please enter your email address. You will receive a link to create a new password.</p>
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="reset-email">E-mail</label>
<input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Reset password">
</p>
</form>
<p class="cd-form-bottom-message">Back to log-in</p>
</div> <!-- cd-reset-password -->
Close
</div> <!-- cd-user-modal-container -->
<div id="carbonads-container">
<div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/57881/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script>
</div>
Close
</div> <!-- carbonads-container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="js/main.js"></script> <!-- Gem jQuery -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48014931-1', 'codyhouse.co');
ga('send', 'pageview');
jQuery(document).ready(function($){
$('.close-carbon-adv').on('click', function(){
$('#carbonads-container').hide();
});
});
</script>
</body>
</html>`

Related

input validation does not work - form gets submitted anyway?

I'm creating a website with a form and I can't get the validation to work, and can't figure out what I'm doing wrong. I've tried everything I can think of. The PHP works and it will submit, but it will always submit, and won't stop itself from submitting.
<!DOCTYPE html>
<html lang="En">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="a website for carley Knight art">
<meta name="keywords" content="art artist painter painting store fine-art">
<link rel="favicon icon" href="Images/favicon.ico">
<title>Carley Knight Art</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="slicknav.css">
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slicknav#1.0.8/dist/jquery.slicknav.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.19.3/dist/jquery.validate.min.js"></script>
<script src="js/final.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav_menu').slicknav({
prependTo: "#mobile_menu"
});
});
</script>
</head>
<body>
<header>
<img src="Images/Pink%20Stationery%20Literacy%20Google%20Classroom%20Header.png" alt="header">
</header>
<Nav id="mobile_menu"></Nav>
<nav id="nav_menu">
<ul>
<li><a class="current" href="Index.html">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
<li>Shop</li>
<li>FAQs</li>
</ul>
</nav>
<main>
<section>
<div id="top">
<h1>Homepage</h1>
<p>Welcome to Carley Knight Art!</p>
</div>
<img src="Images/IMG_2995-768x1024.jpg" alt="carley knight and art" class="center" id="carley">
<p>Hello My name is Carley Knight and I'm an artist living in Milwaukee, WI. I make abstract art in a variety of different mediums, including fibers, acrylics, and digital.</p><br>
<button id="readMore">Read More</button>
</section>
<aside>
<form action="sendmail.php" method="post" name="contact_form" id="contact_form">
<fieldset>
<legend>sign up now!</legend><br>
<p>Sign up for my email list and get a free mini coloring book!</p><br>
<img src="Images/minicoloirngbook.jpg" alt="mini coloring book"><br>
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name"><span>*</span><br>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name"><span>*</span><br>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email"><span>*</span><br>
<label for="verify">Verify Email:</label>
<input type="email" name="verify" id="verify"> <span>*</span><br>
<div id="buttons">
<input type="submit" id="submit" value="Sign Up">
</div>
</fieldset>
<script>
$("#contact_form").validate();
debug: true
</script>
</form>
</aside>
</main>
<footer>©copywrite 2021 Carley Knight Designs</footer>
</body>
</html>

In HTML all you have to do is give element input the attribute required.
If you wish for more advanced validation then you have to do it in javascript.
<form>
<input type="text" required>
<input value="GO" type="submit">
</form>

my form submit does not work what is the problem that prevents it from working?

I have a problem sending my form submit and I do not know what the problem is.
I have already tried the debugging but it does not work can someone help me found the solution please?
this is my jsp page :
<%#page import="controller.Cnx"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#page import="java.sql.*"%>
<%#page import="java.util.Map"%>
<!DOCTYPE html>
<%
Connection c=Cnx.getcnx();
Statement st=c.createStatement();
ResultSet re=st.executeQuery("select * from place");
Statement st2=c.createStatement();
ResultSet re2=st2.executeQuery("select * from local");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Interface locataire</title>
<meta name="description" content="Sufee Admin - HTML5 Admin Template">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-icon.png">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/themify-icons/css/themify-icons.css">
<link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="vendors/selectFX/css/cs-skin-elastic.css">
<link rel="stylesheet" href="vendors/jqvmap/dist/jqvmap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="css/Css_acceuil_locataire.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/e3fd0d5f24.js" crossorigin="anonymous"></script>
</head>
<body>
<aside id="left-panel" class="left-panel">
<nav class="navbar navbar-expand-sm navbar-default" style="flex-flow:column wrap;">
<div class="navbar-header">
<a class="navbar-brand" href="#">Gestion parkings</a>
<a class="navbar-brand hidden" href="./"><img src="images/logo2.png" alt="Logo"></a>
</div>
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item ">
<i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Réservation
</li>
<li class="nav-item ">
<i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Liste réservation
</li>
</ul>
</div>
</nav>
</aside>
<nav class="navbar" style="height:70px;" id='nav-proprietaire'>
<ul class="nav navbar-nav">
<li class="nav-item ">
<i class="fas fa-exclamation-circle" style="margin-right: 20px;"></i>Déconnection
</li>
</ul>
</nav>
<label id="label1">Liste des places disponibles avec leurs emplacements :</label>
<table class="table table-hover" style="margin-top: 20px;" id="table1">
<thead>
<tr class="table-active">
<th scope="col">Nom local</th>
<th scope="col">Numéro place</th>
<th scope="col">Prix par heure</th>
<th scope="col">Taille</th>
<th scope="col">Action</th>
</tr>
</thead>
<%while(re.next()){%>
<tbody id="corps">
<tr>
<td scope="row"><%=re.getObject(2)%></td>
<td><%=re.getObject(3)%></td>
<td><%=re.getObject(4)%></td>
<td><%=re.getObject(5)%></td>
<td></i>Réserver</td>
</tr>
<%}%>
</tbody>
</table>
<div class="modal" id="reservation">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="POST" id="f" action='Acceuil_locataire'>
<div class="form-group">
<label class='labelproprietaire'>Nom du local approprié à la place :</label>
<input type="hidden" class="form-control" id="nom_localhidden" name="nom_localhidden">
<input type="text" class="form-control" id="nom_local" name="nom_local" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Numéro place :</label>
<input type="hidden" class="form-control" id="numeroplacehidden" name="numeroplacehidden">
<input type="number" class="form-control" id="numeroplace" name="numeroplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix par heure:</label>
<input type="hidden" class="form-control" id="prixplacehidden" name="prixplacehidden">
<input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Taille de la place :</label>
<input type="hidden" class="form-control" id="tailleplacehidden" name="tailleplacehidden">
<input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Heure début de la réservation :</label>
<input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Heure fin de la réservation :</label>
<input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div id='divbtnaddplace'>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#paiement" data-dismiss="modal" id='btnreserver' style='vertical-align: 0; margin-right: 220px;'>Réserver</button>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal" id="paiement">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="POST" id="f1" action="Acceuil_locataire">
<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="text" class="form-control" id="Cin" name="cin">
</div>
<div class="form-group">
<label class='labelproprietaire'>Type paiement :</label>
<div class="row">
<div class="col-md-6 select-outline">
<select class="mdb-select md-form md-outline colorful-select dropdown-primary btn-lg" style="width: 465px;" name="typepaiement">
<option value="" disabled selected>Choose your option</option>
<option value="Paypal">Paypal</option>
<option value="Carte bancaire">Carte bancaire</option>
<option value="Payonner">Payonner</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix :</label>
<br>
<input type='hidden' id='prixtotalhidden' name="prixtotalhidden">
<input type='text' class="form-control" id="prix" name="prixtotal" style='font-size: 20px; color: red;' disabled="">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-lg" data-dismiss="modal" id="buttonpayer" name="action" value="payer" style="margin-right: 250px;">Payer</button>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="vendors/popper.js/dist/umd/popper.min.js"></script>
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
<script src="js/moment.js"></script>
<script src="vendors/chart.js/dist/Chart.bundle.min.js"></script>
<script src="assets/js/dashboard.js"></script>
<script src="assets/js/widgets.js"></script>
<script src="vendors/jqvmap/dist/jquery.vmap.min.js"></script>
<script src="vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<script src="vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script>
function afficher(e){
e.preventDefault();//pour inhiber le lien, parce que le bouton .btn est un <a href="#">
var tr=$(this).closest('tr');
$('#f .custom-select')
.html('<option value="'+tr.find('td:eq(0)').text()+'">'+tr.find('td:eq(0)').text()+'</option>');
$('#nom_local').val(tr.find('td:eq(0)').text());
$('#numeroplace').val(tr.find('td:eq(1)').text());
$('#prixplace').val(tr.find('td:eq(2)').text());
$('#tailleplace').val(tr.find('td:eq(3)').text());
$('#nom_localhidden').val(tr.find('td:eq(0)').text());
$('#numeroplacehidden').val(tr.find('td:eq(1)').text());
$('#prixplacehidden').val(tr.find('td:eq(2)').text());
$('#tailleplacehidden').val(tr.find('td:eq(3)').text());
}
/* Quand le document est prêt */
$(document).ready(function(){
$('#table1').on('click','#corps .btn',afficher);
});
</script>
<script>
function recuperer_prix_total(){
var prixtotal= $('$prixtotal').val();
$('$prixtotalhidden').val(prixtotal);
}
$(document).ready(function(){
$('#buttonpayer').on('click',recuperer_prix_total());
});
</script>
<script>
$('#paiement').on('shown.bs.modal', function () {//quand #myModal s'affiche
var heure_debut = $("#heure_debut").val(),
heure_fin = $("#heure_fin").val(),
prix=$('#prixplace').val(),
diff,
total;
console.log("prix"+prix);
console.log('Ouverture du modal...');//vérifies si tu vois cette ligne dans la console quand le modal #myModal est affiché
if (moment(heure_debut, "HH:mm").isValid() && moment(heure_fin, "HH:mm").isValid()) {
diff = moment.utc(moment(heure_fin, 'HH:mm').diff(moment(heure_debut, 'HH:mm')));
console.log("diif = "+diff);
total=prix * moment(diff,'HH:mm').hour()+ ( moment(diff,'HH:mm').minutes()/60 );
console.log(total);
$("#prix").val(total.toFixed(2)+" DHS");
console.log('Ouverture du modal, debut :'+heure_debut,", fin :"+heure_fin);
console.log("différence :", diff.format('HH:mm'),", hour :",moment(diff,'HH:mm').hour(),
", minutes :",moment(diff,'HH:mm').minutes(),
", total :",total.toFixed(2));
} else
console.log("heure invalide !");
console.log('Ouverture du modal, debut :'+heure_debut,", fin :"+heure_fin);
});
</script>
</body>
</html>
And this is my servlet :
#Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String nom_local=request.getParameter("nom_localhidden");
System.out.println("hello");
String numeroplace=request.getParameter("numeroplacehidden");
String prixplace=request.getParameter("prixplacehidden");
String tailleplace=request.getParameter("tailleplacehidden");
String cinlocataire=request.getParameter("cinlocataire");
String heure_debut=request.getParameter("heure_debut");
String heure_fin=request.getParameter("heure_fin");
String action=request.getParameter("action");
DateFormat dateformat=new SimpleDateFormat("HH:mm");
String cin=request.getParameter("cin");
String typepaiement=request.getParameter("typepaiement");
String prixtotalhidden=request.getParameter("prixtotalhidden");
Connection c=Cnx.getcnx();
try{
if("payer".equals(action)){
PreparedStatement st=c.prepareStatement("insert into reservation values (null,?,?,?,?,?,?,?)");
st.setString(1, nom_local);
st.setString(2, numeroplace);
st.setString(3, prixplace);
st.setString(4, tailleplace);
st.setString(5, cinlocataire);
st.setTime(6, new java.sql.Time(dateformat.parse(heure_debut).getTime()));
st.setTime(7, new java.sql.Time(dateformat.parse(heure_fin).getTime()) );
int res=st.executeUpdate();
System.out.println("hello");
if(res>0){
System.out.println("reservation réaliser avec succes");
}
else {
System.out.println("reservation non ajouter");
}
PreparedStatement st2=c.prepareStatement("insert into paiement values (null,?,?,?)");
st2.setString(1, cin);
st2.setString(2, typepaiement);
st2.setString(3, prixtotalhidden);
int res2= st2.executeUpdate();
if(res2>0){
System.out.println("paiement réaliser avec succes");
}
else {
System.out.println("paiement non ajouter");
}
}
}
catch(Exception ex){
ex.printStackTrace();
}
getServletContext().getRequestDispatcher("/WEB-INF/Acceuil_locataire.jsp").forward(request, response);
}
normally I put in the form action = ... and in the button I give it a name and a value and I use them in my servlet.
Normally this technique works on my other projects but here it blocks the form is not send to the servlet and I really do not know what the problem is.
sorry if my question is stupid but it's 1 day I'm stuck on it and i am just a begginner
Help me please !

How to use jquery to go to the next page or window in my Electron app

I'm trying to create a login system. I want the system to take me to another page "page3.htm" when I press the login button. I have been trying to test my system in jquery, but the code below does not seem to work. Why is that?
The "login.js" file contains:
window.onload =function() {
var loginBtn = document.getElementById('go');
loginBtn.addEventListener('click',function(){
document.location.href = './page3.html';
});
}
The "index.html" file contains:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!--Jquery -->
<script>window.$ = window.jQuery = require('./jquery-3.3.1.min.js');</script>
<!--Jquery end -->
<!--login css -->
<link rel="stylesheet" type="text/css" href="/bootstrap/css/login.css">
<!--login css ends here -->
<!--Database link -->
<script src='dbcon.js'></script>
<!--database link ends -->
<!--login link -->
<script src='login.js'></script>
<!--login link ends -->
<style>
</style>
</head>
<body>
<form>
<h1>Fashion World</h1>
<div class="inset">
<p>
<label for="username">Username</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">PASSWORD</label>
<input type="password" name="password" id="password">
</p>
<p>
<input type="checkbox" name="remember" id="remember">
<label for="remember">Remember me for 14 days</label>
</p>
</div>
<p class="p-container">
<span>Forgot password ?</span>
<input type="submit" name="go" id="go" value="Log in">
</p>
</form>
</body>
</html>

Problems with javascript not loading on datetime picker in asp .net page

I have a problem with the bootstrap datetime picker. I don't think the JavaScript get's loaded when the page is running. Here is the script that i try to run.
<script type="text/javascript">
$(function () {
$('#inputNewPublicationDate').datetimepicker({
locale: 'dk'
});
});
</script>
and here is the textbox/input box that I want the date picker to be related to.
<div class="form-group">
<div class='input-group date' id='inputNewPublicationDate'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
I am using a masterpage if that is relevant for this problem. Can some one explained to me what I am doing wrong? Here is the generated HTML.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
Euro Poultry
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /><link href="Content/bootstrap.css" rel="stylesheet" /><link href="Content/hover.css" rel="stylesheet" /><link href="Content/MenuCss.css" rel="stylesheet" /><link href="Content/MyCss.css" rel="stylesheet" /><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /><link href="Content/bootstrap-datetimepicker.min.css" rel="stylesheet" /><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../Scripts/moment.min.js"></script>
<script src="../Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="../Scripts/da.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" /></head>
<body>
<form method="post" action="NewProduct" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="TohYngYAQpCAII8RpuQnEalPl/MTArnSEh+ZpM9u8IM0qp+pydvAXRs1biEQdGMzypAlutTdOoQBFlApZ5P0jplQl6tY3em/XaDxCPoZLIUpPnQP/EJu8oNhT1EGKGTU/mY5b/S/GvhXA3nzCXGnQ37DOu9qDZwMxP3xDCwjFxTwNQux/jF9ZH/K24q0Fmgo7cpJALpuVCgmiBZ8nxTPpA==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax-framework på klientsiden blev ikke indlæst.');
//]]>
</script>
<script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="E6B80599" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="ziT0MWsXfU8bZf+HxgsyZxmvTOEWqLQAAVF2jCik7SvdOA/hstIfA8BYa8FfUczfqC2x1DvTsx1lx8eC0mAvo2idOZKBotnAxZyCCfL95qaIB3oeDzaq8WPooYr8Erpv" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl16', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<div class="MenuBody">
<a href="Overview.aspx">
<div class="MenuBrand">
<p>EP</p>
</div>
</a>
<a href="AllProducts.aspx">
<div class="MenuBtn hvr-underline-from-left">
<p>Produkter</p>
</div>
</a>
<a href="NewProduct.aspx">
<div class="MenuBtn hvr-underline-from-left">
<p>Nyt Produkt</p>
</div>
</a>
</div>
<div class="menuUnderLine">
</div>
<div class="Content fullscreen">
<div class="newProductWrapper">
<div class="myRow">
<div class="mediumCol">
<div class="myRow">
<div class="mediumCol title">
<span id="MainContent_lblNewGtin">GTIN - Global Trade Item Number</span>
</div>
</div>
<div class="myRow">
<div class="mediumCol">
<input name="ctl00$MainContent$txtNewGtin" type="text" id="MainContent_txtNewGtin" class="form-control" />
</div>
</div>
</div>
<div class="mediumCol">
<div class="myRow">
<div class="mediumCol title">
<span id="MainContent_lblNewTargetMarket">Landekode for Target Market</span>
</div>
<div class="mediumCol">
<select name="ctl00$MainContent$ddNewTargetMarket" id="MainContent_ddNewTargetMarket" class="form-control">
</select>
</div>
</div>
</div>
</div>
<div class="myRow">
<div class="smallCol">
<div class="myRow">
<div class="smallCol title">
<span id="MainContent_Label1">Start gyldighedsdato</span>
</div>
<div class="smallCol">
<div class="form-group">
<div class='input-group date' id='inputNewEffectiveDate'>
<input id="txtNewEffectiveDate" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="smallCol">
<div class="myRow">
<div class="smallCol title">
<span id="MainContent_lblNewPublicationDate">Publikationsdato</span>
</div>
<div class="smallCol">
<div class="form-group">
<div class='input-group date' id='inputNewPublicationDate'>
<input id="txtNewPublicationDate" data-format="dd/MM/yyyy" type='text' class="form-control" />
<span class="input-group-addon" style="z-index: 200;">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#txtNewEffectiveDate').datetimepicker({
locale: 'da'
});
});
</script>
<script type="text/javascript">
$(function () {
$('#inputNewPublicationDate').datetimepicker({
locale: 'da'
});
});
</script>
</div>
</form>
</body>
</html>

getElementById().value gives blank for a text box

I am trying to show the value entered in a text box into a javascript alert(). I have a form on whose onSubmit(), I am calling a function checkLogin() in which I am alerting the value entered in the #test_user text box. Below is the HTML code:
<form id="login_form" name="login_form" method="post" action="verifylogin.php" onSubmit="checkLogin()">
<input type="text" id="test_user" name="username" class="inputbox" placeholder="Username" value=""/>
<input type="password" id="password" name="password" class="inputbox" placeholder="Password" />
<input type="submit" id="login" name="submit" value="LOG IN">
Login with facebook
</form>
And below is the checkLogin() function in js:
function checkLogin() {
var uname = document.getElementById('test_user').value;
alert(uname);
}
I need to show the text entered in the text box with id #test_user in the alert but the alert does not show anything. A blank alert is displayed.
I know this can also be done by passing the value as a parameter to the function but I wanted to know why this way isn't working.
Please help.
UPDATE: It does work when I use this code separately but when I am doing this in a website I am developing, this issue arises. I am not able to understand why this is happening.
UPDATE: Below is all my HTML code:
<!doctype html>
<!--[if IE 7 ]> <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
<!--[if IE 8 ]> <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
<!--[if IE 9 ]> <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-gb" class="no-js"> <!--<![endif]-->
<head>
<title><?php echo $title?> | App Contest</title>
<meta charset="utf-8">
<meta name="keywords" content="app contest" />
<meta name="description" content="Welcome to App Contest" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>addons/superfish_responsive/superfish.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/updates.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/custom.css" type="text/css" />
<!-- This stylesheet only adds some repairs on idevices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/responsive-devices.css" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900&v1&mp;subset=latin,latin-ext" type="text/css" media="screen" id="google_font" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700&v1&mp;subset=latin,latin-ext" type="text/css" media="screen" id="google_font_body" />
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo base_url(); ?>js/jquery-1.8.2.min.js">\x3C/script>')</script>
<script src="<?php echo base_url(); ?>js/jquery.noconflict.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>js/common_functions.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js" type="text/javascript"></script>
<link rel="shortcut icon" href="<?php echo base_url(); ?>images/favicons/favicon.png">
<link rel="apple-touch-icon" href="<?php echo base_url(); ?>images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo base_url(); ?>images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo base_url(); ?>images/favicons/apple-touch-icon-114x114.png">
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="css/fixes.css" />
<![endif]-->
<!--[if lte IE 8]>
<script src="js/respond.js"></script>
<script type="text/javascript">
var $buoop = {vs:{i:8,f:6,o:10.6,s:4,n:9}}
$buoop.ol = window.onload;
window.onload=function(){
try {if ($buoop.ol) $buoop.ol();}catch (e) {}
var e = document.createElement("script");
e.setAttribute("type", "text/javascript");
e.setAttribute("src", "http://browser-update.org/update.js");
document.body.appendChild(e);
}
</script>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Facebook OpenGraph Tags - Replace with your own -->
<meta property="og:title" content="KALLYAS Template HTML"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.hogash.com/demo/kalypso_html/"/>
<meta property="og:image" content="http://www.hogash.com/demo/kalypso_html/images/logo.png"/>
<meta property="og:site_name" content="Kallyas"/>
<meta property="fb:app_id" content=""/> <!-- PUT HERE YOUR OWN APP ID - you could get errors if you don't use this one -->
<meta property="og:description" content="Welcome to KALLYAS Template, a wonderful and premium product for multipurpose websites"/>
<!-- END Facebook OpenGraph Tags -->
<!-- THIS IS THE DARK THEME STYLESEET // REMOVE COMMENTS TO ENABLE -->
<!-- <link rel="stylesheet" href="css/dark-theme.css" type="text/css" /> -->
<!-- END DARK THEME -->
</head>
<body class="">
<!-- ADD AN APPLICATION ID !!
If you want to know how to find out your app id, either search on google for: facebook appid, either go to http://rieglerova.net/how-to-get-a-facebook-app-id/ -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId="; // addyour appId here
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="support_panel" id="sliding_panel">
<div class="container">
<div class="row">
<div class="span9">
<h4 class="m_title">HOW TO SHOP</h4>
<div class="m_content how_to_shop">
<div class="row">
<div class="span3">
<span class="number">1</span> Login or create new account.
</div>
<div class="span3">
<span class="number">2</span> Review your order.
</div>
<div class="span3">
<span class="number">3</span> Payment & <strong>FREE</strong> shipment
</div>
</div>
<p>If you still have problems, please let us know, by sending an email to support#website.com . Thank you!</p>
</div><!-- end how to shop steps -->
</div>
<div class="span3">
<h4 class="m_title">SHOWROOM HOURS</h4>
<div class="m_content">
Mon-Fri 9:00AM - 6:00AM<br>
Sat - 9:00AM-5:00PM<br>
Sundays by appointment only!
</div>
</div>Document.getElementById
</div>
</div>
</div><!-- end support panel -->
<div class="login_register_stuff hide"><!-- Login/Register Modal forms - hidded by default to be opened through modal -->
<div id="login_panel">
<div class="inner-container login-panel">
<h3 class="m_title">SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES</h3>
<form id="login_form" name="login_form" method="post" action="<?php echo base_url(); ?>index.php/verifylogin" onSubmit="checkLogin()">
Login with google
<input type="text" id="test_user" name="username" class="inputbox" placeholder="Username" onblur="checkEmpty(this.value)" />
<input type="password" id="password" name="password" class="inputbox" placeholder="Password" />
<input type="submit" id="login" name="submit" value="LOG IN">
Login with facebook
</form>
<!--
<div class="links">FORGOT YOUR USERNAME? / FORGOT YOUR PASSWORD?</div>
-->
</div>
</div><!-- end login panel -->
<div id="register_panel">
<div class="inner-container register-panel">
<h3 class="m_title">CREATE ACCOUNT</h3>
<form id="register_form" name="register_form" method="post">
<p>
<input type="text" id="reg-username" name="username" class="inputbox" placeholder="Username">
</p>
<p>
<input type="text" id="fullname" name="fullname" class="inputbox" placeholder="Your full name">
</p>
<p>
<input type="text" id="reg-email" name="email" class="inputbox" placeholder="Your email">
</p>
<p>
<input type="password" id="reg-password" name="password" class="inputbox" placeholder="Desired password">
</p>
<p>
<input type="password" id="confirm_password" name="confirm_password" class="inputbox" placeholder="Confirm password">
</p>
<p>
<input type="submit" id="signup" name="submit" value="CREATE MY ACCOUNT">
</p>
</form>
<div class="links">ALREADY HAVE AN ACCOUNT?</div>
</div>
</div><!-- end register panel -->
<div id="forgot_panel">
<div class="inner-container forgot-panel">
<h3 class="m_title">FORGOT YOUR DETAILS?</h3>
<form id="forgot_form" name="forgot_form" method="post">
<p>
<input type="text" id="forgot-email" name="email" class="inputbox" placeholder="Email Address">
</p>
<p>
<input type="submit" id="recover" name="submit" value="SEND MY DETAILS!">
</p>
</form>
<div class="links">AAH, WAIT, I REMEMBER NOW!</div>
</div>
</div><!-- end register panel -->
</div><!-- end login register stuff -->
<div id="page_wrapper">
<header id="header" class="style2">
<div class="container">
<!-- logo -->
<h1 id="logo"><a href="<?php echo base_url(); ?>" style="color:#fff">App Contest
</a></h1>
<ul class="topnav navRight">
<li><a href="#" id="open_sliding_panel">
<span class="icon-remove-circle icon-white"></span>
</a>
</li>
<?php if(isset($username))
{
echo'<li>LOGOUT</li>';
}
else
{
echo '<li>LOGIN</li>';
}?>
</ul><!-- end topnav // right aligned -->
<!-- end topnav // left aligned -->
<script type="text/javascript">
// THIS SCRIPT DETECTS THE ACTIVE ELEMENT AND ADDS ACTIVE CLASS
(function($){
$(document).ready(function(){
var pathname = window.location.pathname,
page = pathname.split(/[/ ]+/).pop(),
menuItems = $('#main_menu a');
menuItems.each(function(){
var mi = $(this),
miHrefs = mi.attr("href"),
miParents = mi.parents('li');
if(page == miHrefs) {
miParents.addClass("active").siblings().removeClass('active');
}
});
});
})(jQuery);
</script>
</div>
</header>
The function checkLogin() is in the file common_functions.js which I have included on line:33 and the login form is at line:129.

try this fiddle, it works for me
http://jsfiddle.net/WR2en/
as you can see the error was
onSubmit="javascript:checkLogin();">

try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
function checkLogin()
{
var uname = jQuery('#test_user').val();
if(uname=='')
alert('Enter Username');
else
alert(uname);
//return true; // checklogin true
return false; // checklogin fail
}
</script>
</head>
<body>
<form id="login_form" name="login_form" method="post" action="verifylogin.php" onSubmit="return checkLogin()">
<input type="text" id="test_user" name="username" class="inputbox" placeholder="Username" value=""/>
<input type="password" id="password" name="password" class="inputbox" placeholder="Password" />
<input type="submit" id="login" name="submit" value="LOG IN">
Login with facebook
</form>
</body>
</html>

Categories