Develop Reference

How to format hidden input field in ftl/html

I have to two fields type text in html, and two datepicker for those fields.
Now, when I choose the dates, they automatically populate text fields but in hidden input field those values are stored with the time also.
Like this:
value="2022-04-13T00:00:00+02:00"
Is there a way to format that input to be like this:
value="2022-04-13"
Thanks in advance...

What browser are you using?
in this code example everything works as you expected.
<input id="date" type="date" />
<input id="hidden" type="hidden" />
<script>
const date = document.querySelector("#date");
const hidden = document.querySelector("#hidden");
date.addEventListener("input", (e) => {
hidden.value = date.value;
});
</script>

Use image as a hyperlink and to save a textbox input value?

In my website, I have a textbox which I'm using to ask the user for their name. Below I have 2 images, a cancel "button" which is just an image which has an tag to take it back to the index, and a Go image which is linked to another HTML page where the input taken from the text box will be used to fill in a paragraph. This page is linked below:
I am fine with how the cancel image is functioning but is it possible for me to use the Go image to take me to my other HTML page as well as to store the data input into the "your name" text box?
<div class="name_input_box">
<input type="text" placeholder="Your name" id="name" required />
<label for="name" class="label_name">
</label>
</div>
my code for the input box^
<a href="Add_page.html">
<img src="assets/Go_button.png" img style="height:35%; width:35%;">
</a>
My code for the "go" image^
I appreciate this might seem simple but I can't find any video tutorials on how to tackle this, many thanks to anyone who takes the time to help me on Easter Sunday :)

Either use localStorage or just have a form
<form action="Add_page.html">
<div class="name_input_box">
<label for="name" class="label_name"><input type="text" placeholder="Your name" name="name" required /></label>
<input type="image" src="assets/Go_button.png" img style="height:35%; width:35%;">
</div>
</form>
and use the location.search to get the name.

If I understand your questions well, I think this is what you are looking for.
Local storage stores your data for your and you can get your data any time you need it.
try this out linking this script to your html code and making reference to the right id's.
// get data from the input tag/local storage value
var input_data = document.getElementById('input_data').value
//local storage key
var key_name = 'UserName';
// paragraph to fill input ..you can p tag for this
var result_screen = document.getElementById('result_screen')
// image link / button
var goBtn = document.getElementById('goBtn');
goBtn.onclick = function () {
// To check for empty input value
if (key_name && value) {
localStorage.setItem(key_name, input_data);
location.reload();
}
}
// loop through the input value entered by users
for (var i = 0; i < localStorage.length; i++) {
var key_name = localStorage.key_name(i);
var input_data = localStorage.getItem(key_name);
result_screen.innerHTML += `${key_name}: ${value}<br>`;
}

Specific Javascript function giving an uncaught type error, others work normally

I have a bunch of javascript that checks the contents of certain fields and returns false if they are empty or do not meet specific conditions. Here is an example of a working function.
if(!medicalform.surname.value.length){
valid=false;
document.getElementById('surname-required').style.display = "inline-block";
document.getElementById('surname').focus();
}
So I have this part of my javascript:
if (!medicalform.dob.value.length) {
valid=false;
document.getElementById('dob-required').style.display = "inline-block";
document.getElementById('dob').focus();
}
if (!medicalform.cob.value.length) {
valid=false;
document.getElementById('cob-required').style.display = "inline-block";
document.getElementById('cob').focus();
}
that read the length of the date field and the country field respectively, and if they do not have a length, they will change the variable valid to false, highlight and reveal a span message telling the person completing the form to fill it in, and return false to the form being fully filled in.
However, when running the script, it says
Uncaught TypeError: Cannot read property 'style' of null
I have attached the dob and cob parts of my html respectively.
Date of Birth: <input type="date" id="dob" name="dob" min="1900-01-01">
<span class="error-messages" id="dob-required"> Please enter your date of birth. </span>
Country of Birth:
<select name="country" id="cob" name="cob" onChange="dropDownList(this);"> <span class="error-messages" id="cob-requried"> Please enter your country of birth </span>
What could be going wrong? The error points to the style.display of the dob javascript.

HTML form text - save data as url using javascript

I am saving the form text(facebook page name) entered by the user into to database.
<form:input type="text" path="fName" value="${bean.fName}" title="Page Name"/>
What i want is when the user enters the fbpage name in the form text it should automatically change into fb-url. For example if user enters "google" the form text should change to "https://www.facebook.com/google".
How can i achieve this by Javascript ?

Hello If I understand your problem that text should be change into url in the same textbox then try the below code
$("#user").change(function() //user is textbox ID
{
$("#user").val("https://www.google.com/"+$("#user").val()); //added google you can use facebook also
});
check below fiddle
Url Fiddle Link

If you want to change the text-box value :
<input type='text' path='fname' id='path' value="${bean.fname}" title="Page Name" onfocusout='changeValue()'/ >
JS :
function changeValue(){
document.getElementById('path').value = "https://www.facebook.com/"+document.getElementById('path').value;
}
Demo

It can be done via jquery too. if you have input like below
<input type='text' id='url' value="" title="Page Name" onblur="getVal()"/>
jquery function
function getVal() {
var link = "https://www.facebook.com/";
$("#url").val(link + $("#url").val());
}

What is the value of an empty text input box?

I am trying to implement a search box. The following is the code (both HTML and JS)
HTML
<form>
<input type="text" ng-model="searchVar" class="searchbox">
<input type="button" value="Search" ng-click="Search()" class="button">
</form>
JS
var Search = function() {
/* code to implement the table content loading part */
//The following is what I have to filter out the table contents based on input in the text field
if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {
ItemsToDisplay.push(tableContent[i])
}
//Call function to load table
}
What is happening is that, if I enter some string into the input text field, the search algorithm works fine and only the relevant items are displayed. However, if I clear the contents of the search box and click on Search button, nothing is displayed in the table. That is, when the text field is cleared and clicked on the search button, it is as if ItemsToDisplay is empty and the if condition fails.
Can someone explain why this is the case? And how I can solve this?

Before your indexOf($searchVar) you should check that searchVar is != ''. Otherwise no item will be displayed afterward. A suggestion, javascript has a really great console.log functionality that will help you a lot when it comes to if branches

If you cleared input, the value of $scope.searchVar willbe undefined and your condition
if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {...}
will be false, so you didn't push into ItemsToDisplay and nothing append.
I suggest you to write an else statement :
if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {...}
else {
ItemsToDisplay.push(tableContent[i]);
}

U can try with,
if (($scope.searchVar) != undefined)
or
if (typeof ($scope.searchVar) != 'undefined')

when you do not enter anything in INPUT box then its value become UNDEFINED.
you will have to check in if() condition, if input is undefined then write your logic, if input has some value then write your logic.
<form>
<input type="text" ng-model="searchVar" class="searchbox">
<input type="button" value="Search" ng-click="Search()" class="button">
</form>
var Search = function()
{
if ( $scope.searchVar == undefined){
//Do something, input box is undefined
}
if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {
ItemsToDisplay.push(tableContent[i]);
}
}