I want to generate current date in a html form and store that in the variable currentDate. when i write it works fine if the user enters in the text area. But I want to store the current date(the user need not put it) and store it in the variable currentDate.
use hidden variable in jsp If it is JSP
JSP HTML:
<input type="hidden" name="currentDate" id="currentDate" value="<%=new Date()%>">
<div id="div1"></di>
JAVASCRIPT :
function onLoad()
{
document.getElementById('div1').innerHTML ='<%=new Date()%>';
}
use hidden variable in html If it is HTML , call this onLoad Form
HTML:
<input type="hidden" name="currentDate" value="">
<div id="div1"></di>
JAVASCRIPT :
function onLoad()
{
var month = dateObj.getUTCMonth();
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
newdate = year + "/" + month + "/" + day;
document.getElementById('currentDate').value=newdate;
document.getElementById('div1').innerHTML =newdate;
}
Related
I'm currently building a landing page with an access code form field.
I'm stuck on finding a way to get the access code entered into a form to be appended as a tag on the url.
Enter "12345" into field and on submit direct to url "www.website.com/?code=12345"
Below is the code I have so far - :
<script>
function btntest_onclick(){
if (document.getElementById('input-code').value == '1234','5678','9809') {
var domain = "http://www.website.com?";
var data = $(this).serialize();
window.location.href = url
}
else {
alert ( 'not found' );
}
};
</script>
<center>
<span class="text-container">
<input type="text" name="accesscode" placeholder="ACCESS CODE" maxlength="10" size="25" id="input-code">
<p>ENTER</p>
</span>
</center>
Any advice on this would be greatly appreciated!
Thanks.
You have a few problems in the code:
The if containing document.getElementById('input-code').value == '1234','5678','9809'. That's not a valid conditional statement in JS. I assume you were trying to test if the value was equal to any of the strings, which can be done using || (A logical "or").
The code was never added to the end of the URL.
You never defined the url variable you were redirecting to.
Here's a commented version that should explain some ways to do this:
function btntest_onclick() {
// First, we assign the value to a variable, just to keep the code tidy
var value = document.getElementById('input-code').value
// Now we compare that variable against each valid option
// if any of these are true, we will progress
if (value === '1234' || value === '5678' || value === '9809') {
// Use a template literal (The ` quotes) to build the new URL
var url = `http://www.website.com?code=${value}`
// This could also be written as:
// var url = "http://www.website.com?code=" + value
// Navigate to your new URL (Replaced with an alert as a demonstration):
alert(url)
// window.location.href = url
} else {
// Otherwise, show the alert
alert('not found')
}
}
<center>
<span class="text-container">
<input type="text" name="accesscode" placeholder="ACCESS CODE" maxlength="10" size="25" id="input-code">
<p>ENTER</p>
</span>
</center>
I am creating a form in which I have added few items of type SCALE and I want the user to select from a scale of 1 to 3.
Now I want to dynamically add all these selected values such as the sum = selected value of scaleA + ..scaleB+ ..ScaleN.
So far I have managed to get all the SCALE items, but I am unable to get the value that use has currently selected.
The API gives only following methods getUpperBound() and getLowerBound() where as I want to get the value the user has currently selected.
Is there a way I can achieve this?
Note: I want to display the user the sum of selected value right away as he is filling in the form.
The piece of code that I have written so far
function myFunction() {
var form = FormApp.getActiveForm();
var items = form.getItems(FormApp.ItemType.SCALE);
for (var i = 0; i < items.length; i++)
Logger.log(items[i].getId() + ':Title ' + items[i].getTitle()+ ':ScaleItem '+items[i].asScaleItem());
}
To make a dynamic form you will have to use google apps scripts to create your own from using HTML service. Like So: https://script.google.com/macros/s/AKfycby5b0Q2cuDSTl8VDIG60-9lnklAgeaZlXwmZq2slRG4h-fx6og/exec
Native form application from google cannot be used for making a dynamic form that updates while the form is live.
Html File: "ScaleForm", code source: http://www.w3schools.com/tags/tag_output.asp
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id = "formDiv">
<form id = "scaleForm" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="0" min ="0" max ="3">
3 <br>
+ <br> 0
<input type="range" id="b" name="b" value="0" min ="0" max ="3">
3 <br>
=
<output id = "c" name="x" for="a b"></output> <br>
<input type ="button" value ="Submit" onclick ="formSubmit()">
</form>
</div>
<br>
Values Submitted shown Below:
<div id="submittedValue">
</div>
<script>
function formSubmit(){
var formvalues = []
var d = new Date();
formvalues[0] = d.toString();
formvalues[1] = document.getElementById("a").value
formvalues[2] = document.getElementById("b").value
formvalues[3] = document.getElementById("c").value
var sub = document.getElementById("submittedValue")
sub.innerHTML = "Value 1: " +formvalues[1] +"<br>Value 2: "+formvalues[2] +"<br>Total: "+formvalues[3]
google.script.run.recordValues(formvalues)
}
</script>
</body>
</html>
Google Script code:
function doGet() {
return HtmlService.createTemplateFromFile('ScaleForm')
.evaluate()
.setTitle('Scale Form for stack overflow');
}
function recordValues(formvalues){
var scale1 =formvalues[0]
var scale2 = formvalues[1]
var sum = formvalues[2]
// The above assignments are for reference sake only they are not used
var Ss = SpreadsheetApp.openById("Paste your Spreadsheet ID here to record the values")
var Sheet = Ss.getSheetByName("Responses")
Sheet.appendRow(formvalues)
}
How to run this:
In scripts.google.com create a script file and an HTML file named "ScaleForm".
Copy the HTML code the HTML file and script to the script file.
Use publish menu to deploy this as a web app and you should be good to go.
More details on web App can be found here: https://developers.google.com/apps-script/guides/web
According to the Docs input[time]: https://docs.angularjs.org/api/ng/input/input%5Btime%5D
it should be enough to use the input type time and bind it to a date oject, however it doesn't work as I'd expect it.
<input ng-model="time" type="time" placeholder="HH:mm" min="08:00" max="17:00" required >
and
$scope.time = new Date();
as a Result I'd like to see just the HH:mm within the input field.
Here's a jsfiddle to play around:
http://jsfiddle.net/U3pVM/7314/
I think you need at least Angular 1.3.0 beta for this to work, as it looks like it was introduced then.
Changelog:
...
Features
input: support types date, time, datetime-local, month, week
(46bd6dc8, #5864)
....
You could achieve that, follow my code,
http://plnkr.co/edit/60aiH0eJ8ee0FlEsQE2m?p=info
Basically i use momentjs, and set seconds and milliseconds to zero, that way browser will not render that.
moment().second(0).milliseconds(0).toDate();
Here's an example of how to use input="time" with angularJS and bind it using ng-model directive
HTML: <input type="time" ng-model="myTime"/>
in the controller, we assign time came from database to date a new object
$scope.myTime = new Date(response.data.start_time);
this will parse the full date as a time HH:MM:SS Successfully
Change $scope.time = new Date(); in your code to:
var d = new Date();
$scope.time = d.getHours() + ':' + d.getMinutes();
Working code: http://jsfiddle.net/bitsmith/asjv8ycq/1/
AngularJS Element Directive input[time] is used to create HTML time input with time validation and transformation.
The input must be provided in the format ISO-8601, i.e local time format HH:mm:ss, for example 15:35:10
The data model must be a Date Object, timezones used to read/write Date instance are defined using ngModel
Syntax
<input type="time"
ng-model="string"
[name="string"]
[min="string"]
[max="string"]
[required="string"]
[ng-required="string"]
[ng-change="string"]>
Use following code to bind time and for getting other attribute related to input type time.
<!doctype html>
<html lang="en">
<head>
<title>AngularJS Directives : input[time]</title>
<script src="angular.js"></script>
<style>
b{font-family:Papyrus; color:#fa4b2a; font-size: 20px;}
</style>
</head>
<body ng-app="timeDemo">
<script>
angular.module('timeDemo', [])
.controller('timeController', ['$scope', function($scope) {
$scope.sample = {
value: new Date(1999, 0, 1, 15, 30, 0)
};
}]);
</script>
<form name="demoForm" ng-controller="timeController as timeCtrl">
<label for="sampleInput">Select a time from 6 am to 6 pm</label>
<input type="time" id="sampleInput" name="input" ng-model="sample.value"
placeholder="HH:mm:ss" min="06:00:00" max="18:00:00" required />
<!-- min 6 am and max 6 pm i.e 18:00 -->
<div role="alert">
<span class="error" ng-show="demoForm.input.$error.required">
Input is Required!</span>
<!-- Required Error -->
<span class="error" ng-show="demoForm.input.$error.time">
Input Date is not Valid!</span>
<!-- Validation Error -->
</div>
<i>value = <b>{{sample.value | date: "HH:mm:ss"}}</b></i><br/>
<i>demoForm.input.$valid = <b>{{demoForm.input.$valid}}</b></i><br/>
<i>demoForm.input.$error = <b>{{demoForm.input.$error}}</b></i><br/>
<i>demoForm.$valid = <b>{{demoForm.$valid}}</b></i><br/>
<i>demoForm.$error.required = <b>{{!!demoForm.$error.required}}</b></i><br/>
</form>
</body>
</html>
Below will ensure your input always has HH:mm format.
$scope.time = return new Date(date.getFullYear(), date.getMonth(), date.getDate(),
date.getHours(), date.getMinutes());
Additionally, a function can be written in the controller end to format all Date values to be fed in time input
getFormatDate = function (val) { // assuming val is date like "/Date(946673340000)/"
if (val != undefined) {
date = new Date(val.match(/\d+/)[0] * 1); // creating a date object from val
return new Date(date.getFullYear(), date.getMonth(), date.getDate(),
date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
}
}
Basically, I've got a MySQL table with an id (primary key) and name. When the user enters a number into the "ID" textbox on the webform, I want to update another text box with the name based on the id that was entered. What's the best way to do this?
What I'm currently doing feels very stupid, but it works. When my page loads, I pull the id and name into a DataTable object. Then when the textbox changes (TextChanged event), I post back to the server and then search through my datatable and change the value of the name textbox.
It works, but it's kind of slow because of the post back. I got a feeling this is possible with javascript to make the form feel much more responsive? But I'm not even sure what to google. Any tips?
You should use JavaScript for this. There's no need to post back to the server.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function ()
{
$('input[name="txtid"]').on('change keyup',function()
{
$('input[name="txtnotifications"]').val
(
$('input[name="txtid"]').val()
);
});
});
</script>
</head>
<body>
<form action="/">
<input name="txtid" type="text" />
<br />
<input name="txtnotifications" type="text" />
</form>
Also, it seems curious that the user is entering the id. That's usually a database managed field and the user is not able to create/update it.
If the hotel table is small, pull out all the records and render as javascript array object.
<script src="Scripts/jquery-1.9.1.min.js"></script>
<input id="txtID" type="text" runat="server" />
<input id="txtName" type="text" runat="server" />
<script type="text/javascript">
$(function () {
$('#<%= txtID.ClientID%>').on('change keyup', function () {
var result = $.grep(hotels, function (e) { return e.id == $('#<%= txtID.ClientID%>').val(); });
var output;
if (result.length == 0) {
// not found
output = 'Hotel not found!!!';
} else if (result.length == 1) {
// access the foo property using result[0].foo
output = result[0].name;
} else {
// multiple items found
output = 'Multiple hotels found!!!';
}
$('#<%= txtName.ClientID%>').val(output);
});
});
</script>
In code behind, what you need to do is render the records as serialized JSON string:
Private Sub rendertHotelList()
Dim dt As DataTable = ... ' read hotel data from db into datatable
Dim hotels = From row As DataRow In dt.AsEnumerable
Select id = CStr(row!EmployeeID), name = row!LastName
Dim jss As New Script.Serialization.JavaScriptSerializer
Dim s As String = jss.Serialize(hotels)
ClientScript.RegisterClientScriptBlock(GetType(Page), "hotel_array", "var hotels = " & s, True)
End Sub
This way, no postback to the server needed when user type in the id value.
However, if the table contains large number of records and you need to keep the page size as small as possible, use ajax request to retrieve the name.
I have a page which assign some values to arrays when a function named 'hndlr' is called.code of the file is given bellow
<html>
<head>
<title>Search Example</title>
</head>
<body>
<script>
var pageName = new Array();
var pageLink = new Array();
var pageDetails = new Array();
function hndlr(response) {
// here I assign values to arrays pageName,pageLink,pageDetails using a for loop
}
// Some codes (I cant change anything in here)
// call the function hndlr here (I cant change anything in here)
</script>
</body>
</html>
I want to take pageName array into a checkbox list and pass the pageLink of selected checkboxes to another file.
I tried using bellow code just before the end of the body tag. but it isn't passing any data to next page(b.php)
<form action="b.php" method="post">
<script>
for (var j = 0; j < 5; j++) {
document.write("<input type='checkbox' name='formDoor[]' id='"+j+"' value= '' />"+pageName[j]+"<br />");
document.getElementById(j).value = pageLink[j];
}
</script>
<input type="submit" name="formSubmit" value="Submit" />
</form>
When I print the output, It displays 'undefined' strings just before the check boxes.
That means pageName[j] doesn't return any value.
problem is, these arrays are not visible to second part(part I tried with check boxes)
Please show me the way to do this..
Weird, your code is working for me (click the code box to show it): http://codepad.viper-7.com/4IVobE
You can't submit the form on this site but you can see that the arrays are accessible within the second script tag. I also tried it on my local server and after submitting the form I was able to access the values in b.php just fine.