Hi guys I am having trouble getting value from the calendar picker.
I want to chose a date from the calendar (with id Date_of_Birth) and assign the date say 12/11/2013 to the textbox txtDate.
How do I do this? My code is as follows
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form name="myForm" action="displayDate.html" method="post">
Date of Birth: < script type="text/javascript" src="http://www.snaphost.com/jquery/Calendar.aspx?dateFormat=dd/mm/yy" name="Date_of_Birth" id="Date_of_Birth"></script><br>
<input type="text" id="txtDate" name="txtDate"
<input type="submit" value="Submit">
</form>
</body>
</html>
The first problem is you did not include "http://www.snaphost.com/jquery/Calendar.aspx?dateFormat=dd/mm/yy" correctly. This script creates a calendar and does not work the way you want it to. From the code I could see this library uses jQueryUI.
Instead of using the aspx url, include the jQueryUI library separately:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<form name="myForm" action="displayDate.html" method="post">
Date of Birth: <input type="text" id="txtDate" name="txtDate"/>
<input type="submit" value="Submit"/>
</form>
To bind a datepicker to the txtDate use:
$(function() {
$( "#txtDate" ).datepicker();
});
See the working example: http://jsfiddle.net/2zdgz/
Related
I am currently using the HTML 5 Datetime-local input to get my date and time data which then gets replicated into another input field however when it gets replicated it formats the date and time differently. How am I able to format the date/time before it gets added into the input field?
Datetime-local picker:
Input field:
HTML:
<input id="dt" class="input" type="datetime-local">
jQuery:
$(document).ready(function () {
$('#dt').on('change', function () {
$('#datetime').val($(this).val())
})
})
TIA
You can easily edit the value of your date time local using JavaScript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<label for="datetime">datetime</label>
<input type="text" name="datetime" id="datetime" value="" />
<input id="dt" class="input" type="datetime-local" onchange="dateTimeFormat()">
<script type="text/javascript" charset="utf-8">
function dateTimeFormat(){
let unformattedDT = dt.value;
let processingDate = unformattedDT.replace(/-/g,"/");
console.log(processingDate);
let list=processingDate.split("T");
datetime.value =`${list[0]} , ${list[1]}`;
}
</script>
</body>
</html>
I'm trying to create a html pop up that will then populate a gsheet. I've basically used the same solution found here. For some strange reason though, it isn't working. When I click the submit button on the HTML pop up box after filling out all the data, it doesn't respond. I click, it doesn't close, append the data, or do anything.
The html pop up is created, but the Submit button doesn't work. I am almost sure that it is has something to do with the onClick method I am using.
Here is the code I am working with:
gs file
function registerCustomer() {
var html = HtmlService.createHtmlOutputFromFile('customerMenu.html').setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add Customer');
}
function customerAdd(customerForm) {
var ss = SpreadsheetApp.getActiveSpreadsheet;
var cus_db = ss.getSheetByName("customer_db");
cus_db.appendRow([" ", customerForm.name_1, customerForm.name_2, customerForm.phone, customerForm.age, customerForm.channel]);
return true;
}
html file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<br>
<customerForm>
First Name:<br>
<input type="text" name="name_1">
<br>
Second Name:<br>
<input type="text" name="name_2">
<br>
Phone Number:<br>
<input type="text" name="phone">
<br>
Age:<br>
<input type="number" name="age">
<br>
How did they hear about us?:<br>
<input type="text" name="channel">
<br><br>
<input type="submit" value="Add Customer" class ="submit"
onclick="google.script.run
.withSuccessHandler(google.script.host.close)
.customerAdd(this.parentNode)" />
</customerForm>
</html>
I've scoured stackoverflow for almost every solution:
I am running two pop ups so I changed the function names based on the advice here
I tried to use the '''document.forms[0]''' method found here also didn't work
What am I missing?
onClick on Google Script working for HTML Form
GS:
function registerCustomer() {
var html = HtmlService.createHtmlOutputFromFile('ah2')
SpreadsheetApp.getUi().showModelessDialog(html, 'Add Customer');
}
function customerAdd(obj) {
var ss = SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet15');
sh.appendRow(["", obj.name_1, obj.name_2, obj.phone, obj.age, obj.channel]);
return true;
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form>
First Name:<br>
<input type="text" name="name_1" />
<br>
Second Name:<br>
<input type="text" name="name_2"/>
<br>
Phone Number:<br>
<input type="text" name="phone"/>
<br>
Age:<br>
<input type="number" name="age"/>
<br>
How did they hear about us?:<br>
<input type="text" name="channel"/>
<br><br>
<input type="button" value="Add Customer" onClick="addCust(this.parentNode);" />
</form>
<script>
function addCust(obj) {
google.script.run
.withSuccessHandler(function(){google.script.host.close();})
.customerAdd(obj);
}
</script>
</body>
</html>
Something is keeping me from setting a path variable with Thymeleaf and HTML in an HTML Form.
I want to simply enter 33 into a form and get localhost:8080/blog/33 for a url, but I can only get a query string or malformed brackets and etc.
some example attempts and results:
th:action="#{/blog/{id}(id = ${id})}"
localhost:8080/blog/?id=33
th:action="#{/blog/+ ${id}}"
localhost:8080/blog/+%20$%7Bid%7D?id=33
what I want is:
localhost:8080/blog/33
the whole code for this form is below:
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Form Submission</title>
<style>
button{
margin-top:20px;
width: 250px;
}
</style>
</head>
<body>
<h2>Delete Entry</h2>
<form action="#" th:action="#{/blog/{id}(id = ${id})}" th:object="${blog}" method="get" >
<fieldset>
<p>Delete ID: <input type="text" th:field="*{id}" required /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</fieldset>
</form>
<button onclick="window.location.href = '/'">Menu</button>
</body>
</html>
This syntax is correct: #{/blog/{id}(id = ${id})}.
The reason you are getting localhost:8080/blog/?id=33 is probably because ${id} is empty when the form is created, and when you click the submit button, it is adding ?id=33 to the url (because the method is get and you have an input with the same name="id": <input type="text" th:field="*{id}" required />.
There is no html/thymeleaf way (without javascript) to get a form field into the path part of a URL (if that is what you're expecting). You'll have to use a javascript library if you want that to happen.
I have an input field that will input a whole number like 1,2,3,4,5,etc.. No decimals and no negative numbers.
I have this but I can still enter in decimal and negative number?
<input name="Quantity" type="number" step="1" min="0" class="form-control">
Am I supposed to do some validation on the JS side or something to see if the element attribute conditions are met?
P.S. one thing to note. I'm not calling any submit on the form. I'm clicking a button, serializing the form and passing it to a post call via JS.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript">
function testValidate() {
var form = $('form')[0];
if (!form.checkValidity || !form.checkValidity()) {
console.log('Invalid');
} else {
console.log('Validated');
};
}
</script>
</head>
<body>
<form id="form1">
<input id="input1" name="Quantity" type="number" step="1" min="0" class="form-control">
<div>
<button>Submit Button</button>
</div>
</form>
<button id="btnTest" onclick="testValidate()">TestButton</button>
</body>
</html>
You can certainly doing validation check using JS, if you don't want using form submit for validation.
But without seeing your code, I think that you should be able to have your submit button trigger the validation automatically for you, doing your form serializing after its been validated.
I am submitting form via javascript by using 'document.FormName.submit()' . But this is giving me error of 'submit is not a function'. I m using IE8
<script typr="text/javascript">
function submitForm()
{
document.theForm.submit()
}
</script>
<body>
<form name="theForm" method="post">
<input type="text" name= "name">
<input type="button" name="submit" value="submit" onclick="submitForm()">
</form>
</body>
Please help me ?
problem is with your button name
i have use this its work fine
<script type='text/javascript'>
function submitForm()
{
document.theForm.submit();
}
</script>
<form name="theForm" method="post" action="default.php">
<input type="text" name="t" id="t"/><br/>
<input type="button" name="t1" value="submit" onClick="submitForm();">
</form>
use
document.forms[index].submit()
instead
Try this:
document.getElementsByName("theForm")[0].submit();
And you need to put the script after you declared the elements so :
<form name="theForm" onSubmit= "submitForm()">
<input type="text" name= "name">
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
function submitForm()
{
document.getElementsByName("theForm")[0].submit();
}
</script>
Or you can use events like document onload if you want to kepp your scripts in the page head.
If your form name is FormName
try this
Action
by the way your code is missing a semicolon at the end of the statement
and a spelling mistake here
<script typr="text/javascript">
typr
Here is the problem
change it typr is nothing should be type
<script typr="text/javascript">
to
<script language="javascript">
OR
<script type="text/javascript">
I just copy your code and executed in IE8 and it worked fine, so how is not working on your IE8. May be it is because of your hierarchy. So you please give id to form and try document.getElementById to access your form and then submit method. Do some thing like this"
<script type='text/javascript'>
function submitForm()
{
document.getElementById('your_form').submit();
}
</script>
<form name="theForm" id="your_form" method="post" action="default.php">
<input type="text" name="t" id="t"/>
<input type="button" name="t1" value="submit" onClick="submitForm();">
</form>
document.getElementById("theForm").submit();
It works perfect in my case.
you can use it in function also like,
function submitForm()
{
document.getElementById("theForm").submit();
}
Set "theForm" as your form ID. It's done.