I am sending JSON to Play server from HTML page. but the server code is behaving in a strange way. Using debugger, I can see that the server first sends bad request response, then it processes my controller message and responds Ok.
In image 1, I send a request, the image has snapshot of JSON and I immediately get bad request response which is shown in image3. In image 2, the controller code gets executed (I assume after the server has sent bad request) and the server sends another 200 OK. The content type I am using in JQuery is text/json. If I use application/json, I get only bad request message and the controller code doesnt get executed at all
I suspect the problem is in Json.
#(form:Form[User2])
<!DOCTYPE html>
<html lang="en" xmlns:font-variant="http://www.w3.org/1999/xhtml">
<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>HTML Test</title>
<link rel="stylesheet" type="text/css" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<!--link rel="stylesheet" href="stylesheets/bootstrap-theme.min.css"-->
<style type="text/css">
html, body {
height:100%;
margin:0;padding:0
}
.center-form {
width:100%;
margin:auto;
position:relative;
top:50%;
transform: translateY(-50%)
}
</style>
<script src="#routes.Assets.at("javascripts/jquery-3.1.1.min.js")"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")"></script>
</head>
<body>
<div class="container center-form" >
<!-- for medium and large screens,
First row of Bootstrap grid contains logo. Total 3 columns (12/4). Logo in middle column-->
<div class="row" >
<!--empty column-->
<div class="col-md-4 col-lg-4" ></div>
<!--logo column-->
<!--div class="col-md-4 col-lg-4" >
<div>
<img src="#routes.Assets.at("images/SalesWorkspaceLogo303x64.png")" alt="SalesWorkspace Logo" height="64" width="303">
</div>
</div-->
<!--empty column-->
<div class="col-md-4 col-lg-4"></div>
</div>
<!-- for medium and large screens,
Second row of Bootstrap grid contains the form for username and password. Total 3 columns (12/4). -->
<div class="row" >
<!--empty column-->
<div class="col-md-4 col-lg-4"></div>
<!--form-->
<div class="col-md-4 col-lg-4">
<form id="registration-form" action="/newreg" method="post">
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" id="first-name" name="first-name" value="#form("name").value" required>
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" id="last-name" name="last-name" value="#form("name").value" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" value="#form("email").value" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm-password">Confirm password</label>
<input type="password" class="form-control" id="confirm-password" required>
</div>
<div class="form-group">
<label for="street-name">Street Name</label>
<input type="text" class="form-control" id="street-name" name="street-name" required>
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" name="country" required>
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
<!--empty column-->
<div class="col-md-4 col-lg-4"></div>
</div>
</div>
<script src="#routes.Assets.at("javascripts/myScripts.js")"></script>
</body>
</html>
Controller
def registrationRequest = Action (parse.json){ request =>
(request.body \ "first-name").asOpt[String].map {name =>
Ok("hello " + name)
}.getOrElse{
BadRequest("bad request")
}
}
}
myScripts.js
function objectifyForm(formArray) {//serialize data function
returnArray = {};
for (var i = 0; i < formArray.length; i++){
returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}
$(document).ready(function(){
// click on form submit
$('#registration-form').on('submit',function(e){
var details = JSON.stringify(objectifyForm($(this).serializeArray()));
console.log(details)
// send ajax
$.ajax({
url: '/newreg', // url where to submit the request
type : "POST", // type of action POST || GET
datatype : "json", // data type
/* this doesn't work*/
//contentType: "application/json; charset=utf-8",
/*this does*/
contentType: "text/json; charset=utf-8",
data : details,
success : function(result) {
// you can see the result from the console
// tab of the developer tools
console.log(result);
},
error: function(xhr, resp, text) {
console.log(xhr, resp, text);
}
})
});
});
You forget to cancel the original submit event, so you send form twice. One time as trivial HTML form, so play sends a bad request back. Another time by javascript as JSON, so play process it and sends back 200.
Just add one string to your JS function.
From :
$('#registration-form').on('submit',function(e){
To:
$('#registration-form').on('submit',function(e){
e.preventDefault(); //prevent form from default submitting
Related
I am using boostrap 5 floating label code snippet and with jquery validation but when error message is showing it is conflict with both labels.
see given screenshots:
My code is:
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="Name" name="name" required>
<label>Name</label>
</div>
I want like this for a bootstrap class add (is-invalid) while getting error and show a error message below input box with
<div class="invalid-feedback">
Please enter Name
</div>
How can I use this with jquery validation script with bootstrap floating label form.
Fixed this with simple script. I create a snippet in given below:
$(document).ready(function() {
$("#my_form").validate({
rules: {
name : {
required: true
}
},
messages : {
name: "Please enter Name"
},
errorElement: "div",
errorPlacement: function ( error, element ) {
error.addClass( "invalid-feedback" );
error.insertAfter( element );
},
highlight: function(element) {
$(element).removeClass('is-valid').addClass('is-invalid');
},
unhighlight: function(element) {
$(element).removeClass('is-invalid').addClass('is-valid');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col-6">
<form action="" id="my_form" method="post">
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="Name" name="name">
<label>Name</label>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary xp-submit-btn">Submit</button>
</div>
</form>
</div>
<div class="col"></div>
</div>
</div>
I have been trying to make HTML Code to to connect to google Sheet to paste data but my code is still appearing an error even while making it i do not know what is the reason someone can please look into this matter.
The problem is that Form window is not getting open to fill the form for submission of data in google sheets.
I would really appreciate the help.
Here is sheet attached link
https://docs.google.com/spreadsheets/d/1qFNb5NPuJBvgG7u3UxcNcf4h6hu2lkuabP7emLc7pwE/edit?usp=sharing
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script>
function AddRow()
{
var Invoice = document.getElementById("Invoice").value;
var InvoiceDate = document.getElementById("InvoiceDate").value;
var Code = document.getElementById("Code").value;
var Size = document.getElementById("Size").value;
var ProductName = document.getElementById("ProductName").value;
var Transaction = document.getElementById("Transaction").value;
var StockQty = document.getElementById("StockQty").value;
var MRP = document.getElementById("MRP").value;
if(InvoiceDate != '' && Code != '' && Size != '' && ProductName != '' && Transaction != '' && StockQty != '' && MRP != '')
{
google.script.run.AddRecord(InvoiceDate, Code, Size, ProductName, Transaction, StockQty, MRP);
document.getElementById("Invoice").value = '';
document.getElementById("InvoiceDate").value = '';
document.getElementById("Code").value = '';
document.getElementById("Size").value = '';
document.getElementById("ProductName").value = '';
document.getElementById("Transaction").value = '';
document.getElementById("StockQty").value = '';
document.getElementById("MRP").value = '';
document.getElementById("display_error").innerHTML = "";
}
else
{
document.getElementById("display_error").innerHTML = "Please Enter All Information!";
}
}
</script>
</head>
<body>
<div style="padding: 10px;" >
<form>
<div class="form-row">
<div class="form-group col-md-3">
<label for="Timestamp">Invoice</label>
<input type="text" id="Timestamp" class="form-control" />
</div>
<div class="form-group col-md-3">
<label for="Name">InvoiceDate</label>
<input type="text" id="Name" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="Shift">Code</label>
<input type="text" id="Shift" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="Product">Size</label>
<input type="text" id="Product" class="form-control" />
</div>
<div class="form-group col-md-3">
<label for="Batch">ProductName</label>
<input type="text" id="Batch" class="form-control" />
</div>
<div class="form-group col-md-3">
<label for="Machine" >Transaction</label>
<input type="text" id="Machine" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="MfgExp" >StockQty</label>
<input type="text" id="MfgExp" class="form-control "/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="Yield" >MRP</label>
<input type="text" id="Yield" class="form-control "/>
</div>
</div>
<div class="form-group col-md-3">
<input type="button" value="Submit" class="btn btn-primary" onclick="AddRow()" />
<div id="display_error" style="color: red" ></div>
</div>
</form>
</div>
</body>
</html>
I believe you are confusing labels with input element ids.
When you write var Invoice = document.getElementById("Invoice").value;, you are telling the script to find the element with id="Invoice" in your HTML.
As you can tell when you press the submit button the console will show the error: "Cannot get value property of null" which means it was not able to find an element with the id supplied to document.getElementById. <-- Read this docs before continuing.
Solution:
Change your HTML <input> elements' id attributes to correspond to the value that you are passing as id parameter to document.getElementById
Example:
From your HTML code I extracted the following lines, please see the comments:
<script>
var Invoice = document.getElementById("Invoice").value; // Here you are saying id="Invoice".
</script>
<div class="form-group col-md-3">
<label for="Timestamp">Invoice</label>
<input type="text" id="Timestamp" class="form-control" /> <!-- Here: id="Timestamp" -->
</div>
So that is why you are getting errors. Map the input id's correctly. But more importantly reading up on HTML and JavaScript would help a lot.
I am developing a system I have been asked to do but the form elements are not clickable to enter any info in the fields, I have tried moving the form tag to above the very first div in the code below in case it was the issue but did not work unfortunately. I am not sure what else to try, can someone have a look at the code below please
Update: I have got the form elements working by adding zindex: 9999; to .form-group class in the CSS but now the datetimepicker is appearing behind the select dropdown menu. I have uploaded a screenshot of the issue to the link below
Here is a screenshot of my issue:
My code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12" id="detail">
<form name="addData" id="addData" action="" method="post">
<div class="row">
<div class="form-group col-lg-3">
<input type="hidden" name="eventID" id="eventID" class="form-control">
<label for="StartDate">Start Date: </label>
<input type="date" class="form-control" required name="StartDate" id="StartDate" />
</div>
<div class="form-group col-lg-3">
<label for="StartTime" style="margin: 0 0 15px 0;">Start Time: </label>
<div class='input-group date' id='datetimepicker3'>
<input name="StartTime" id="StartTime" type='text' required class="form-control" />
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
<div class="form-group col-lg-3">
<label for="StartDate">End Date: </label>
<input type="date" required class="form-control" name="EndDate" id="EndDate" />
</div>
<div class="form-group col-lg-3">
<label for="EndTime" style="margin: 0 0 15px 0;">End Time: </label>
<div class='input-group date' id='datetimepicker4'>
<input name="EndTime" id="EndTime" required type='text' class="form-control" />
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
<div class="row">
<div class="form-group col-lg-3">
<label for="riders_name">Riders Name: </label>
<select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>
</div>
<div class="form-group col-lg-3">
<label for="horses_name">Horses Name : </label>
<select class="form-control" style="height: 34px;" required name="horses_name" id="horses_name">
<option value="">--Empty--</option>
</select>
</div>
<div class="form-group col-lg-3">
<label for="instructor_name">Instructor Name : </label>
<select class="form-control" style="height: 34px;" required name="instructor_name" id="instructor_name">
<option value="">--Empty--</option>
</select>
</div>
<div class="form-group col-lg-3">
<label for="groom_name">Groom Name : </label>
<select class="form-control" style="height: 34px;" required name="groom_name" id="groom_name">
<option value="">--Empty--</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="form-group col-lg-9">
<label for="comments">Comments : </label>
<textarea name="comments" id="comments" class="form-control"></textarea>
</div>
<div class="form-group col-lg-3">
<label for="Repeat">Repeat : </label>
<select class="form-control" style="height: 34px;" required name="Repeat" id="Repeat">
<option value="0">none</option>
<option value="1">Daily</option>
<option value="2">Weekly</option>
<option value="3">Monthly</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-lg-1">
<button type="submit" class="btn btn-primary" name="submit" id="submit">Submit</button>
</div>
<div class="form-group col-lg-1">
<button type="submit" class="btn btn-danger" name="cancel" id="cancel">Cancel</button>
</div>
<div class="form-group col-lg-5">
</div>
<div class="form-group col-lg-5">
</div>
</div>
</form>
</div>
<script>
$.getJSON("fullcalendar/getriders.php", function(data) {
var select = $('#riders_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
$.getJSON("fullcalendar/getinstructors.php", function(data) {
var select = $('#instructor_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
$.getJSON("fullcalendar/getgrooms.php", function(data) {
var select = $('#groom_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
</script>
I see several empty <select></select> tags in your form. I suspect you are intending text fields there? If so you need to replace <select></select> with <input type="text" />.
Example, this:
<label for="riders_name">Riders Name: </label>
<select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>
...should be:
<label for="riders_name">Riders Name: </label>
<input class="form-control" type="text" style="height: 34px;" required name="riders_name" id="riders_name" />
Select drop down always higher z-index set by default by browsers. You have two row one underneath other. You should in top row set higher z-index value with position: relative; then I hope it will work as expected.
Add CSS code with following way:
.higher-z-index {
postion: relative; // This line help z-index work relatively
z-index: 999;
}
Your markup will be something like that:
<div class="row higher-z-index">
.....
....
</div>
<div class="row">
.....
....
</div>
Why this approach:
You should keep it mind this is dose not matter how much z-index value applied in .form-group selector it will work for only sibling elements. But in your case it is going behind of next row elements because modern browsers set by default higher z-index in each next sibling elements until we set explicitly. So underneath row getting higher z-index than top row. So it is dose not matter how many higher z-index value are applied inside of top row container, all will go behind of next row container.
I have 2 separate forms in HTML and want to send them via a single button. How can I do that? When I try to make them into one form by removing the start and end in the middle, the div tags and CSS messes up. Here is my code.
<div class="contact-bottom">
<div class="col-md-6 contact-left">
<form>
<input type="text" placeholder="Name" required="">
<input type="text" placeholder="E-mail" required="">
<input type="text" placeholder="Phone" required="">
</form>
</div>
<div class="col-md-6 contact-left">
<form>
<textarea placeholder="Message"></textarea>
<input type="submit" value="SEND">
</form>
</div>
<div class="clearfix"> </div>
</div>
Use ajax to post values !
Exemple:
<script>
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
type: 'post',
url: "mail.php",
data: { "name" : $("#mail-name").val() ,"email" : $("#mail-email").val() },
success: function($response) {
alert($response);
}
});
});
});
I have created a JSP page using Spring Form tags and I'm trying to validate my form using AngularJS Form Validations. But form validations are not working.
Here's the snippet of the form:
<html ng-app>
<body>
<form:form name="signupForm" class="form-horizontal" action="/admin"
method="POST" modelAttribute="userVO" novalidate = "novalidate">
<div class="form-group" ng-class="{'has-error' : signupForm.username.$error.required && signupForm.username.$dirty}">
<label for="userName" class="col-sm-4 control-label" style="text-align:center;">Username<span class="rqrd">*</span></label>
<div class="col-sm-8">
<form:input path="userName" placeholder="UserName" class="form-control" ng-model="signupForm.username" required="required"/>
</div>
<span ng-show="signupForm.username.$error.required && !signupForm.username.$pristine" class="help-block">
Username is required
</span>
</div>
<div class="form-group" ng-class="{'has-error' : signupForm.password.$error.required && signupForm.password.$dirty}">
<label for="password" class="col-sm-4 control-label" style="text-align:center;">Password<span class="rqrd">*</span></label>
<div class="col-sm-8">
<form:password path="password" placeholder="Password" class="form-control" ng-model="signupForm.password" required="required"/>
</div>
<span ng-show="signupForm.password.$error.required && !signupForm.password.$pristine" class="help-block">
Password is required
</span>
</div>
</body>
</form:form>
</html>
I've included the Spring form tag library as :
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
and
angular.min.js and bootstrap using cdn's:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
According to this, when the username is not pristine (or it's dirty) and it's empty then, it should show the line mentioned within span tag. But it's not showing it and in addition to this if this is the case, it should add 'has-error' class to the div and that's also not happening when checked on developer tools in chrome and firefox.
I went through this link and used data-ng- instead of ng- but issue wasn't resolved.
I'm not sure what's the exact issue so I'm unable to fix it.
Any help will be appreciated. Thanks in anticipation.
You need to remove the action and use the ng-submit
<html ng-app>
<body>
<form:form name="signupForm" class="form-horizontal" ng-submit="submitForm" novalidate>
<div class="form-group" ng-class="{'has-error' : signupForm.username.$error.required && signupForm.username.$dirty}">
<label for="userName" class="col-sm-4 control-label" style="text-align:center;">Username<span class="rqrd">*</span></label>
<div class="col-sm-8">
<form:input path="userName" placeholder="UserName" class="form-control" ng-model="signupForm.username" required="required"/>
</div>
<span ng-show="signupForm.username.$error.required && !signupForm.username.$pristine" class="help-block">
Username is required
</span>
</div>
<div class="form-group" ng-class="{'has-error' : signupForm.password.$error.required && signupForm.password.$dirty}">
<label for="password" class="col-sm-4 control-label" style="text-align:center;">Password<span class="rqrd">*</span></label>
<div class="col-sm-8">
<form:password path="password" placeholder="Password" class="form-control" ng-model="signupForm.password" required="required"/>
</div>
<span ng-show="signupForm.password.$error.required && !signupForm.password.$pristine" class="help-block">
Password is required
</span>
</div>
</body>
</form:form>
</html>
Check out this fiddle
https://codepen.io/sevilayha/pen/xFcdI