Develop Reference

page redirect after success bootstrap validation without using php

Team,
I am trying to redirect after success form validation. If it is not success it has to be there in same page if it is success it has to redirect other page
I have added below line after was class validated code
$(location).attr('href', 'data.html');
it is redirecting to next page but I am not seeing any error message I am missing some valdiation.
Here is my entire code.
$(function () {
'use strict'
$('#data_input').on('submit', function (event) {
if (!event.target.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
$(this).addClass('was-validated')
$(location).attr('href', 'data.html');
return true;
});
$("#resetbtn").on("click", function (event) {
event.preventDefault();
$('#data_input')
.trigger("reset")
.removeClass('was-validated')
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<form class="requires-validation" id="data_input" method="post" novalidate>
<div class="form-group row">
<div class="col">
<label> Name</label> <input type="text" class="form-control" name="projectName" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="col">
<label>Code</label> <input type="text" class="form-control" name="projectCode" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<div class="form-group row">
<div class="col">
<label>Number</label> <input class="form-control" type="text" name="sprintNumber" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<div class="form-group row">
<div class="col"> <label>Start Date:</label> <input type="text" class="form-control has-feedback-left" id="fromdate" placeholder="Please Enter Start Date" name="fromdate" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="col"> <label>End Date:</label> <input type="text" class="form-control has-feedback-left" id="todate" placeholder="Please Enter End Date" name="todate" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<!--<div class="form-group row">
<div class="col">
<label>Total Days</label> <input type="text" class="form-control has-feedback-left"
name="numberdays" id="numberdays" disabled>
</div>
</div>-->
<br />
<button id="submit" type="submit" class="btn btn-primary">Next</button>
<button id="resetbtn" type="button" class="btn btn-secondary">Clear</button>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
Please let me know what I am doing wrong here

in your event submit. You use a validation if statement (checkvalidity).
$('#data_input').on('submit', function (event) {
**if (!event.target.checkValidity()) {**
event.preventDefault()
event.stopPropagation()
}
$(this).addClass('was-validated')
**$(location).attr('href', 'data.html');**
return true; ...
but whether it is valid or not you still perform the location redirect afterwards.
the redirect should be placed in a if instead you will always be redirected before any validation.

How to get URL parameters and pass it to an HTML output

I am making a code that requests course grades and sends them to a spreadsheet. I am familiar with Javascript; however, I am less familiar with HTML. Because not every person is taking the same courses or even the same number of courses, I wanted to send each student a custom url that contains the parameters of their name and what courses they are taking. That way the information could be populated into the HTML page and all the student would need to do is type in their grades for the corresponding courses. Then when submitted, it would send that information to a spreadsheet and handled accordingly. However, I am unsure of how I could pass parameters on to an HTML page. I am sure that it is simple but I dont know how to do it. If someone could provide some guidance it would be greatly appreciated. Below I have included the main HTML file that dictates the output. I am also including links to the other code. https://script.google.com/d/1c2XOZc5bmlnxT0ayWfYpJd4d6pKmZ8rgSiEZ-9NJ8CZIhvdjpEqSJ5X6/edit?usp=sharing
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">Input Grades Below</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class001" id = "class_01" hidden>Class1</label>
<input type="text" class="form-control" id="grade001" name="grade00" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class002" id = class_02 hidden>Class2</label>
<input type="text" class="form-control" id="grade002" name="grade002" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class003" id = "class_03" hidden>Class3</label>
<input type="text" class="form-control" id="grade003" name="grade003" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class004" id = class_04 hidden>Class4</label>
<input type="text" class="form-control" id="grade004" name="grade004" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class005" id = class_05 hidden>Class5</label>
<input type="text" class="form-control" id="grade005" name="grade005" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class006" id = class_06 hidden>Class6</label>
<input type="text" class="form-control" id="grade006" name="grade006" placeholder="Grade" hidden>
</div>
</div>
<script>
//Script to to implement to change class labels
</script>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>

You can use google.script.url.getLocation() to get the current URL parameters and hash.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script>
// URL = https://script.google.com/macros/s/SCRIPTKEY/exec?parameter=value#hash
google.script.url.getLocation(function(location) {
console.log(location.parameters); // {parameter: ["value"]}
console.log(location.hash); // "hash"
});
</script>
</body>
</html>

Toggle JavaScript function when entering rest webservices URL

I have two forms in the same page and one appears when clicking on the icon the login disappear and the signup appear. I am using spring mvc so I want when entering /register the function which toggle the forms work.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Login Form</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"
href="../static/css/reset.css"/>
<link rel='stylesheet prefetch'
href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'/>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
<!--<link rel="stylesheet" href="../static/css/style.css"/>-->
<link rel="stylesheet" th:href="#{/css/style.css}"
href="../static/css/style.css"/>
</head>
<body>
<!-- Mixins-->
<!-- Pen Title-->
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form action="login" th:action="#{/login}" th:object="${login}" method="post" >
<div class="input-container">
<input type="email" id="email" th:field="*{email}" required="required"/>
<label for="email">email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="login"><span>Go</span></button>
</div>
<div class="footer">Forgot your password?</div>
</form>
</div>
<div class="card alt">
<div class="toggle"></div>
<h1 class="title">Register
<div class="close"></div>
</h1>
<form action="register" th:action="#{/register}" th:object="${register}" method="post">
<div class="input-container">
<input type="text" id="firstName" th:field="*{firstName}" required="required"/>
<label for="firstName">First Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="text" id="lastName" th:field="*{lastName}" required="required"/>
<label for="lastName">Last Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="email" id="email_" th:field="*{email}" required="required"/>
<label for="email">Email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password_" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="register"><span>Next</span></button>
</div>
</form>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script th:src="#{/js/index.js}"></script>
</body>
</html>
JavaScript code :
$('.toggle').on('click', function() {
$('.container').stop().addClass('active');
});
$('.close').on('click', function() {
$('.container').stop().removeClass('active');
});
i want for example when entering /register it retrieve the register form instead of login

One way to do that is to create a /register controller that will return a parameter:
#RequestMapping("/register")
public ModelAndView register() {
ModelAndView mv = new ModelAndView("your_form_page")
mv.addObject("isRegister", true);
return mv;
}
Then you can add a hidden field and use it in the javascript to toggle the divs:
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- imports omitted -->
<script type="text/javascript">
$(document).ready(function () {
if ($("#isRegister").val()) {
$("#register").show();
$("#signUp").hide();
} else {
$("#register").hide();
$("#signUp").show();
}
});
</script>
</head>
<body>
<input id="isRegister" type="hidden" th:value="${isRegister}" disabled="disabled"/>
<div id="signUp">
Sign Up Form
</div>
<div id="register">
Register Form
</div>
</body>
</html>
Of course you can move the Javascript piece of code to your ".js" file. The important here is to have the hidden input field that will be accessible in the Javascript to toggle the DIVs.

1000hz bootstrap validator data-toggle="validator" not working

I am trying to use the following validator http://1000hz.github.io/bootstrap-validator/ to validate a below form I copied most of the elements from the documentation of the validator plugin and when I press the submit button it always passes with out error.I added "data-toggle="validator" and it says it should automatically validateit.and i also tried to use the script at the bottom. can some one please show me a sample how to use it.
<!DOCTYPE html>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.9.0/validator.min.js"></script>
<h1>Register Below! </h1>
<form data-toggle="validator" role="form" method="post" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="inputName" class="col-md-3 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputName" name="name" placeholder="Username" required />
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-md-3 control-label">Email</label>
<div class="col-md-6">
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" data-error="Incorrect email address" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-md-3 control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" name="password" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-md-3 control-label">Confirm Password</label>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="The password doesnt match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" name="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
<script >
(document).ready(function() {
$('#myForm').validator()
$('#myForm').submit(function (e) {
$('#myForm').validator('validate')
});
});
</script>
</body>
</html>

Couple of mistakes in your approach
No jQuery lib included (must be included above all other JS libraries)
bootstrap.min.js included twice (remove one)
missing $ before (document).ready(function() in script
missing id selector myForm in <form>
Rest nothing is wrong with the code
SideNote: validation can be done either with attribute data-toggle="validator" OR initialize on form via JS script $('#myForm').validator(), no need of both.
Fiddle with data-toggle="validator"
Fiddle with JS Script

Jquery post bootstrap form to dropwizard resource getting internal server error?

This is the html code I have written
<html>
<head>
<!-- Load jQuery and the validate plugin -->
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="datepicker.css">
<body>
<h1>&nbsp</h1>
<div class="container">
<div class="row">
<div class="col-sm-6">
<form id="addMaterial-form">
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="materialCode">Material Code</label>
<input type="text" class="form-control " id="materialCode" placeholder="Enter Material Code" name="materialCode"/>
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="job">Description</label>
<textarea class="form-control " rows="5" id="description" placeholder="Enter Something" name="description"></textarea>
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="purchaseDate">Date Of Purchase</label>
<input type="text" class="form-control " id="purchaseDate" placeholder="Date of Purchase" name="purchaseDate"/>
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="stock">Stock</label>
<input type="text" class="form-control " id="stock" placeholder="Enter Stock" name="stock"/>
</div>
</div>
<div class="col-sm-12">
<button type="submit" id="submitButton" class="col-sm-offset-6 col-sm-4 btn btn-default">Save</button>
<div class="col-sm-12">
<span class="label label-danger col-sm-offset-4 col-sm-4 " id="messageFromServer" ></span>
</div>
</div>
</form>
</div>
</div>
<script src="jquery-1.11.1.js"></script>
<script src="jquery.validate.js"></script>
<script src="datepicker.js"></script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('#purchaseDate').datepicker({
format: "dd/mm/yyyy",
todayHighlight:true,
autoclose:true,
endDate:'+0d'
});
});
$('#addMaterial-form').submit(function(event) {
event.preventDefault();
alert("gonna do");
$.post('/insertMaterial', {"materialCode": "78","stock": "78","description": "fhfhgf","purchaseDate": "09/05/2013"} );
event.preventDefault();
});
</script>
</body>
</html>
The issue is whenever I click on submit I get an internal server error.The server error can be removed by changing post function to
$.post('/insertMaterial', JSON.stringify({"materialCode": "78","stock": "78","description": "fhfhgf","purchaseDate": "09/05/2013"}) );
But at the server side I am unable to extract the form params using the above method I am getting only null values there.The server side is done in dropwizard framework
#POST
public String addNewMaterial(#FormParam("materialCode") String materialCode, #FormParam("description") String description, #FormParam("purchaseDate") Date date, #FormParam("stock") double stock) {
System.out.println("got " + materialCode + description + date + stock);
return "OK";
}