I did the tutorial from https://www.tutussfunny.com/registation-form-using-react-js-and-spring-boot/ but the whole frontend seems to be glitchy.
I am a backend dev and I am struggling with JS.
Calling the App.js from a html just doesn't work because of the imports causing
"Uncaught SyntaxError: Cannot use import statement outside a module". Also, the return of HTML in registration.js is causing syntax errors. Can someone who is fluent in JS can look at the code and tell me what should be fixed?
Current code:
registration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" type="text/css">
<!-- Momentum CSS -->
<link href="registration.css" rel="stylesheet">
</head>
<body>
<section>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="registration.js"></script>
</section>
<div className="register-container">
<form className="register-form" onSubmit={handleSubmit}>
<br></br>
<h1>Register</h1>
<p>Fill in the Information Below</p>
<input type="text"
name="id"
placeholder="id"
onChange="setId(event.target.value);"
/>
<input type="text"
name="firstname"
placeholder="Firstname"
onChange="setFname(event.target.value);"
/>
<input type="text"
name="lastname"
placeholder="lastname"
onChange="setLname(event.target.value);"
/>
<input type="text"
name="email"
placeholder="email"
onChange="setEmail(event.target.value);"
/>
<input type="text"
name="username"
placeholder="username"
onChange="setUsername(event.target.value);"
/>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
App.js
import Register from "registration";
import 'App.css';
import {BrowserRouter,Switch,Route} from 'react-router-dom';
function App() {
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route path="/" exact>
<Register/>
</Route>
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
Registration.js
function Register()
{
const [id, setId] = useState("");
const [firstname, setFname] = useState("");
const [lastname, setLname] = useState("");
const [email, setEmail] = useState("");
const [username, setUsername] = useState("");
async function handleSubmit(event)
{
event.preventDefault();
try
{
await axios.post("http://localhost:8080/save",
{
id: id,
fname: firstname,
lname : lastname,
email : email,
username : username,
});
alert("User Registration Successfully");
setId("");
setFname("");
setLname("");
setEmail("");
setUsername("");
}
catch(err)
{
alert("User Registation Failed");
}
}
}
Related
I tried to create POST request to send my form to the Spring server, but I'm only getting this error:
java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'form' available as request attribute
My controller content:
// Form post handler
#PostMapping("/")
public String home(#ModelAttribute Form form, BindingResult bindingResult, Model model) {
Gson g = new Gson();
Form form_new = g.fromJson(JavaWebApplication.runtimeJsonContent, Form.class);
model.addAttribute("form", form);
model.addAttribute("ip", form.IP);
model.addAttribute("gateway", form.Gateway);
model.addAttribute("port", form.Port);
model.addAttribute("IncomingConnections", form.IncomingConnections);
return "index";
}
Here is my Form model:
public class Form {
public String IP;
public String Gateway;
public int Port;
public boolean IncomingConnections;
public int QoSEnable = 0;
public Form(){}
public Form(String IP, String gateway, int port, boolean incomingConnections) {
this.IP = IP;
this.Gateway = gateway;
this.Port = port;
this.IncomingConnections = incomingConnections;
this.QoSEnable = 0; // Assert that 0 is default
ExportToJson(this);
}
public Form(String IP, String gateway, int port, boolean incomingConnections, int qosEnable) {
this.IP = IP;
this.Gateway = gateway;
this.Port = port;
this.IncomingConnections = incomingConnections;
this.QoSEnable = qosEnable;
ExportToJson(this);
}
}
And my index.html webpage bound on / :
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" th:href="#{./styles/main.css}">
<title>Document</title>
</head>
<body>
<form method="post" action="#" th:action="#{/}" th:object="${form}">
<div id="container">
<img src="https://kable-swiatlowodowe.net.pl/wp-content/uploads/2017/08/mikrotik.png" width="20%" style="margin-bottom: 5%;">
<br>
<div id="input-el">
<div class="input-element"><input type="text" placeholder="IP" name="IP" th:value="${ip}" th:field="*{IP}" id="input-element-ip"></div>
<div class="input-element"><input type="text" placeholder="Gateway" th:value="${gateway}" th:field="*{Gateway}" name="Gateway" id="input-element-gateway"></div>
<div class="input-element"><input type="number" placeholder="Port" th:value="${port}" th:field="*{Port}" name="Port" id="input-element-port"></div>
</div>
<div id="checkbox-el">
Incoming connections:<br>
<label><input type="checkbox" th:checked="${IncomingConnections}" th:field="*{IncomingConnections}" name="conections" id="conections-el">Allow</label>
</div>
QoS Mode<br>
<label><input type="radio" name="qos-mode-el" id="input-radio-game-first" checked>Game First</label>
<label><input type="radio" name="qos-mode-el" id="input-radio-multimedia-first">Multimedia First</label>
<button type="submit">Save</button>
</div>
</form>
</body>
</html>
Sample Postman request:
Response for this request:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/main.css">
<title>Document</title>
</head>
<body>
<form method="post">
<div id="container">
<img src="https://kable-swiatlowodowe.net.pl/wp-content/uploads/2017/08/mikrotik.png" width="20%" style="margin-bottom: 5%;">
<br>
<div id="input-el">
<div class="input-element">
<input type="text" placeholder="IP" name="IP" value="" id="input-element-ip"></div>
<div class="input-element">
<input type="text" placeholder="Gateway" value=""name="Gateway" id="input-element-gateway"></div>
<div class="input-element">
<input type="number" placeholder="Port" value="0" name="Port" id="input-element-port"></div>
</div>
<div id="checkbox-el">
Incoming connections:<br>
<label><input type="checkbox" name="conections" id="conections-el">Allow</label>
</div>
QoS Mode<br>
<label><input type="radio" name="qos-mode-el" id="input-radio-game-first" checked>Game First</label>
<label><input type="radio" name="qos-mode-el" id="input-radio-multimedia-first">Multimedia First</label>
<button type="submit">Save</button>
</div>
</form>
</body>
</html>
Each value content is clear
Any idea how to make this binding work correctly?
you are not passing the form object to your thymeleaf template
Do this -
#GETMapping("/")
public String getHome(Model model){
model.addAttribute("form", new Form());
return "index";
}
This will return a Form object to your thymleaf and then it can process the data in your code --
<form method="post" action="#" th:action="#{/}" th:object="${form}">
// This will now receive form object
</form>
I am using Spring Boot/Thymeleaf to create a form that accepts an email address, redirects to a results page that displays the accepted email and sends it to a third party API (authenticated with Oauth2). I am having trouble with the form portion, I am attempting to use Thymeleaf to accept the input to display it on the result.html page. I am receiving an error when trying to display it on the results page, full error is:
[THYMELEAF][http-nio-8080-exec-4] Exception processing template "result.html": Exception evaluating SpringEL expression: "signup.email" (template: "result.html" - line 10, col 4)
I was attempting to follow the examples provided here:
https://spring.io/guides/gs/handling-form-submission/
I have attempted to modify the controller from #PostMapping and #GetMapping to #RequestMapping and add commenting described in a workaround such as:
<!--/*#thymesVar id="signup" type="com.mainconfig.controller1"*/-->
Here is the signup.html code containing the form:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<title>My Jmml</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="background-color: #2B2B2B">
<br /><br />
<h2 style="text-align:center">Contact Information</h2>
<!-- Input Form -->
<!--/*#thymesVar id="signup" type="com.mainconfig.controller1"*/-->
<form action="#" th:action="#{/signup}" th:object="${signup}" method="post">
<div align="center">
<label>Email Address</label><br /><br />
<!--/*#thymesVar id="email" type="String"*/-->
<input type="text" th:field="*{email}" placeholder="Email" required />
<br />
<br />
<input class="submitbutton" type='submit' value='Submit'/>
<br />
</div>
</form>
</body>
</html>
Results page that should display the email (result.html):
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thank you for your submission!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Thank you for your submission!</h1>
<p th:text="'Email: ' + ${signup.email}" />
Submit another message
</body>
</html>
Controller:
#Controller
public class controller1 {
#RequestMapping (value = "/home")
public String home(Model model) {
return "index.html";
}
#RequestMapping(value = "/signup", method= RequestMethod.GET)
public String signupForm(Model model) {
model.addAttribute("signup", new emailInput());
return "signup.html";
}
#RequestMapping(value = "/signup", method= RequestMethod.POST)
public String signupSubmit(#ModelAttribute("email") emailInput email) {
return "result.html";
}
}
Expected output should be the email variable displayed on the results page after it being gathered in the signup form.
If you have a recommendation on how to better do what I am attempting, I am open to suggestions! I am very new to Spring/Thymeleaf but have had experience with Java/Jsp. Thank you for any help, please let me know if you need anything else to help!
Hopefully this will be a starting point for you.
Make sure you place the html files under /resources/templates.
I changed a bit your signup html and result.html as follows, they are still not perfect(avoid using inline styles and use an external stylesheet!):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>My Jmml</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="background-color: #2B2B2B">
<br /><br />
<h2 style="text-align:center">Contact Information</h2>
<!-- Input Form -->
<!--/*#thymesVar id="signup" type="com.mainconfig.controller1"*/-->
<form th:action="#{/signup}" th:object="${signup}" method="post">
<div align="center">
<label>Email Address</label><br /><br />
<!--/*#thymesVar id="email" type="String"*/-->
<input type="text" th:field="*{email}" placeholder="Email" />
<br />
<br />
<input class="submitbutton" type="submit" value="Submit"/>
<br />
</div>
</form>
</body>
and the result.html looks like this
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Thank you for your submission!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Thank you for your submission!</h1>
<p th:text="'Email: ' + ${email}" />
Submit another message
</body>
</html>
I also created a form object, add additional fields here if you want
public class SignUpForm {
//you can put some annotations here if you want for validating the email
//for e.g #NotEmpty or a #Pattern(regexp to validate the email)
private String email;
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
and in the end your Controller. I pass the email from the signup post request to the result.html via a flash attribute:
#Controller
public class Controller1 {
#RequestMapping(value = "/signup", method= RequestMethod.GET)
public String signupForm(#ModelAttribute("signup") SignUpForm form) {
return "/signup";
}
#RequestMapping(value = "/signup", method= RequestMethod.POST)
public String signupSubmit(#ModelAttribute("signup") SignUpForm form, RedirectAttributes redirectAttributes) {
//validate form first -> check bindingResult documentation
//do what you need with your form object
redirectAttributes.addFlashAttribute("email", form.getEmail());
return "redirect:/result";
}
#RequestMapping(value = "/result", method= RequestMethod.GET)
public String result() {
return "/result";
}
}
I am new with thymeleaf and I am having a doubt about how to retrieve a field from html (using Thymeleaf) to Java (Spring Boot). Follow the code and the error that I am having:
HTML (part with issue)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>Entity Migration</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet"
media="screen,projection" />
<link href="css/materialize.css" type="text/css" rel="stylesheet"
media="screen,projection" />
</head>
<body>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Entity
Migration</a>
<ul class="right hide-on-med-and-down">
<li>Logout</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Entity Migration</li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i
class="material-icons">Logout</i></a>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br> <br>
<div class="row center">
<h5 class="header col s12 light">Fill the form below to
generate your XML:</h5>
</div>
<br> <br>
</div>
</div>
<form class="col s12" action="#" th:action="#{/prepareData}" th:object="${entity}" method="post">
<div class="row">
<div class="input-field col s4">
<input type="number" id="release" name="release" placeholder="Release"
class="validate" th:value="*{release}"/>
</div>
<div class="input-field col s4">
<input placeholder="Version" id="version" name="version" type="number"
class="validate" th:value="*{version}"/>
</div>
</div>
<input type="submit" value="Generate XML" id="generate"
class="btn-large waves-effect waves-light orange" />
</div>
</form>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/init.js"></script>
<script src="js/materialize.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
Java (Spring Boot Controller)
#PostMapping(value = "/prepareData")
public String prepareData(#ModelAttribute(value="entity") EntityMigration entity) {
TemplatePrepare tP = new TemplatePrepare();
tP.prepareMainTemplate(entity);
return "results";
EntityMigration (Java Model)
public class EntityMigration {
private String release;
private String version;
public String getRelease() {
return release;
}
public void setRelease(String release) {
this.release = release;
}
public String getVersion() {
return version;
}
public void setVersion(String version) {
this.version = version;
}
}
Error
2017-11-16 14:01:02.445 ERROR 26932 --- [nio-8080-exec-1] org.thymeleaf.TemplateEngine : [THYMELEAF][http-nio-8080-exec-1] Exception processing template "mainForm": An error happened during template parsing (template: "class path resource [templates/mainForm.html]")
org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/mainForm.html]")
(...)
Caused by: org.attoparser.ParseException: Exception evaluating SpringEL expression: "release" (template: "mainForm" - line 55, col 23)
(...)
org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'release' cannot be found on null
(...)
What am I doing wrong?
Thank you.
Parsing html exception was caused by forgetting to close input tags. Please replace:
<input type="number" id="release" placeholder="Release" class="validate" th:value="*{release}">
<input placeholder="Version" id="version" type="number" class="validate">
with:
<input type="number" id="release" placeholder="Release" class="validate" th:value="*{release}"/>
<input placeholder="Version" id="version" type="number" class="validate"/>
Latter error:
org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'release' cannot be found on null
is caused by trying to access 'release' on 'entity' -> entity is null so Thymeleaf can't render it.
You must addAttribute 'entity' to model in order to render it.
In order to avoid SpelEvaluationException you can check for null in controller:
if (entityManager!= null) {
model.addAttribute("entity", entityManager);
} else {
model.addAttribute("entity", new EntityManager());
}
you forgot to use the name attribute in the input, and to close you input, so replace:
<input placeholder="Version" id="version" type="number" class="validate">
<input type="number" id="release" placeholder="Release" class="validate" th:value="*{release}">
with:
<input placeholder="Version" id="version" name="version" type="number" class="validate" />
<input type="number" id="release" name="release" placeholder="Release" class="validate" th:value="*{release}" />
or you can use the
I gave a link to forgotpassword.jsp on my index.html page but after sometime i decided to change it so i created a new html file forgotpassword.html the body is similar in both the files but image is shown in forgotpassword.jsp but not in forgotpassword.html . forgotpassword.jsp further goes to pass.jsp and i did the same thing for it also and created pass.html for it, same thing is happening in it pass.jsp is showing image but pass.html is not. Could someone tell me why this is happening ?
and please check the filter if there is something missing or wrong with it.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
header {
background-color:lightsteelblue;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:600px;
float:right;
padding:220px;
}
footer {
background-color:black;
color:white;
clear:both;
float:bottom;
text-align:center;
padding:5px;
}
</style>
</head>
<body style="background-color: lightsteelblue">
<header>
<canvas id="myCanvas" width="500" height="100" style="border:2px solid black; background-color:burlywood ">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "45px Arial";
ctx.strokeText("File Tracking System", 50, 50);
</script>
</header>
Forgot Your Password
<section>
<form action="LoginServlet" method="post">
Username: <input type="text" name="user"/>
<br />
Password: <input type="password" name="pwd"/>
<br />
<input type="submit" value="Login"/>
</form>
<img src="css/NSIC-logo1.png" width="537" height="267" alt="NSIC-logo1"/>
</section>
<footer>Copyright 2016 NSIC. All right reserved.</footer>
</body>
</html>
forgotpass.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Forgot Password Page</title>
<style>
header {
background-color:teal;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
height:300px;
width:120px;
float:left;
padding:5px;
}
section {
width:800px;
float:right;
padding:130px;
}
footer {
background-color:black;
float:bottom;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body style="background-color:lightsteelblue;">
<header><h3>File Tracking System!!</h3>
<br>
</header>
<nav>
<form action="forgotServlet" method="POST" >
User Name:<input type="text" name="name" value="" size="20" />
Email:<input type="text" name="email" value="" size="20" />
New Password:<input type="text" name="pass1" value="" size="20" />
Repeat Password:<input type="text" name="pass2" value="" size="20" />
<input type="submit" value="submit" name="submit" />
</form>
</nav>
<section><img src="css/NSIC-logo1.png" width="537" height="267" alt="NSIC-logo1"/></section>
<footer>
Copyright 2016 NSIC. All right reserved.
</footer>
</body></html>
forgotpass.html
<!DOCTYPE html>
<html>
<head>
<title>Forgot Password Page</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
header {
background-color:teal;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
height:300px;
width:120px;
float:left;
padding:5px;
}
section {
width:800px;
float:right;
padding:130px;
}
footer {
background-color:black;
float:bottom;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body style="background-color:lightsteelblue;">
<header><h3>File Tracking System!!</h3>
<br>
</header>
<nav>
<form action="forgotServlet" method="POST" >
User Name:<input type="text" name="name" value="" size="20" />
Email:<input type="text" name="email" value="" size="20" />
New Password:<input type="text" name="pass1" value="" size="20" />
Repeat Password:<input type="text" name="pass2" value="" size="20" />
<input type="submit" value="submit" name="submit" />
</form>
</nav>
<section><img src="css/NSIC-logo1.png" width="537" height="267" alt="NSIC-logo1"/></section>
<footer>
Copyright 2016 NSIC. All right reserved.
</footer>
</body></html>
This is my AuthenticationFilter-
package bean;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class AuthenticationFilter implements Filter {
private ServletContext context;
#Override
public void init(FilterConfig fConfig) throws ServletException {
this.context = fConfig.getServletContext();
this.context.log("AuthenticationFilter initialized");
}
#Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) request;
HttpServletResponse res = (HttpServletResponse) response;
res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
res.setHeader("Pragma", "no-cache"); // HTTP 1.0.
res.setDateHeader("Expires", 0); // Proxies.
String uri = req.getRequestURI();
this.context.log("Requested Resource::" + uri);
HttpSession session = req.getSession(false);
if (session == null && !(uri.endsWith("html") || uri.endsWith("LoginServlet") || uri.endsWith("forgotpass.jsp") || uri.endsWith("doesnotexist.jsp") || uri.endsWith("pass.jsp"))) {
this.context.log("Unauthorized access request");
res.sendRedirect("index.html");
} else {
// pass the request along the filter chain
chain.doFilter(request, response);
}
}
#Override
public void destroy() {
//close any resources here
}
}
Edit: chat-conversation-with-rahul The problem is real. I was unable to solve it.
There is a problem with File Structure of your HTML and JSP Files. As #aksappy commented, check in developer tools(CTRL+SHIFT+I for chrome) for console errors. Also, check the src attribute of your <img> tag on both html and jsp file from developer tools.
Your code is working perfectly.
Proof
JSP IMAGE
HTML IMAGE
Im trying to write information to a database just using jsp pages but I keep running into this error;
information storage was unsuccessful java.sql.SQLException: Must specify port after ':' in connection string
This is the code that I have;
<%#page import="java.sql.*" %>
<%#page import="java.util.Date" %>
<% Class.forName("com.mysql.jdbc.Driver"); %>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Player Register</title>
<link rel='stylesheet' href= 'styles.css'>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2 align="center"> Register</h2>
<form class="my_form" action="playerDisplay.jsp" method="POST">
<fieldset>
<legend>Please Enter Your Details</legend>
<h1 class="h1a">New Player</h1>
<p>
<label class="labela" for="login">Name:</label>
<input type="text" name="Name" id="Name" value="Name"required>
</p>
<p>
<label class="labela" for="login">Surname:</label>
<input type="text" name="Surname" id="Surname" value="Surname"required>
</p>
<p>
<label class="labela" for="login">PPS Number:</label>
<input type="text" name="PPS_Number" id="PPS_Number" value="PPS_Number"required>
</p>
<p>
<label class="labela" for="login">Grade:</label>
<input type="text" name="Grade" id="Grade" value="Grade"required>
</p>
<p>
<label class="labela" for="login">Email:</label>
<input type="text" name="Email" id="Email" value="Email"required>
</p>
<p>
<label class="labela" for="password">Password:</label>
<input type="password" name="password" id="Password" value="123456"required>
</p>
<p>
<input type="checkbox" name="mailingList" value="yes">Yes, add me to your mailing list<br>
</p>
<div style="text-align: center">
<input type="submit" name="submit">
<input type="reset" name="reset">
</div>
</fieldset>
</form>
</body>
</html>
<%#page import="java.sql.DriverManager"%>
<%#page import="java.sql.Connection"%>
<%#page import="java.sql.PreparedStatement"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link href="CSS/styles.css" rel="stylesheet" type="text/css"/>
<script src="js/libs/jquery/jquery.js"></script>
<style>
table, td, th {
border: 1px solid black;
}
td {
padding: 15px;
}
#optionalFieldset {
display: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Space</title>
<link rel='stylesheet' href= 'styles.css'>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
$(document).ready(function () {
$("#optionalCheck").click(function () {
$("#optionalFieldset").slideToggle("slow");
});
});
</script>
</head>
<body>
<fieldset>
<legend>Your Info</legend>
<%
String Name=request.getParameter("Name");
String Surname=request.getParameter("Surname");
String PPS_Number=request.getParameter("PPS_Number");
String Grade=request.getParameter("Grade");
String Email=request.getParameter("Email");
String Password=request.getParameter("Password");
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection conn=DriverManager.getConnection("jdbc:mysql://http://danu6.it.nuigalway.ie:3306/mydb1899/players", "mydb1899a", "mydb1899a");
PreparedStatement ps = conn.prepareStatement("INSERT INTO players(Name,Surname,PPS_Number,Grade,Email,Password) VALUES(?,?,?,?,?,?)");
ps.setString(1,Name);
ps.setString(2,Surname);
ps.setString(3,PPS_Number);
ps.setString(4,Grade);
ps.setString(5,Email);
ps.setString(6,Password);
ps.executeUpdate();
out.println("Your information was successfully stored in our database");
conn.close();
ps.close();
}
catch(Exception e) {
out.println("information storage was unsuccessful " + e);
}
%>
</fieldset>
Home
</body>
</html>
Is there any way that I can do it this way and if so is there a solution to the error I have?
I think you do not want the http:// in there, for a proper URL you would want either MySQL:// -OR- http:// not both.
I am guessing your proper string is going to be :
jdbc:mysql://danu6.it.nuigalway.ie:3306/mydb1899/players
jdbc:sqlserver://[serverName[\instanceName][:portNumber]][;property=value[;property=value]]
That is the format for connection URLs. Does yours work with that?