Develop Reference

Issue with javascript and datalist in HTML

I have an issue with my code, there is a Datalist in my html with 2 options, when the "Azienda" option is selected I want to show the div called "aziende", but when i select "Privato" I don't wanna show that div, but the problem is it show me the div when I select "Privato" too. Somebody can help me?
<form class="contact-form" action="#" method="POST">
<div>
<input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
<datalist id="data_list">
<option value="Azienda">Azienda</option>
<option value="Privato">Privato</option>
</datalist>
</div> <br>
<input class="input1" type="text" name="nome" placeholder="Nome" />
<input class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
<input class="input2" type="text" name="email" placeholder="Email" /> <br>
<div id="aziende" style="display: none">
<input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
<input class="iva" type="text" name="IVA" placeholder="P.IVA" />
</div>
</form>
<script>
let getvalue = document.getElementsByName('lista') [0];
getvalue.addEventListener('input', function() {
if(getvalue !== [0]){
document.getElementById('aziende').style="display: block";
}else{
document.getElementById('aziende').style="display: none";
}
})
</script>

As mentioned in the comments, your if test is incorrect. See comments below for details on the working solution.
.hidden {
display: none;
}
<form class="contact-form" action="#" method="POST">
<div>
<input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
<datalist id="data_list">
<option value="Azienda">Azienda</option>
<option value="Privato">Privato</option>
</datalist>
</div> <br>
<input class="input1" type="text" name="nome" placeholder="Nome" />
<input class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
<input class="input2" type="text" name="email" placeholder="Email" /> <br>
<!-- Use CSS classes instead of inline styles when possible. -->
<div id="aziende" class="hidden">
<input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
<input class="iva" type="text" name="IVA" placeholder="P.IVA" />
</div>
</form>
<script>
const div = document.querySelector("#aziende");
document.querySelector("[name='lista']").addEventListener('input', function() {
// Just check the value of the input
if(this.value === "Azienda"){
div.classList.remove("hidden"); // Show the div
} else {
div.classList.add("hidden"); // Hide the div
}
});
</script>

