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.
Related
My view:
<div class="col-md-3">
<div class="form-group">
<label>Employee Id</label>
<input type="text" class="form-control" placeholder="Enter employee id" name="empid">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Employee Name</label>
<input type="text" class="form-control" placeholder="Enter employee name" name="empname">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Order Number</label>
<input type="number" class="form-control" placeholder="Enter order number" name="ordernumber" value="<?php echo $order_number;?>">
</div></div>
<div class="col-md-3">
<div class="form-group">
<label></label>
<a onclick="myFunctionfirst()" class="form-control">Proceed to order Create</a>
</div></div>
Once you click on 'proceed to order create' the second row is created. I want this to happen only when the first 3 fields in first row are filled.
And this is my controller:
public function index()
{
$empid = $_POST['empid'];
If ($empid == ""){
$this->load->model('invoice_model');
$data['stat']= $this->invoice_model->get_stationary();
$data['order_numbers']= $this->invoice_model->get_countnumber();
$data['order_number']= $data['order_numbers'][0]->count+1;
$data['page']='invoice/invoice_view';
$this->load->view("template",$data);
}
}
And it's throwing an error undefined index empid
first of all take form tag and put all your fields inside it.
then add "action" and method = "POST" attribute in form tag.you got this errro because there is no form tag in your HTML file.
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 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
I have an issue where by I need a nicer-looking way to use select option that caters to Countries (240+ countries). I plan to use select2 to enhance the searching experience.
Now, a regular select-option with some values in it will just look like this
<select>
<option value=..></option>
<select>
But in the case of selecting Nationality, there are 240+ countries and suddenly a nice piece of code like this will look terrible.
<div class="form-group">
<label for="alias" class="col-sm-2 control-label">Alias</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="alias" placeholder="Employee alias">
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">DoB</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="dob" placeholder="Date of birth">
</div>
</div>
<! 240++ lines worth of options->
Any inputs?
You can use JQuery and Array() for this kind of things someway. Just put the countries you want to be shown in var countries which is array. But it will be easier to make .cvs file that has all the country names on the database and call them from it. Anyways this JQuery source might help for your question.
$(document).ready(function(){
var countries = new Array();
/* here you put all the countries you want in array */
countries = ["Korea", "USA", "China", "India", "etc"];
for(i = 0;i < countries.length;i++) {
$("#select2").append("<option value='"+countries[i]+"'>"+countries[i]+"</option>");
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>test</title>
</head>
<div class="form-group">
<label for="alias" class="col-sm-2 control-label">Alias</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="alias" placeholder="Employee alias">
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">DoB</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="dob" placeholder="Date of birth">
</div>
</div>
<!-- 240++ lines worth of options -->
<div class="form-group">
<label for="select2" class="col-sm-2 control-label">Select Country</label>
<div class="col-sm-10">
<!-- this is where countries enters -->
<select name="" id="select2">
</select>
</div>
</div>
</body>
</html>
Is it possible to implement mailto: function on submit button like <input type="submit" />? I use ASP.NET MVC. Maybe there is some tricky controller action result to achieve this. Could you please help me?
P.S. I know that I can make anchor looks like a button.
In HTML you can specify a mailto: address in the <form> element's [action] attribute.
<form action="mailto:youraddr#domain.tld" method="GET">
<input name="subject" type="text" />
<textarea name="body"></textarea>
<input type="submit" value="Send" />
</form>
What this will do is allow the user's email client to create an email prepopulated with the fields in the <form>.
What this will not do is send an email.
This seems to work fine:
<button onclick="location.href='mailto:em#i.l';">send mail</button>
What you need to do is use the onchange event listener in the form and change the href attribute of the send button according to the context of the mail:
<form id="form" onchange="mail(this)">
<label>Name</label>
<div class="row margin-bottom-20">
<div class="col-md-6 col-md-offset-0">
<input class="form-control" name="name" type="text">
</div>
</div>
<label>Email <span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-6 col-md-offset-0">
<input class="form-control" name="email" type="text">
</div>
</div>
<label>Date of visit/departure </label>
<div class="row margin-bottom-20">
<div class="col-md-3 col-md-offset-0">
<input class="form-control w8em" name="adate" type="text">
<script>
datePickerController.createDatePicker({
// Associate the text input to a DD/MM/YYYY date format
formElements: {
"adate": "%d/%m/%Y"
}
});
</script>
</div>
<div class="col-md-3 col-md-offset-0">
<input class="form-control" name="ddate" type="date">
</div>
</div>
<label>No. of people travelling with</label>
<div class="row margin-bottom-20">
<div class="col-md-3 col-md-offset-0">
<input class="form-control" placeholder="Adults" min=1 name="adult" type="number">
</div>
<div class="col-md-3 col-md-offset-0">
<input class="form-control" placeholder="Children" min=0 name="childeren" type="number">
</div>
</div>
<label>Cities you want to visit</label><br />
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Cassablanca">Cassablanca</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Fez">Fez</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Tangier">Tangier</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Marrakech">Marrakech</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Rabat">Rabat</label>
</div>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<textarea rows="4" placeholder="Activities Intersted in" name="activities" class="form-control"></textarea>
</div>
</div>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<textarea rows="6" class="form-control" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<p><a id="send" class="btn btn-primary">Create Message</a></p>
</form>
JavaScript
function mail(form) {
var name = form.name.value;
var city = "";
var adate = form.adate.value;
var ddate = form.ddate.value;
var activities = form.activities.value;
var adult = form.adult.value;
var child = form.childeren.value;
var comment = form.comment.value;
var warning = ""
for (i = 0; i < form.city.length; i++) {
if (form.city[i].checked)
city += " " + form.city[i].value;
}
var str = "mailto:abc#x.com?subject=travel to morocco&body=";
if (name.length > 0) {
str += "Hi my name is " + name + ", ";
} else {
warning += "Name is required"
}
if (city.length > 0) {
str += "I am Intersted in visiting the following citis: " + city + ", ";
}
if (activities.length > 0) {
str += "I am Intersted in following activities: " + activities + ". "
}
if (adate.length > 0) {
str += "I will be ariving on " + adate;
}
if (ddate.length > 0) {
str += " And departing on " + ddate;
}
if (adult.length > 0) {
if (adult == 1 && child == null) {
str += ". I will be travelling alone"
} else if (adult > 1) {
str += ".We will have a group of " + adult + " adults ";
}
if (child == null) {
str += ".";
} else if (child > 1) {
str += "along with " + child + " children.";
} else if (child == 1) {
str += "along with a child.";
}
}
if (comment.length > 0) {
str += "%0D%0A" + comment + "."
}
if (warning.length > 0) {
alert(warning)
} else {
str += "%0D%0ARegards,%0D%0A" + name;
document.getElementById('send').href = str;
}
}
Or you can create a form with action:mailto
<form action="mailto:rohit#k.com">
check this out.
http://webdesign.about.com/od/forms/a/aa072699mailto.htm
But this actually submits a form via email.Is this what you wanted?
You can also use just
<button onclick=""> and then some javascript with it to ahieve this.
And you can make a <a> look like button.
There can be a lot of ways to work this around. Do a little search.
Just include "a" tag in "button" tag.
<button></button>
The full list of possible fields in the html based email-creating form:
subject
cc
bcc
body
<form action="mailto:youraddr#domain.tld" method="GET">
<input name="subject" type="text" /></br>
<input name="cc" type="email" /><br />
<input name="bcc" type="email" /><br />
<textarea name="body"></textarea><br />
<input type="submit" value="Send" />
</form>
https://codepen.io/garfunkel61/pen/oYGNGp