form submit error - javascript

<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="login-box.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<table>
<tr>
<td height="50px"></td>
</tr>
</table>
<fieldset id="searchFS" class="legend" style="display: block">
<legend>Search for Contact:</legend>
<table>
<tr>
<td width="55%"></td>
<td><input id="contactName" name="contactName" type="text"
width="20px" value=""></input></td>
<td><input type="submit" name="Submit" value="Search"
class="button" onclick="getcontact()" />
</td>
</tr>
</table>
</fieldset>
</center>
<p id="para"></p>
</body>
<script>
function getcontact(){
document.getElementById('para').innerHTML ="<table><tr><td>kkkkkkk</td></tr></table>";
}
</script>
</html>
WHen am pressing the button the value of the element appears than disappears while the page reloads! can anyone tell me how to fix this ?


Change "getContact()" to "getContact(); return false" to prevent the form from submitting.
A more ideal solution would be to bind to the click event:
document.querySelector('[name="Submit"]').addEventListener('click', function (e){
//prevent default behavior -- stop form from submitting
e.preventDefault();
document.getElementById('para').innerHTML ="<table><tr><td>k</td></tr></table>";
});

Related

Swaping body of one html template with another

So, in template allRates i have a button "show by Ask" and upon clicking it I want to trigger showRates() method in managementh.js which to my understanding will swap the body of wathever is within <div class="Allrate-container"> with body found under given url ("http://localhost:8090/AllRatesFiltered,) but it does not work, nothing happens when I click the button, no bugs or errors are shown in my IDE, no action in Network in devtool on front end is triggerd when the button is clicked, clicking the button does not trigger showRates() method.
How to swap portions of 2 html templates using .js but only when a specific button is clicked?
Bassicaly I want to upon clicking 'show' button swap the part of body (the one within <div AllRates-container>)template that is displayed under /RatesOfPeriod with part of template displayed under /AllRatesFiltered adres, what am I doing wrong, I'm new to .js and don't know what is wrong here, can someone help? Again, no errors are shown anywhere, not in my IDE not on the site in devtools (no action is shown in Network when clicking "show by Ask button", simply nothing happens )
managementh.js
function showRates(element){
$.get( "http://localhost:8090/AllRatesFiltered, function( result )
{
var resultBodyHtml = /<body.*?>([\s\S]*)<\/body>/.exec(result);
$(document).find(".Allrate-container").html(resultBodyHtml);
});
}
template AllRates
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>All Rates</title>
<link th:href="#{/static/css/bootstrap.min.css}" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<a>Rates from a given period of time: (not required, if you submit empty fields you will get actual rates) </a>
<form action="#" th:action="#{RatesOfPeriod}" th:object="${ratesOf}" method="POST">
<div th:if="${#fields.hasErrors('datesFrom')}" th:errors="*{datesFrom}">Invalid starting date</div>
<input type="text" th:field="*{datesFrom}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<div th:if="${#fields.hasErrors('datesTo')}" th:errors="*{datesTo}">Invalid end date</div>
<input type="text" th:field="*{datesTo}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2">Submit</button>
</form>
</div>
<br>
<thead>
<tr>
<td>
<a th:onclick="showRates()" class="btn btn-info">show by Ask</a>
</td>
</tr>
</thead>
<br>
<br>
<div class="Allrate-container">
<table class="table table-bordered">
<tr class="table-striped">
<th>Currency</th>
<th>Code</th>
<th>Bid</th>
<th>Ask</th>
</tr>
<th:block th:each="singleRate: ${allRates}">
<tr>
<td th:text="${singleRate.currency}"></td>
<td th:text="${singleRate.code}"></td>
<td th:text="${singleRate.bid}"></td>
<td th:text="${singleRate.ask}"></td>
</tr>
</th:block>
</table>
<a th:href="#{/}" class="btn btn-primary">Back to main site</a>
</div>
</body>
<script type="application/javascript" th:src="#{/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="#{/managementh.js}"></script>
</html>
template allRatesFiltered
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>All Rates</title>
<link th:href="#{/static/css/bootstrap.min.css}" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<a>Rates from a given period of time: (not required, if you submit empty fields you will get actual rates) </a>
<form action="#" th:action="#{RatesOfPeriod}" th:object="${ratesOf}" method="POST">
<div th:if="${#fields.hasErrors('datesFrom')}" th:errors="*{datesFrom}">Invalid starting date</div>
<input type="text" th:field="*{datesFrom}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<div th:if="${#fields.hasErrors('datesTo')}" th:errors="*{datesTo}">Invalid end date</div>
<input type="text" th:field="*{datesTo}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2">Submit</button>
</form>
</div>
<br>
<thead>
<td>
<a th:onclick="showRates()" class="btn btn-info">show by Ask</a>
</td>
</thead>
<br>
<br>
<div class="rate-container">
<table class="table table-bordered">
<tr class="table-striped">
<th>Code</th>
<th>Ask</th>
</tr>
<th:block th:each="singleRate: ${allRates}">
<tr>
<td th:text="${singleRate.code}"></td>
<td th:text="${singleRate.ask}"></td>
</tr>
</th:block>
</table>
<a th:href="#{/}" class="btn btn-primary">Back to main site</a>
</div>
</body>
<script type="text/javascript" th:src="#{/RateManagement.js}"></script>
<script type="text/javascript" th:src="#{/managementh.js}"></script>
</html>
controller
#PostMapping("RatesOfPeriod")
public String RatesOfPeriod(#ModelAttribute("ratesOf") #Valid DatesViewModel datesViewModel,
BindingResult bindingResult, Model model) {
if (!bindingResult.hasErrors()) {
String start = Objects.toString(datesViewModel.getDatesFrom(), "");
String end = Objects.toString(datesViewModel.getDatesTo(), "");
try {
currencyExchange_logic.getRatesOfDates(start, end);
model.addAttribute("allRates", Oldrates_interface.findAll());
Oldrates_interface.deleteAll();
} catch (IOException e) {
System.out.println(e.getMessage());
}
}
return "allRates";
}
#GetMapping("AllRatesFiltered")
public String allRatesFiltered(Model model) {
model.addAttribute("ratesOf", new DatesViewModel());
rates_interface.deleteAll();
model.addAttribute("allRates", rates_interface.findAll());
return "allRatesFiltered";
}

how can i import js file on my jsp file in springboot

i just load css and js on my jsp
but it just load css not js
this is my code
jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Static content -->
<link rel="stylesheet" href="/resources/css/style.css">
<script type="text/javascript" src="/resources/js/app.js"></script>
<title>Spring Boot</title>
</head>
<body>
<h1>Spring Boot - MVC web application example</h1>
<hr>
<div class="form">
<form action="hello" method="post" onsubmit="return validate()">
<table>
<tr>
<td>Enter Your name</td>
<td><input id="name" name="name"></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
app.properties
spring.mvc.view.prefix = /WEB-INF/views/
spring.mvc.view.suffix = .jsp
spring.mvc.static-path-pattern=/resources/**
tree
java
-*.java
resources
-css
--*.css
-js
--*.js
webapp
-WEB-INF
--view
---*.jsp

Open a Link with a variable that was provided by a HTML Form

I want to Create a Form, that when its Submitted opens a link with a Variable which is the Input from the Textfield of the Form.
Here is an example:
<form onsubmit=<a href="http://www.link.xx?123&456&input=$UserInput target"_blank">
<p><input type="text" name="name" value="UserInput"/></p>
<p><input type="submit" value="Verbinden" /></p>
I do not need a Solution to get this exact example to work.
All I want is:
The User Puts Something in The Form and presses the Submit Button.
With Pressing the Submit Button the Browser opens The Link i provide with the Input as a Part of the Link.
In real life it means i want to use a Teamspeak Join Link with the username which the user has provided in the Form.
This is the Link that has to be Modified at the end with the username
ts3server://serverip?port=11&password=123&nickname=!Input from the Form!
I hope there is a better Way than the way i use at the moment:
form.html =
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
</head>
<body>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="200" id="LayoutBereich5" style="background-attachment: fixed; border: 1px solid rgb(179,0,180); margin: 1px; height: 50px;" >
<tr align="center" valign="top">
<td>
<form action="startts3.php" method="post">
<p>Namen bitte anpassen:
<p><input type="text" name="name" value="InGameName|RealName"/></p>
<p><input type="submit" value="Verbinden" /></p>
</td>
</tr>
</table>
</center>
</body>
</html>
startts3.php =
<?php
$name = $_POST["name"];
header("Location: ts3server://serverip?port=11password=123&nickname=$name");
exit;
?>

You can try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p><input type="text" name="name" value="UserInput"/></p>
<p><input type="submit" value="Verbinden" /></p>
</form>
<script>
$("form").submit(function(event) {
event.preventDefault();
window.location.href = "ts3server://serverip?port=11&password=123&nickname=" + $("input[name=name]").val();
});
</script>
It doesn't actually submit the form: JavaScript takes over and opens it by itself.
EDIT As per request, I've included the JS alongside the HTML to show how it can be used.

If I got you right, I would do something like:
<form action="http://www.link.xx?123&456" method="GET" target"_blank">
<p><input type="text" name="name" value="UserInput"/></p>
<p><input type="submit" value="Verbinden" /></p>
</form>

You can use GET form method to this (if it's ok that your port and pass place in html)
What you should do is that place your parameters that need send in hidden inputs and set action = your target : ts3server://serverip
so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
</head>
<body>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="200" id="LayoutBereich5" style="background-attachment: fixed; border: 1px solid rgb(179,0,180); margin: 1px; height: 50px;" >
<tr align="center" valign="top">
<td>
<form action="ts3server://serverip" method="get">
<input type="hidden" name="port" value="11" />
<input type="hidden" name="password" value="123" />
<p>Namen bitte anpassen:
<p><input type="text" name="nickname" value="InGameName|RealName"/></p>
<p><input type="submit" value="Verbinden" /></p>
</form>
</td>
</tr>
</table>
</center>
</body>
</html>

Disable submit button until atleast one checkbox is checked

I have a foreach loop to generate checkboxes and I want to make sure that the submit button remains disabled until atleast one checkbox is checked by the user. But the button remains disabled even after a checkbox is checked.
:
Here's my jsp file
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="bootstrap.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$('#myform input:checkbox').change(function() {
var a = $('#myform input:checked').filter(":checked").length;
if (a == 0) {
$('.btn').prop('disabled', true);
} else {
$('.btn').prop('disabled', false);
}
});
</script>
<style type="text/css">
body {
background: #CCFFCC;
!
important;
}
/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<title>Resolve</title>
</head>
<body>
<h2>Hi There!</h2>
<h3>Browse through all unresolved issues and choose to resolve
some:</h3>
<div style="background-color: transparent; !important"
class="table-responsive">
<div class="btn-toolbar pull-right">
<div class='btn-group'>
<button class="btn btn-primary btn-lg">Back</button>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Issue Id</th>
<th>Description</th>
<th>Status</th>
<th>Resolved?</th>
</tr>
</thead>
<form:form class="form-horizontal" modelAttribute="ticketForm"
action="${pageContext.request.contextPath }/contact/resolveissue"
method="get" id="myform">
<c:if test="${not empty form}">
<c:forEach var="listValue" items="${form}">
<tr>
<td>${listValue.ticketId}</td>
<td>${listValue.description}</td>
<td>${listValue.status}</td>
<td>
<div class="col-lg-10">
<input type="checkbox" name="resolve"
value="${listValue.ticketId}" class="form-control">
<form:errors path="resolve"></form:errors>
</div>
</c:forEach>
</c:if>
<div class="btn-toolbar pull-right">
<div class='btn-group'>
<button type="submit" class="btn btn-primary btn-lg"
disabled="disabled">Resolve</button>
</div>
</div>
<!-- <button type="submit" class="btn btn-primary btn-lg center-block">Resolve</button>
-->
</form:form>
</table>
</div>
</body>
</html>

You have to put all your js/jquery into the ready method as follows :
<script type="text/javascript">
$(document).ready(function(){
$('#myform input:checkbox').change(function() {
var a = $('#myform input:checked').filter(":checked").length;
if (a == 0) {
$('.btn').prop('disabled', true);
} else {
$('.btn').prop('disabled', false);
}
});
});</script>

This should do the trick:
$(function(){
$("#myform").on("change", "input", function(){
status=($("#myform").find("input:checked").length==0)?"disabled":"";
$("button").prop("disabled", status);
})
})
Here is the Fiddle to play with.

Datepicker in twitterbootstrap 3 not working

I am not able to get the datepicker to work. this is a second page in the application and loads the header.jsp which has the navigation bar.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<jsp:include page="/WEB-INF/views/header.jsp" />
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="<c:url value="/resources/js/bootstrap-datepicker.js" />"></script>
<jsp:useBean id="patient" class="com.mycompany.model.Patient" scope="session"/>
<jsp:setProperty name="patient" property="*"/>
<form class="navbar-form pull-left" method="POST" action="/myapp/success">
<div><table>
<tr><td>Patient ID </td><td> <input name ="pid" type="text" class="form-control" style="width: 200px;" required></td></tr>
<tr><td>First Name </td><td><input name="first_name" type="text" class="form-control" style="width: 200px;"></td></tr>
<tr><td>Last Name </td><td><input name="last_name" type="text" class="form-control" style="width: 200px;"></td></tr>
<tr><td>Age </td><td><input name="age" type="text" class="form-control" style="width: 200px;"></td></tr>
<tr><td><button type="submit" class="btn btn-default">Save</button></td></tr>
</table></div>
</form>
<div>
<div class='well'>
<input type='text' class="form-control" id='datetimepicker6'/>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datepicker();
});
</script>
</div>
please tell me where i am going wrong... the jquery doesn't seem to be working for me

Categories

Resources