I have a file form.php,
if I enter noting into the form and click the submit button on the web and it write a dictionary into the firebase database successfully,
var dict = {
Name: writeName,
City: "111",
Country: "222",
Address: "333",
};
of course the Name is "".
But if i type something such as "Peter" or something else in the form and click submit button, most if the time it will write nothing into the database.
Please kindly help to solve this issue.
here with the form.php code.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="" class="logo">
<span class="title"></span>
</a>
</div>
</header>
<!-- Main -->
<div id="main">
<div class="inner">
<header>
</header>
<section>
<form id="form1" name="form1">
<div class="row uniform">
<div class="6u 12u$(xsmall)">
<input type="text" name="ContactName" id="ContactName" value="" required placeholder="公司名字(必填)" />
</div>
<div class="12u$">
<ul class="actions">
<center>
<li><input type="submit" name="submit" id="submit" onClick="submitClick()" class="button special fit" form="form1" value="提交"></li>
<li><input type="reset" class="button special fit" value="Reset" /></li>
</center>
</ul>
</div>
</div>
</form>
</div>
</div>
</section>
</section>
</section>
</div>
</div>
<!--
<footer id="footer">
<div class="inner">
<section>
<h2>Get in touch</h2>
<form method="post" action="#">
<div class="field half first">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="Send" class="special" /></li>
</ul>
</form>
</section>
<section>
<ul class="copyright">
<center><small>© All rights reserved ♥ Grand Production House ♥ Email</small></center>
</ul>
<ul class="icons">
<li><span class="label">Twitter</span></li>
<li><span class="label">Facebook</span></li>
<li><span class="label">Instagram</span></li>
<li><span class="label">Dribbble</span></li>
<li><span class="label">GitHub</span></li>
<li><span class="label">500px</span></li>
<li><span class="label">Phone</span></li>
<li><span class="label">Email</span></li>
</ul>
</section>
</div>
</footer>
-->
</div>
<!-- Scripts -->
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "zzzzzzzzzzzzz",
authDomain: "zzzzzzzzzzz",
databaseURL: "zzzzzzzzzzzz",
projectId: "zzzzzzzzzz",
storageBucket: "zzzzzzzzzzzzzzzzzz",
messagingSenderId: "zzzzzzzzzzzzzzzzzz"
};
firebase.initializeApp(config);
</script>
<script>
function submitClick() {
var name = document.getElementById("ContactName");
var writeName = name.value;
var dict = {
Name: writeName,
City: "111",
Country: "222",
Address: "333",
};
firebase.database().ref().child("SUBMIT").push().set(dict);
}
</script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>
Change:
<li><input type="submit" name="submit" id="submit" onClick="submitClick()" class="button special fit" form="form1" value="提交"></li>
to this:
<li><input type="button" name="btn" id="btn" onClick="submitClick()" class="button special fit" form="form1" value="提交"></li>
Also refer to this:
Submit and onclick not working together
onClick didn't work inside form?
Related
I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.
This is the source of the external site, which I got from my browser.
<!DOCTYPE html>
<html><head>
<title>Omitted | Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var areActiveModsSelected = false;
var areInactiveModsSelected = false;
function SetActiveSelection()
{
var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
areActiveModsSelected = !areActiveModsSelected;
SetSelection(checkboxes, areActiveModsSelected);
}
function SetInactiveSelection()
{
var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
areInactiveModsSelected = !areInactiveModsSelected;
SetSelection(checkboxes, areInactiveModsSelected);
}
function SetSelection(checkboxes, isSelected)
{
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = isSelected;
}
}
function checkSavegame()
{
var e = document.getElementById("savegame");
if (e != null) {
var savegame = e.options[e.selectedIndex].text;
var isEmpty = isEmptySavegame(savegame);
document.getElementById("mapSelector").disabled = !isEmpty;
document.getElementById("difficultySelector").disabled = !isEmpty;
}
}
function isEmptySavegame(value)
{
var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
return ret != null;
}
window.onload = function()
{
checkSavegame();
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/monitor.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<div class="white-bg clearfix">
<header class="main-header" role="banner" data-module="sticky">
<div class="header-bar clearfix"> <div class = "row column"> <div class = "top-bar-right"> <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li> </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><img src="img/icons/flag-en.png" alt="lang"><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></li></ul></li></ul> </div>
</div>
</div>
<div class="top-bar"> <div class="row column"> <div class="top-bar-left"> <img src="img/logo.png"> </div> <div class="top-bar-right"> <ul class="menu float-left"> <li><span>HOME</span></li>
<li><span>SAVEGAMES</span></li>
<li><span>MODS</span></li>
<li><span>JOURNAL</span></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit" name="login" type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">
<div class="social-header clearfix">
<div class="title-wrap clearfix" style="line-height: 62px;">
<i class="icon icon-twitter"></i><span>Twitter</span>
</div>
Follow
</div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT hi: Come and meet us at E3 at booth West Hall #4512 to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at #blank ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">
<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT #url: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>
</div>
</div>
</div>
</section>
<div class="partners clearfix text-center"> <div class="row"> <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" /> </div> </div> </div> <footer class="main-footer clearfix">
<div class="row">
<div class="medium-8 columns">
<div class="copyright"><img class="copyright__logo" src="img/logos/footer-logo.png"><div>© 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div> </div>
<div class="medium-4 small-12 columns">
<ul class="menu menu-footer float-right">
<li>7.0.5.0</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>
I tried this, but it simply redirects to the page without filling any of the fields.
<DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
</head>
<body>
<form id="loginForm" action="URL of site" method="POST">
<input type=hidden name="username" value="moo"/>
<input type=hidden name="password" value="boo"/>
</form>
</body>
</html>
What is wrong with my code, and how can I achieve my goal?
Thank you.
I have a simple login page which logins the user and then redirects them, however I've made a ajax code for the reset password page and after I enter the wrong details and the login page reloads the dropdown menu doesn't work.
I've tried to use the $('.dropdown-toggle').dropdown(); function however it's not working at all.
Login.php
<?php
require_once('./files/functions.php');
require_once('phpmailer/PHPMailerAutoload.php');
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>log in</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Vendors -->
<!-- Animate CSS -->
<link href="vendors/bower_components/animate.css/animate.min.css" rel="stylesheet">
<!-- Material Design Icons -->
<link href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
<!-- Site CSS -->
<link href="css/app-1.min.css" rel="stylesheet">
</head>
<body>
<div class="login">
<!-- Login -->
<div class="login__block toggled" id="l-login">
<div class="login__block__header">
<i class="zmdi zmdi-account-circle"></i>
Hi there! Please Sign in
<div class="actions login__block__actions">
<div class="dropdown">
<i class="zmdi zmdi-more-vert"></i>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-register" href="">Create an account</a></li>
<li><a data-block="#l-forget-password" href="#">Forgot password?</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form action="" method="POST">
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="text" class="form-control" name="email">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="password" class="form-control" name="password">
<label>Password</label>
<i class="form-group__bar"></i>
</div>
<button type="submit" name="login" value="Sign In" class="btn btn--light btn--icon m-t-15"><i class="zmdi zmdi-long-arrow-right"></i></button>
</form>
<?php
// some php code for the login process...
?>
</div>
</div>
<!-- Forgot Password -->
<div class="login__block" id="l-forget-password">
<div class="login__block__header palette-Purple bg">
<i class="zmdi zmdi-account-circle"></i>
Forgot Password?
<div class="actions login__block__actions">
<div class="dropdown">
<i class="zmdi zmdi-more-vert"></i>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-login" href="#">Already have an account?</a></li>
<li><a data-block="#l-register" href="#">Create an account</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form id="pw">
<p class="m-t-30">Please enter the e-mail address used to register. We will send your new password to that address.</p>
<div class="form-group form-group--float form-group--centered">
<input type="text" class="form-control" name="email" id="emailfield">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div id="result"></div>
<button class="btn btn--light btn--icon m-t-15" value="submit" type="submit"><i class="zmdi zmdi-check"></i></button>
</div>
</form>
<script type = "text/javascript">
$("form#pw").on("submit", function(e){
e.preventDefault();
var emailfield = $("#emailfield").val();
var email ='email='+ emailfield;
$.ajax({
url: "login.php",
method: "POST",
data: email,
success: function (result) {
alert("result: " + result);
console.log(result);
$("#result").html(result);
$('.dropdown-toggle').dropdown();
}
});
});
</script>
<?php
// php code for the reset password....
?>
</div>
</div>
<!-- Older IE Warning -->
<!--[if lt IE 9]>
<div class="ie-warning">
<h1>Warning!!</h1>
<p>You are using an outdated version of Internet Explorer, please upgrade <br/>to any of the following web browsers to access this website.</p>
<div class="ie-warning__container">
<ul class="ie-warning__download">
<li>
<a href="http://www.google.com/chrome/">
<img src="img/browsers/chrome.png" alt="">
<div>Chrome</div>
</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img src="img/browsers/firefox.png" alt="">
<div>Firefox</div>
</a>
</li>
<li>
<a href="http://www.opera.com">
<img src="img/browsers/opera.png" alt="">
<div>Opera</div>
</a>
</li>
<li>
<a href="https://www.apple.com/safari/">
<img src="img/browsers/safari.png" alt="">
<div>Safari</div>
</a>
</li>
<li>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
<img src="img/browsers/ie.png" alt="">
<div>IE (New)</div>
</a>
</li>
</ul>
</div>
<p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
<![endif]-->
<!-- Site Functions & Actions -->
<script src="js/app.min.js"></script>
</body>
</html>
You are including jQuery twice, once from a CDN and once from the local filesystem. Remove the CDN one at the top.
Your inline <script> block appears before your other Javascript resources are included. Try placing it after all other JS files, or even better in your app.min.js where it probably belongs.
It is hard to see the exact problem bcs so much of your code is your own custom stuff we can't see (and likely has nothing to do with this problem). In future, please try creating a minimal, verifiable example of your problem.
I'm new to Javascript(the pure javascript), I'm tryiong to create a chat controller app that does the below.
User enters content.
There is a post call done to my Knowledge Base.
The server responds the message.
Currently, I'm unable to get this post block executed though I click the button.
Below is my code.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Bootstrap Chat Box Example</title>
<!-- BOOTSTRAP CORE STYLE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME CSS -->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLE CSS -->
<link href="assets/css/style.css" rel="stylesheet" />
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).keypress(function(e) {
if (e.which == 13) {
$("#submitmsg").click();
}
});
$(document).ready(function() {
$('#submitmsg').bind('click', function() {
var message = $('#usermsg').val();
$('#chatbox').append('<p>' + message + '</p>');
$('#usermsg').val('');
//alert(message);
});
});
function serverResponse(message) {
$('#chatbox').append('<p>Server: ' + message + '</p>');
}
$("#submitmsg")
.click(
function() {
alert("Hi");
var inputtedText = $("#usermsg").val();
var params = {};
var controllerUrl = 'https://westus.api.cognitive.microsoft.com/qnamaker/v1.0/knowledgebases/bde3c190-58bd-40d8-9ff1-c35eb18588be/generateAnswer';
$.ajax({
url : controllerUrl,
type : 'POST',
data : {
"question" : inputtedText
},
beforeSend : function(xhrObj) {
// Request headers
xhrObj.setRequestHeader(
"Ocp-Apim-Subscription-Key", "MyKey");
xhrObj.setRequestHeader('Content-Type',
'application/json; charset=UTF-8');
},
success : function(data) {
var dataObj = data;
alert('Data:' + JSON.stringify(dataObj));
$('#resultvalue').html(data);
serverResponse(JSON.stringify(dataObj));
alert(data);
}
});
});
</script>
</head>
<body>
<nav class="menu">
<div class="container-fluid">
<div class="navbar-header">
<div class="back">
<img src="acn.jpg" draggable="false" />
</div>
<div class="name">Accenture Compliance</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
User Name</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a></li>
</ul>
</div>
</nav>
<br />
<br />
<br />
<div class="container">
<div class="row pad-top pad-bottom">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="chat-box-new-div">
<div class="chat-box-new-head">Compliance Avatar</div>
<div class="panel-body chat-box-new">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
</div>
</div>
</div>
<div class=" col-lg-6 col-md-6 col-sm-6">
<div class="chat-box-div">
<div class="chat-box-head">
CHAT HISTORY
<div class="btn-group pull-right">
<button type="button" class="btn btn-info dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-cogs"></span> <span class="sr-only">Toggle
Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
</ul>
</div>
</div>
<div class="panel-body chat-box-main">
<div class="chat-box-left">Hello, Welcome!. You can ask me
questions on Compliance Policy ..</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif"
alt="bootstrap Chat box user image" class="img-circle" /> - Bot
</div>
<hr class="hr-clas" />
<div class="chat-box-right" id="chatbox"></div>
<div class="chat-box-name-right">
<img src="smiley.jpg" alt="bootstrap Chat box user image"
class="img-circle" /> - You
</div>
</div>
<div class="chat-box-footer">
<div class="input-group">
<input type="text" class="form-control"
placeholder="Enter Text Here..." id="usermsg"> <span
class="input-group-btn">
<button class="btn btn-info" type="button" id="submitmsg">SEND</button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="chat-box-new-div">
<div class="chat-box-new-head">Frequently Asked Questions ..
</div>
<div class="panel-body chat-box-new">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br />
</div>
</div>
</div>
</div>
<!-- USING SCRIPTS BELOW TO REDUCE THE LOAD TIME -->
<!-- CORE JQUERY SCRIPTS FILE -->
<script src="assets/js/jquery-1.11.1.js"></script>
<!-- CORE BOOTSTRAP SCRIPTS FILE -->
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
To check if the function is actually called or not, I've added an alert inside of ("#submitmsg").click(function() {..., to my surprise, it is not alerting anything, that means that this is not getting called.
please let me know where am I going wrong and how can I fix this.
Thanks
Your problem is caused by timing that add click event listener.
Before document trigger ready event, DOM element is loaded not yet.
For this reason js(jquery selector) can not find "submitmsg" element for adding event listener
Check following link & code
https://jsfiddle.net/f6fv1xvw/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
// maybe alerted [length = 0] because dom element loaded not yet
alert("before ready : " + $("#submitmsg").length);
$(document).ready(function() {
// maybe alerted [length = 1] because dom element loaded completly
alert("after ready : " + $("#submitmsg").length);
// need to add event listener this timing(after ready)
$("#submitmsg").click(function() {
alert("Hi");
});
});
</script>
And then check again your source why load jquery 3 times.
// called 1 time in head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
// called 2 time before body
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
// called 3 time in body
<script src="assets/js/jquery-1.11.1.js"></script>
i am trying to develop bootstrap accordion and it works fine in jsfiddle
But when i tried in my web app its not working.I have attached the screenshot how it looks.As you can see in the screenshot there are no errors in the console.i am including following in my jsp page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
Even I had replaced <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> in place of <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> but no luck.Please tell me what else do i need?
Following is the full code
<%# page import="java.sql.*" %>
<%# page import="DB.*" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>send sms</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="tabbable" id="myTabs">
<ul class="nav nav-tabs">
<li class="active">Send Message</li>
<li>Users</li>
<li>Group Message</li>
<li>Sign Out</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="btn-group-vertical pull-right" data-toggle="buttons-radio">
<%
DataBaseConnection db=new DataBaseConnection();
Connection con=db.connet();
PreparedStatement pt=con.prepareStatement("select * from registerSmsUsers");
ResultSet rs=pt.executeQuery();int i=1;
while(rs.next())
{%>
<button type="button" class="btn btn-primary btn-block" id="<%=rs.getString("mobile")%>"><%=rs.getString("name")%></button>
<%i++;}
%></div>
<div class="container">
<div class="row">
<div class="span12">
<h3>Send SMS to Individual number</h3>
<form class="form-signin" action="#" method="post" onsubmit="return false;">
<div class="row">
<div class="span3">
Enter Number to send:
</div>
<div class="span3">
<!-- <input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+22" rel="popover"/> -->
<!--<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" data-delay='{"show":"10", "hide":"3000"}'/>-->
<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" />
</div>
<!--<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
Please enter 10 digit mobile number prefixed by country code eg +911234567890<hr />
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
Enter Message to send:
</div>
<div class="span3"> <div id="datetimepicker" class="input-append date">
<input style="display:none" type="text" name="body" maxlength="160" placeholder="Enter message to send" class=".dtext" id="body" data-trigger="hover"/>
<input type="text" id="txt" style="display:none"/>
<textarea rows="9" cols="50" class="darea1" id="darea"></textarea><span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
<!--<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
The text of the message you want to send, limited to 160 characters.
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
</div>
<div class="span9">
<button class="btn" type="submit" id="openAlert" >Send</button>
</div>
</div>
</form>
</div>
</div>
<div id="le-alert" class="alert alert-warn alert-block fade">
<button href="#" type="button" class="close">×</button>
<h4>Successful</h4>
<p>Message sent successfully</p>
</div>
</div>
</div>
<!-- 2nd tab strats -->
<div class="tab-pane" id="tab2">
<form class="well span9" action="insertNew" method="post">
<div class="row">
<div class="span3">
<label>Name</label>
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required>
</div>
<div class="span3">
<label>Email Address</label>
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required>
</div>
<div class="span3">
<label>Mobile</label>
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required >
</div>
</div>
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form>
<input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
<!-- accordion strats-->
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
records
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table> </div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
groups here </div>
</div>
</div>
</div>
<!-- accordion ends-->
<!--<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>-->
</div>
<!-- 2nd tab ends -->
<div class="tab-pane" id="tab3">
<p>para in section 3</p>
</div>
</div>
</div>
<script>
$(function() {
$("#datetimepicker").datetimepicker({
format: "'dd/MM/yyyy hh:mm:ss'",
linkField: "#txt",
linkFormat: "yyyy-mm-dd hh:ii",
autoclose: true,
});
jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){
$(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val());
});
});
</script>
<script>
$('#tabAll').click(function(){
$('#tabAll').addClass('active');
$('.tab-pane').each(function(i,t){
$('#myTabs li').removeClass('active');
$(this).addClass('active');
});
});
$('body').on('click', '.btn', function(){
if(this.id=='openAlert')
{$('#number').val('');}else{$('#number').val(this.id);}
});
</script>
<script >
$(document).ready(function(){
$("#signout").click(function() {
window.location.replace("logout.jsp");
});
//next line
var val=0;
$(document).ready(function(){
$('#btn1').click(function(){
if($(".span4").val()!="")
{
$("#mytable").append('<tr id="mytr'+val+'"></tr>');
$("#mytr"+val).append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked ></td>');
$(".span4").each(function () {
$("#mytr"+val).append("<td >"+$(this).val()+"</td>");
});
val++;
}
else
{
alert("please fill the form completely");
}
});
$('#btn2').click(function(){
var creat_group=confirm("Do you want to creat a group??");
if(val>1){
alert(creat_group);
}
});
});
//
$('#openAlert').click(function(){
var number = $('#number').val(); // If its a text input could use .text()
var msg = $('#darea').val(); //If its a text input could use .text()
alert(msg);
$.ajax(
{
type: "POST",
url: "messageSending.jsp", //Your full URL goes here
data: { toNumber: number, body: msg},
success: function(data, textStatus, jqXHR){
alert(data);
},
error: function(jqXHR){
alert(jqXHR.responseStatus);
}
});
});
});
</script>
<script>
$(function ()
{ $("#number").popover({title: 'Enter Mobile Number',content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"});
});
$(function ()
{ $("#body").popover({title: 'Message Body',content: "Maximum 160 characters allowed"});
});
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
</body>
</html>
Head
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js" type="text/javascript">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" type="text/css" rel="stylesheet">
HTML
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/fzN4K/15/
Jquery 1.9.1 : http://jsfiddle.net/fzN4K/16/
Is there a way to use this code:
Form<StatusSolicitacao> status = form(StatusSolicitacao.class).bindFromRequest();
But the data coming from a javascript?
--- More information ---
First i show the list:
<div id="backtabela">
<div id="tabela">
<table>
<tr><td>Cadastrar Status</td></tr>
<tr>
<td id="cabecalho">Descrição</td>
<td id="cabecalho">Acoes</td>
</tr>
#for(status <- lista){
<tr>
<td>#status.getDescricao()</td>
<td><img src="#routes.Assets.at("img/edit.png")" alt="" title="Editar"/>
<img src="#routes.Assets.at("img/erase.png")" alt="" title="Remover"/>
</td>
</tr>
}
</table>
</div>
</div>
Then i click on the Cadastrar Status to register a new data.
The form:
#(status: Form[StatusSolicitacao])
#import helper._
#implicitFieldConstructor = #{ FieldConstructor(formPattern.f) }
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<fieldset id="fieldset">
<legend>Novo Status</legend>
<div id="form">
<br/><br/><br/><br/><br/>
#form(routes.StatusController.cadastrarStatus()) {
<br/><br/><br/><br/><br/>
#inputText(status("descricao"), '_label -> "Descrição", '_help->"")
<div class="actions">
<input type="submit" value="Cadastrar" class="btn primary" id="botao">
</div>
</div>
</fieldset>
Cancelar
}
Note: All this content is inside the div nova in this html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Solicitação Compra</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("css/geral.css")">
<link rel="shortcut icon" type="img/png" href="#routes.Assets.at("img/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/init.js")" type="text/javascript"></script>
</head>
<body>
<div id="geral-flow">
<div id="topo">
<div id="logo" style="display:none;">
<img src="#routes.Assets.at("img/logotipo-pequeno.png")" alt="titulo" id="tituloPequeno"/>
</div>
<div id="acessos">
<div id="pesquisa">
<input type="text" name="search" id="search" value="Pesquisa"
onfocus="this.value=''" onblur="this.value='Pesquisa'"></input>
<ul></ul>
</div>
<div id="acessoRapido" >
</div>
</div>
</div>
<div id="conteudo">
<div id="titulo">
<ul>
<li style="background-position:-2px -107px;"><h2>Solicitações</h2></li>
</ul>
</div>
<div id="separador"></div>
<div id="menu">
<ul>
<li class="solicitacao">Solicitaçoes<br /></li>
<li class="departamento">Departamentos<br /></li>
<li class="responsavel">Responsavel<br /></li>
<li class="status">Status<br /></li>
</ul>
</div>
<div id="nova"></div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
but when I save my new record on the bench in the back that html does not appear.
javaScript or not basically its a post request if your name attributes coincide the StatusSolicitacao attributes i believe it will work
else just use the following String attribute = Form.form().bindFromRequest().get("attribute");