Your comparison (the if statement) is invalid. You're comparing the dom element 'getvalue' to an array with a single element of zero.
I believe you should compare the value of the the input element, not the element itself. you're also comparing it to an array? you should compare it to the value you're looking for:
if (getvalue.value !== 'Azienda') {
to help debug things like this, it's useful to use console.log or alert statements to display the value of the variable just before the test:
console.log('value of getvalue input element', getvalue.value);
if (getvalue.value

Call a single html form from Google sheet

I a Google Spreadsheet filling from html form.
Function processForm works well and all fields are getting correct data
My problem with launchForm as I'm thinking.
The form opens in a popup window, but inputs don't load datalist elements. Unfortunately I don't understand why
function launchForm() {
var htmlApp = HtmlService
.createHtmlOutputFromFile('Index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(400)
.setHeight(450);
SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}
function processForm(formObject) {
var url = "LINK_TO_SPREADSHEET_OF_DATA_COLLECTION";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("List");
var asiaTime = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-MM-dd");
var nameParam = [ws.getLastRow(),
formObject.recipe_name,
formObject.place_name,
formObject.servingOrder,
formObject.cuisine_name,
asiaTime]
ws.appendRow(nameParam);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">New Recipe</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="recipe_name">Recipe Name</label>
<input type="text" class="form-control" id="recipe_name" name="recipe_name" placeholder="Recipe Name" required>
</div>
<div class="form-group col-md-6">
<label for="cuisine_name">Cuisine</label>
<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name" required>
<datalist id="cuisine_name">
<option value="Asian"></option>
<option value="Western"></option>
</datalist>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<p>Place name</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="place_name" id="ll4h" value="LL4H" required>
<label class="form-check-label" for="ll4h">LL4H</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="place_name" id="ll4t" value="LL4T" required>
<label class="form-check-label" for="female">LL4T</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="servingOrder">Serving order</label>
<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder" required>
<datalist id="servingOrder">
<option value="Starter"></option>
<option value="Main course"></option>
<option value="Veggi side"></option>
<option value="Carbs side"></option>
<option value="Dessert"></option>
<option value="Dough"></option>
<option value="Sauce"></option>
<option value="Drink"></option>
<option value="Other"></option>
</datalist>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
</script>
</body>
</html>
Where I'm wrong and how to fix it? What is the best way to close popup after submitting?

You want to put datalist to the input tag.
For this, how about this answer? I think that the reason of your issue is that the same id is used to the input tag and the datalist tag. So how about the following modification?
From:
<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name" required>
<datalist id="cuisine_name">
To:
<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name_datalist" required>
<datalist id="cuisine_name_datalist">
And
From:
<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder" required>
<datalist id="servingOrder">
To:
<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder_datalist" required>
<datalist id="servingOrder_datalist">
Reference:
The HTML Data List element

Set background-color to div from form in another blade

My project contains index.blade.php and create.blade.php.
In create.blade.php is a form for creating divs that are listed in the index.blade.php, through the form I need to pass the background-color for each div made, options red, yellow and green color.
My create.blade.php code:
<form action="{{url('warehouse')}}" method="post">
#csrf
<label for="name" style="padding-right:20px">Name</label>
<input type="text" id="name" name="name" style="padding-right:50px; margin-bottom:10px" placeholder="Name"><br>
<label for="supplier" style="padding-right:2px">Supplier</label>
<input type="text" id="supplier" name="supplier" style="padding-right:50px; margin-bottom:10px"
placeholder="Supplier"><br>
<label for="type" style="padding-right:28.5px">Type</label>
<input type="text" id="type" name="type" style="padding-right:50px; margin-bottom:10px" placeholder="Type"><br>
<label for="url" style="padding-right:41.8px">Url</label>
<input type="text" id="url" name="url" style="padding-right:50px; margin-bottom:10px" placeholder="Url"><br>
<label for="color">Color</label>
<select id="selector" name="color">
<option value="" disabled selected hidden>Please Choose...</option>
<option value="green">Green (ready for sale)</option>
<option value="yellow">Yellow (in progress)</option>
<option value="red">Red (new)</option>
</select>
<br>
<button type="submit" id="kreiraj_dugme_create" onclick="selectBackground()">Create/button>
And my index.blade.php code:
#foreach ($warehouses as $key => $warehouse)
<div class="brder1" draggable="true" ondragstart="drag(event,{{$key}})" id="{{$key}}">
<h1 class="ime_palete">{{$warehouse->name}}</h1>
<a class="link_palete" href="{{$warehouse->url}}" target="_blank">Link</a>
<a class="edit_palete" href="{{url("warehouse/".$warehouse->id."/edit")}}">Edit</a>
<a class="show_pallet" href="{{url("warehouse/".$warehouse->id)}}">Show</a>
<form action="{{url("warehouse/".$warehouse->id)}}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="izbrisiDugme" onclick="remove()">Remove</button>
</form>
</div>
#endforeach
</div>
<a class="create_palete" href="{{url("warehouse/create")}}">Create</a>
All I need is to set background-color from options to div brder1

You probably need to do something like this
with jQuery:
$("#selector").change(function(){
$(".brder1").css('background-color', $(this).val());
});

You can place the code within document ready. So snippet will look like as follows
$(document).ready(function(){
$("#selector").change(function(){
$(".brder1").css('background-color', $(this).val());
});
});

How to tie radio button with input text fields?

This is a sign up form for an employee. The employee has to check in a radio button if he is temporary or permament. If temporary he should fill the input contract number and if permament the hiring date. How can I bind the radio button with the input so that he cannot "cross-complete" , for example fill the hiring date if he is temporary. I want to enable him to fill out each input only if he has pressed that specific radio button.
php code :
<?php include 'dbconfig.php';?>
<?php header('Content-Type: text/html; charset=utf-8');?>
<!DOCTYPE HTML PUCLIC "-//W3C//DTDHTML
4.0 Transitional//EN"><HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="logintest.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</HEAD>
<button class="btn" TYPE="submit" name="goback" onclick="window.location.href='login.php'">Go Back </button>
<?php
error_reporting(E_ALL); ini_set('display_errors', 1);
if(isset($_POST['submit']))
{
$sql = "INSERT INTO employee (empID,EFirst,ELast,username, passcode)
VALUES ('".$_POST["empID"]."','".$_POST["EFirst"]."','".$_POST["ELast"]."','".$_POST["username"]."','".$_POST["passcode"]."')";
$result = mysqli_query($conn,$sql);
$answer=$_POST['kind'];
if($answer='permament'){
$sql1 = "INSERT INTO permament_employee (empID,Hiring_Date) VALUES ('".$_POST["empID"]."','".$_POST["date"]."')";
$result1 = mysqli_query($conn,$sql1);
}
if ($answer='temporary'){
$sql2= "INSERT INTO temporary_employee(empID) VALUES ('".$_POST["empID"]."')";
$result2 = mysqli_query($conn,$sql2);
}
echo "<script> location.replace('login.php') </script>";
}
?>
<FORM METHOD="post" ACTION="">
<div class="input-group">
<label>id</label>
<INPUT TYPE="text" name="empID" SIZE="30" required>
</div>
<div class="input-group">
<label>First Name</label>
<INPUT TYPE="text" name="EFirst" SIZE="30" required>
</div>
<div class="input-group">
<label>Last Name</label>
<INPUT TYPE="text" name="ELast" SIZE="30" required>
</div>
<div class="input-group">
<label>username</label>
<INPUT TYPE="text" name="username" SIZE="30" required>
</div>
<div class="input-group">
<label>password</label>
<INPUT TYPE="password" name="passcode" SIZE="30" required>
</div>
<div class="input-group">
<div class="some-class">
<label> Permament <input type="radio" name="kind" value="permament" id="permament" required> <br> <input type="date" name="date" value="date" id="date" required> <br> </label>
<label> Temporary <input type="radio" name="kind" value="temporary" id="temporary" required> <br> <input type="number" name="ContractNr" value="ContractNr" id="ContractNr" placeholder="Contract Number" required> <br> </label>
</div>
</div>
<br>
<br>
<br>
<br>
<button class="btn" TYPE="submit" name="submit">Submit Info </button>
<button class="btn" TYPE="reset" name="Reset">Reset </button>
</FORM>
</HTML>

You need javascript.
You have to bind a 'change' event on your radio buttons, and set visibility of your inputs according to radio button selected value.

If you are using jQuery you could add the following :
<script>
$(‘input[name=“kind”]’).change(function(){
if($(this).val() == ‘temporary’){
$(‘input[name=“date”]).hide();
$(‘input[name=“ContractNr”]).show();
}else{
$(‘input[name=“date”]).show();
$(‘input[name=“ContractNr”]).hide();
}
});
</script>
Or if you just want to disable :
<script>
$(‘input[name=“kind”]’).change(function(){
if($(this).val() == ‘temporary’){
$(‘input[name=“date”]).prop(‘disabled’, true);
$(‘input[name=“ContractNr”]).prop(‘disabled’, false);
}else{
$(‘input[name=“date”]).prop(‘disabled’, false);
$(‘input[name=“ContractNr”]).prop(‘disabled’, true);
}
});
</script>

Javascript hide/show questions depending on user input values

I am trying to hide and/or show form elements when a user selects certain values.
For example, if the user selects "yes" to the consent question, I need it to show a few questions, However, if they change their response to the consent question, I need it to hide those questions.
Here is what I have come up with so far...
$(document).ready(function () {
var input = document.getElementById('consent');
var consent_responses = [{ "0": hideConsent },{ "1": showConsent }];
input.addEventListner('click', function () {
var consent_response;
if (consent_responses[this.value]) {
content_response = consent_responses[this.Function()]
}
else {
content_response = consent_responses[this.Function]
}
});
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
function hideConsent(){
$("#date").hide(),
$("#referrer").hide(),
$("#f_name").hide(),
$("#phone_num").hide(),
$("#leave_msg").hide(),
$("#email").hide(),
}; });
Fiddle here: http://jsfiddle.net/7jX47/1/

You could do it like this: JSFiddle
Basically I only fixed a few typos (did you actually try your code before you posted here?) and added event listeners to the radio buttons with
document.getElementById(...).addEventListener(...)
I also gave your radio buttons unique IDs.

This can be simplified:
var input = document.getElementById('consent');
// Let's use the value as key, and the functions as values
var consent_responses = {
"0" : hideConsent,
"1" : showConsent
};
input.addEventListener("click", function () {
// Get the appropriate function given the value, and invoke it
consent_responses[this.value]();
});
function hideConsent() {
// ...
}
function showConsent() {
// ...
}

It's better to envelop your questions (that needs to be hidden) by a div with a class ".hidden" or style "display: none;". And simplify your code by simply asking that div to show() or hide() when needed.
Like so:
<form id="screening">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
<div class="form-group text-center">
<b>Do you agree to answer the screening questions?</b><br />
<div class="radio" id="consent">
<label>
<input type="radio" name="consent" id="consent" value="1">
Yes, I consent
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="consent" id="consent" value="0">
No, I do not consent
</label>
</div>
</div>
<!-- simplify by using this -->
<div id="questions" style="display: none;">
<div class="form-group" id="date">
<label for="date">What is today's date?</label>
<input type="date" class="form-control" id="date" name="date" />
</div>
<div class="form-group" id="referrer">
<label for="referrer">How did you hear about us/our studies?</label>
<select class="form-control" name="referrer" id="referrer">
<option></option>
<option value="1">Flyers</option>
<option value="2">Print Media</option>
<option value="3">A friend</option>
<option value="4">Online (e.g., Craigslist)</option>
<option value="5">Other</option>
</select>
</div>
<div class="form-group" id="other_explain">
<label for="other_explain">Please specify other source.</label>
<textarea class="form-control" rows="3" id="other_explain" name="other_explain"></textarea>
</div>
<div class="form-group" id="f_name">
<label for="f_name">What is your first name?</label>
<input type="text" class="form-control" id="f_name" name="f_name" />
</div>
<div class="form-group" id="phone_num">
<label for="phone_num">What is a phone number at which you can be contacted? </label>
<input type="tel" class="form-control" id="phone_num" name="phone_num" />
</div>
<div class="form-group" id="leave_msg">
<label for="leave_msg">If we call and you are not available, may we leave a message?</label><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="1">
Yes
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="0">
No
</label>
</div>
</div>
<div class="form-group" id="email">
<label for="email">What is an e-mail at which you can be contacted?</label>
<input type="email" class="form-control" id="email" name="email" />
</div>
</div>
</div>
</form>
and in your javascript instead of using this:
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
you use:
function showConsent(){
$("#questions").show(),
};