CSS and JS Query - javascript

CSS and JS Query - javascript

I am trying to make an HTML form, and I am trying to insert the "Plus" icon to the Input field. How would I do that, since I've already tried modifying it via CSS? Can someone help?
Also, I also want to create a "click" event which leads me to a secondary page where I can choose the Rooms and the capacity in my form, and go back once I am done with it. Any thoughts how I would do that?
This is my CSS Code:
*{
margin:0;
box-sizing: border-box;
padding:0px;
}
body{
height:100vh;
display: flex;
background-color: rgb(87,189,130);
}
.field-property,
.field-room,
.field-name-room,
.field-capacity,
.base-tariff{
position: relative;
top:30%;
left:100%;
}
.allinputs{
margin:10px;
padding:5px;
border-radius: 10px;
width:100%;
}
.client-form{
align-items: center;
justify-content: center;
display: flex;
}
This is my HTML Code:
<body>
<h1 class="client-form">Client Integration Form</h1>
<form>
<div class="field-property">
<label for="property Name">Property Name
<input type="text" class= "allinputs" name="name" placeholder="Property Name" required />
</label>
</div>
<div class="field-room">
<label for="rooms">Rooms
<input type="text" class="allinputs" name="name" placeholder="Rooms" required />
<div class="material-icon">
<i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>
</label>
</div>
</div>
<!-- Adding the Icon for Adding Rooms -->
<div class="field-name-room">
<label for="room Selected">Room Selected
<!-- Adding a Drop Down Value for the rooms -->
<select class="all inputs">
<option class="options">Pink Room</option>
<option class="options">Red Room</option>
<option class="options">Green Room</option>
</select>
</label>
</div>
<div class="field-capacity">
<label for="capacity">Capacity</label>
<input type="number" class="allinputs">
</div>
<div class="base-tariff">
<label for="base Tariff">Base Tariff of the Room:</label>
<input type="value" class="allinputs" name="name" placeholder="Base Tariff">
</div>
<!-- Yet to be decided how to integrate this -->
<!-- <div class="field-billing">
<label for="billing">Billing:</label>
</div>
<div class="field-phone">
<label for="phone Number">Phone Number</label>
<input type="number" class="allinputs">
</div>
</form>
</div>
</body>
</html>

To insert the '+' sign use a placeholder.
<input type="" id="" name="" placeholder="+">
A click event could be achieved by a simple hyperlink <a href=''>Example Hyperlink</a>

Related

How to contain jQuery datepicker within div?

UPDATES: I tried the suggestions below but they did not work.
I want to contain the calendar within the white div with a dark grey border (class = "profileEdit"), and only have its overflow viewable by scrolling. Right now, it's spilling onto profileEdit's parent divs.
SELECTED HTML
<div class="profileEdit">
<div class="profilePic">
</div>
<input type="text" class="form-control" id="usernameEdit" placeholder="Damon">
<form class="habitForm">
<h2>MY EXERCISE HABIT</h2>
<div class="habitFormGroup">
<div class="custom-select">
<select>
<option value="0">Before</option>
<option value="1">After</option>
<option value="2">During</option>
<option value="3">Every time</option>
<option value="4">When</option>
</select>
</div>
<input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
<p class="punctuation">,</p>
</div>
<p class="helperText">trigger</p>
<div class="habitFormGroup lockedLesson">
<p>I will</p>
<div class="exerciseEdit"></div>
<p class="punctuation">.</p>
</div>
<p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
<div class="habitFormGroup lockedLesson">
<div class="exerciseEdit"></div>
<p>is my reward.</p>
</div>
<p class="helperText lockedLesson">reward</p>
</form>
<div class="reminderSwitch">
<p>Remind me to perform habit</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<form class="reminderControls">
<label for="startDate">Start:</label>
<!-- CALENDAR -->
<div class="dateParent">
<input type="text" id="datepicker" value="">
</div>
</form>
</div>
Save</button>
</div>
DATEPICKER JQUERY
$(function () {
$("#datepicker").datepicker();
});
DATEPICKER CSS
.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
overflow-y: scroll;
position: relative;
}
#ui-datepicker-div {
position: absolute;
width: 280px;
font-family: frutigerLight;
}
.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}
UPDATE: Solution works, but messes up spacing: The space between the "Starts" toggles on and off as well.

You can use an inline datepicker and control its visibility with JavaScript:
$(function() {
$('.dateParent').datepicker({ inline: true, altField: '#datepicker' });
$('#datepicker').focus(function(event) {
event.preventDefault();
$('.ui-datepicker').addClass('shown');
return false;
});
$(document).click(function(event) {
if(!$(event.target).is('.dateParent *'))
$('.ui-datepicker').removeClass('shown');;
});
});
.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
position: relative;
}
.ui-datepicker {
visibility: hidden;
height: 0;
margin: 1rem auto;
}
.ui-datepicker.shown {
visibility: visible;
height: initial;
}
.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" type="text/css">
<div class="profileEdit">
<div class="profilePic">
</div>
<input type="text" class="form-control" id="usernameEdit" placeholder="Damon">
<form class="habitForm">
<h2>MY EXERCISE HABIT</h2>
<div class="habitFormGroup">
<div class="custom-select">
<select>
<option value="0">Before</option>
<option value="1">After</option>
<option value="2">During</option>
<option value="3">Every time</option>
<option value="4">When</option>
</select>
</div>
<input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
<p class="punctuation">,</p>
</div>
<p class="helperText">trigger</p>
<div class="habitFormGroup lockedLesson">
<p>I will</p>
<div class="exerciseEdit"></div>
<p class="punctuation">.</p>
</div>
<p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
<div class="habitFormGroup lockedLesson">
<div class="exerciseEdit"></div>
<p>is my reward.</p>
</div>
<p class="helperText lockedLesson">reward</p>
</form>
<div class="reminderSwitch">
<p>Remind me to perform habit</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<form class="reminderControls">
<label for="startDate">Start:</label>
<!-- CALENDAR -->
<div class="dateParent">
<input type="text" id="datepicker" value="">
</div>
</form>
</div>
Save</button>
</div>

Try to remove height attr from calendar element. If it doesnt work check this jQuery UI inline Datepicker auto-resize to parent container

As a UX designer I'd think that you want to either make the containing DIV larger (personally think a popup like the calendar shouldn't extend outside it's container) or possibly change the direction that the calendar control opens in relative to the mouse position. If your trigger control is at the bottom of it's container you have the calendar pop upwards instead of down.

Can I manipulate a Textbox in an html based Google Apps Script Sidebar through a function associated to a button in that Sidebar?

Question coming from someone who started coding GAS 3 days ago. I'm trying to transfer a tool I developed as an Excel VBA Add-In with Windows Forms into Google Workspace. I apologize in advance if this is potentially something that simply isn't possible in GAS/HTML.
I'll try to describe the use case as simply as possible:
I have implemented a sidebar in Google Sheets with multiple text boxes for user input. I have successfully transferred inputs from the HTML textboxes into the GAS part of things.
Now, I have a field that is pre-filled in with a date. Below are two buttons. These should be used for the convenience of increasing the date in said textbox by a number of days (+1 day; +3 days; etc.).
So clicking on +1 should automatically increase the displayed value in the textbox by 1 day.
I'm trying to implement exactly that functionality. As of now I have successfully handed over the value in the textbox to a GAS function that increases the date by 1 (even that almost made me lose my mind compared to how this is done in VBA :( ). Now I want to transfer that new date back into the text box.
After trying to search for any similar use case almost the entire day, I gave up and registered here for help. The only comparable things I could find with regards to transferring values from GAS to HTML used these values in the createHtmlOutputFromFile function to hand them over when creating and launching the sidebar. In my case I want the value in the textbox to change while the sidebar is open.
I rely on this not only for something as trivial as increasing a date, but for the sake of clarity this was one of the easiest examples to explain.
Thanks for any help in advance!!
UPDATE WITH CODE
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- Google Style Sheet to make it look"google" :) -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<style>
.block {
margin-bottom: 10px;
font-size: 10px;
}
p {
font-size: 10px;
}
label {
font-size: 10px;
display: inline-block;
width: 90px;
}
input {
padding: 5px 10px;
font-size: 10px;
}
button {
font-size: 10px;
}
select {
font-size: 10px;
}
</style>
</head>
<body>
<form id="dashboardForm">
<!-- HTML code that defines the sidebar structure -->
<p>Please provide your inputs for the RfX event creation</p>
<div class="block">
<label>Project Name:</label>
<input name="projectName" value="TestProject">
</div>
<div class="block">
<label>Type:</label>
<select name="RfXtype">
<option value="RfP">RfP</option>
<option value="RfI">RfI</option>
<option value="ePROC">ePROC</option>
</select>
</div>
<div class="block">
<label>Commodity Code:</label>
<input name="comCode" value="CAPC">
</div>
<div class="block">
<label>Due Date:</label>
<input name="dueDate" value="01/01/2021">
</div>
<div class="block">
<input type="button" value="+1" onclick="google.script.run.add1Day(dashboardForm)">
<input type="button" value="+3" onclick="google.script.run.add3Day(dashboardForm)">
<input type="button" value="+7" onclick="google.script.run.add7Day(dashboardForm)">
</div>
<div class="block">
<label>Technical Contact:</label>
<input name="techContact" value="Test">
</div>
<div class="block">
<label> Contact E-Mail:</label>
<input name="contactMail" value="Test" disabled>
</div>
<div class="block">
<label> Contact Phone:</label>
<input name="contactPhone" value="Test123" disabled>
</div>
<div class="block">
<label> Contact Name:</label>
<input name="contactName" value="Thorsten Platz" disabled>
</div>
<div class="block">
<label>E-Mail Language:</label>
<select name="mailLanguage">
<option value="English">English</option>
<option value="German">German</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
</div>
<div class="block">
<label>Incoterms:</label>
<select name="Incoterms">
<option value="DDP">DDP</option>
<option value="DAP">DAP</option>
<option value="FCA">FCA</option>
<option value="ExWorks">ExWorks</option>
</select>
</div>
<div class="block">
<label>Delivery Adress:</label>
<input name="dAdress" value="Immenstaad">
</div>
<div class="block">
<label>Offer Validity:</label>
<input name="oValidity" value="31/12/2021">
</div>
<div class="block">
<label>Payment Terms:</label>
<select name="Incoterms">
<option value="60EOM10">60EOM10</option>
<option value="30EOM10">30EOM10</option>
<option value="15EOM10">15EOM10</option>
<option value="00EOM10">00EOM10</option>
</select>
</div>
<div class="block">
<label>Delivery Date:</label>
<input name="delDate" value="31/12/2021">
</div>
<div class="block">
<label>Purchasing Entity</label>
<select name="pEntity">
<option value="TestGmbH">TEST GmbH</option>
</select>
</div>
<div class="block">
<label>End Customer</label>
<input name="endCus" value="BAAINBw">
</div>
<div class="block">
<label>Currency</label>
<select name="Curr">
<option value="EUR">EUR (€)</option>
<option value="GBP">GBP (£)</option>
<option value="USD">USD ($)</option>
<option value="CAD">CAD</option>
</select>
</div>
<label>BoM</label>
<input type="checkbox" name="BoM">
<label>SOW</label>
<input type="checkbox" name="SOW">
<label>ECCD (Word)</label>
<input type="checkbox" name="ECCDW">
<label>ECCD (Excel)</label>
<input type="checkbox" name="ECCDE">
<input type="button" value="Create Project" onclick="google.script.run.createProject()">
<input type="button" value="Create Email only" onclick="google.script.run.createProject()">
<input type="button" value="Save" onclick="google.script.run.createProject()">
</form>
</body>
</html>
And the .gs part:
//#OnlyCurrentDoc //Limits the script to only accessing the current spreadsheet
var SIDEBAR_TITLE = "Dashboard";
function onOpen(e) {
//Custom Menu with functions
SpreadsheetApp.getUi()
.createMenu("CM-Tracker")
.addItem("Open Dashboard", "dashOpen")
.addToUi();
}
function onInstall(e){
onOpen(e);
}
function dashOpen() {
//Open the Dashboard as a Sidebar from an HTML File
var widget = HtmlService.createHtmlOutputFromFile("Dashboard.html");
widget.setTitle(SIDEBAR_TITLE);
SpreadsheetApp.getUi().showSidebar(widget);
}

I think what you are seeking can be accomplished all within the sidebar html like so...
UPDATED HTML
So, I've added my code with these changes...
Appended <br> to <label>Due Date:</label>
To <input name="dueDate" value="01/01/2021"> added type="date" id="dueDate" resulting in <input type="date" id="dueDate" name="dueDate" value="01/01/2021">
Added value="<?!=Utilities.formatDate(new Date(),'America/Los_Angeles','yyyy-MM-dd');?>" to auto populate the date field with today's date - refer to:Class HTML Template
To the value="+1 ,+3, +7" onclick I added update(1), update(3), update(7) respectively and commented your function calls to google.script.run.yourFunction().
You can click on the "date" field and it will bring up a calendar to choose a date, or add days via the buttons.
Inserted <script></script> below the </form> tag.
Modified the dashOpen() gs function (see below)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- Google Style Sheet to make it look"google" :) -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<style>
.block {
margin-bottom: 10px;
font-size: 10px;
}
p {
font-size: 10px;
}
label {
font-size: 10px;
display: inline-block;
width: 90px;
}
input {
padding: 5px 10px;
font-size: 10px;
}
button {
font-size: 10px;
}
select {
font-size: 10px;
}
</style>
</head>
<body>
<form id="dashboardForm">
<!-- HTML code that defines the sidebar structure -->
<p>Please provide your inputs for the RfX event creation</p>
<div class="block">
<label>Project Name:</label>
<input name="projectName" value="TestProject">
</div>
<div class="block">
<label>Type:</label>
<select name="RfXtype">
<option value="RfP">RfP</option>
<option value="RfI">RfI</option>
<option value="ePROC">ePROC</option>
</select>
</div>
<div class="block">
<label>Commodity Code:</label>
<input name="comCode" value="CAPC">
</div>
<div class="block">
<label>Due Date:</label><br>
<input type="date" id="dueDate" name="dueDate" value="01/01/2021">
</div>
<div class="block">
<input type="button" value="+1" onclick="update(1)//google.script.run.add1Day(dashboardForm)">
<input type="button" value="+3" onclick="update(3)//google.script.run.add3Day(dashboardForm)">
<input type="button" value="+7" onclick="update(7)//google.script.run.add7Day(dashboardForm)">
</div>
<div class="block">
<label>Technical Contact:</label>
<input name="techContact" value="Test">
</div>
<div class="block">
<label> Contact E-Mail:</label>
<input name="contactMail" value="Test" disabled>
</div>
<div class="block">
<label> Contact Phone:</label>
<input name="contactPhone" value="Test123" disabled>
</div>
<div class="block">
<label> Contact Name:</label>
<input name="contactName" value="Thorsten Platz" disabled>
</div>
<div class="block">
<label>E-Mail Language:</label>
<select name="mailLanguage">
<option value="English">English</option>
<option value="German">German</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
</div>
<div class="block">
<label>Incoterms:</label>
<select name="Incoterms">
<option value="DDP">DDP</option>
<option value="DAP">DAP</option>
<option value="FCA">FCA</option>
<option value="ExWorks">ExWorks</option>
</select>
</div>
<div class="block">
<label>Delivery Adress:</label>
<input name="dAdress" value="Immenstaad">
</div>
<div class="block">
<label>Offer Validity:</label>
<input name="oValidity" value="31/12/2021">
</div>
<div class="block">
<label>Payment Terms:</label>
<select name="Incoterms">
<option value="60EOM10">60EOM10</option>
<option value="30EOM10">30EOM10</option>
<option value="15EOM10">15EOM10</option>
<option value="00EOM10">00EOM10</option>
</select>
</div>
<div class="block">
<label>Delivery Date:</label>
<input name="delDate" value="31/12/2021">
</div>
<div class="block">
<label>Purchasing Entity</label>
<select name="pEntity">
<option value="TestGmbH">TEST GmbH</option>
</select>
</div>
<div class="block">
<label>End Customer</label>
<input name="endCus" value="BAAINBw">
</div>
<div class="block">
<label>Currency</label>
<select name="Curr">
<option value="EUR">EUR (€)</option>
<option value="GBP">GBP (£)</option>
<option value="USD">USD ($)</option>
<option value="CAD">CAD</option>
</select>
</div>
<label>BoM</label>
<input type="checkbox" name="BoM">
<label>SOW</label>
<input type="checkbox" name="SOW">
<label>ECCD (Word)</label>
<input type="checkbox" name="ECCDW">
<label>ECCD (Excel)</label>
<input type="checkbox" name="ECCDE">
<input type="button" value="Create Project" onclick="google.script.run.createProject()">
<input type="button" value="Create Email only" onclick="google.script.run.createProject()">
<input type="button" value="Save" onclick="google.script.run.createProject()">
</form>
<script type="application/javascript">
function update(increment){
let element = document.getElementById("dueDate");
element.defaultValue = element.stepUp(increment);
};
</script>
</body>
</html>
Modified dashOpen function
function dashOpen() {
//Open the Dashboard as a Sidebar from an HTML File
var widget = HtmlService
.createTemplateFromFile("Dashboard")
.evaluate()
.setTitle(SIDEBAR_TITLE);
SpreadsheetApp.getUi().showSidebar(widget);
}
SOME THEORY
Use google script (gs) codes to serve an HTML file (HtmlService) to your sidebar.
If you want to have gs serve dynamic data with <?= ?> tags, you will need to use HtmlService.getTemplateFromFile('filename').evaluate()
NOTE you can place any gs code between <?= ?> or <?!= ?> to be evaluated when HtmlService is called.
From the sidebar (webpage), the user changes <input> fields on the form and presses <button> fields from web page to execute a <script> function from within the <body> tag of the web page.
The sidebar <script> functions can retrieve the data from the sidebar fields, validate the data, and scrub any malicious code (preprocess) then send the data to a google script with google.script.run.yourGoogleScriptFuntion()
if you use .withSuccessHandler(successFunction) & .withFailureHandler(failedFunction), you can update the sidebar with data returned from the gs and processed with the successFunction or, upon failure to process, execute the failedFunction, which can be used to notify the user of and error or failure.
Example html ...
<html>
<body>
.
.
.
<input type="date" id="dueDate" name="dueDate" value="01/01/2021">
<div id=“someId”></div>
.
.
.
<input type="button" value="Save" onclick="myWebPageFunction()">
.
.
.
<!-- CLIENT SIDE SCRIPTS IN THE SIDEBAR HTML -->
<script>
function myWebPageFunction() {
// get data from <input> with
var dueDate = document.getElementById('dueDate').getValue();
// pass variable 'dueDate' to gs to process with
google.script.run.withSuccessHandler(onReturn).withFailureHandler(onFailure).someGsScript(dueDate);
}
function onReturn(newVariablePassedFromGoogleScript){
// EXAMPLE 1 - upon successful execution of the google script you can update an html elements value with...
document.getElementById('dueDate').value = newVariablePassedFromGoogleScript;
// OR EXAMPLE 2 you can change the html display content with...
document.getElementById('someID').innerHtml = newVariablePassedFromGoogleScript;
// OR EXAMPLE 3 just provide an alert
window.alert(newVariablePassedFromGoogleScript+" was updated!"); // The date of 03/09/2021 was updated!
}
function on Failure(){
alert('The process failed. Try again.');
}
</script>
</body>
</html>
and an example of the gs could be...
function someGsScript(date){
Logger.log("The date passed from the webpage is "+date);
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName('yourSheetName').getRange(1,1).setValue(date);
return "The date of "+date;
}
SOME REFERENCES
HtmlService <-- Hyperlink
createTemplateFromFile()
.evaluate()
Templated HTML
How web pages communicate with google scripts
.withSuccessHandler() return function
In the grey boxes on the last link, make sure you look at both the Code.gs and the Index.html for the examples.
W3Schools DOM Element objects
W3Schools practice environment for getElementById()
:)

Cannot align bootstrap submit button in form?

I have used bootstrap form but submit button is not getting aligned below Name and Number field in form. I tried to use various css styles but could not align it. See screenshot submit button is not aligned properly.
In app.js:
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
In index.css:
.form-group{
padding-left: 30px;
padding-right: 30px;
}
.form .btn-primary{
padding-left: 30px;
}
I also tried to wrap submit button inside div tag but still no effect.

form .btn-primary{
margin-left: 30px;
}
not .form this should also be margin otherwise the text would be shifted 30 pixels but the button remain in the same place

Instead of adding padding to .form-group and .btn what you can do is add padding to the form itself, just add a class to the form and add css against it.
Working example -
function editContact(id) {
document.getElementById("editcontact").innerHTML =
`
<form class="form">
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
editContact(1);
.form{
padding: 0 30px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="editcontact">
</div>
</body>
</html>
Notice, I added .form class, and adding to it.
Here is a plunker of the above snippet https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview

wrap button inside form-group div (new ) P.S try this snippet in expanded snippet view
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

Issue with forms using twitter typeahead and bootstrap3

I'm trying to build a simple inline form using bootstrap 3 and with typeahead functionalities. I'm having 2 issues, and I'm not sure if they are related somehow or not. The issues are as follows:
-- The first issue I'm having is with the size of #orig and #dest fields (1st and 2nd input fields) not fitting automatically to 100% of their grid container parent. It's as if they don't increase in size past 200px. See image: form. I really don't understand what is causing this, as nowhere in my stylesheet file do I mention 200px or any other limiting setting.
-- My second issue is also related to same aforementioned form fields, but the problem now is that when I try to resize the window, the field's ghost background remains with the same 200px in size and makes the forms appear very clumsy and stacked on each other. See image: form. I'm pretty sure this issue is related to typeahead, as when I don't include the link to my javascript file (which contains the typeahead functionality), this issue doesn't happen anymore.
See code below:
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
Any help would be much appreciated :)
Thanks in advance

As I running your code in bootstrap 3 with latest version. It is working fine. Check below snippet:(see in full page preview)
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

How to set radio button as hidden for the div

I am working on simple feedback form where I have 3 fields Name,rating(Poor, fair, good) and feedback comment.
In my form I want user to select a single rating at a time and submit the form with selected rating & feedback comments.
I have created the <div> elements for each rating and make them as radio type.
I don't want to show the radio button on the form, but I want my Div to behave as radio button.
Also how to fix the border of Divs?
I am attaching the screenshots.
First one, how I want it to appear and second one is how my current code is appearing on UI.
Below is my form code & CSS
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">— —</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">—</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">+ —</label>
<span class="screen_reader" id="o3-l">Good</span>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
CSS Code
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
}
input[type="radio" i] {
-webkit-appearance: radio;
box-sizing: border-box;
}
.labelClass{
margin-right: 0 !important;
height: 28px;
background-color: #fff !important;
color: #0511ac;
box-sizing: border-box;
}

You can do something like the following:
$('.radio-group .feedbackCl').click(function(){
$(this).parent().find('.feedbackCl').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
$(this).parent().find('input').val(val);
console.log('You have selected: '+val);
});
.feedbackCl {
display: inline-block;
width: 70px;
height: 30px;
border: 2px solid lightblue;
cursor: pointer;
margin: 2px 0;
text-align: center;
line-height: 30px;
}
.radio-group{
position: relative;
}
.feedbackCl.selected{
border-color: blue;
background-color: orange;
}
span{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="radio-group">
<div class="feedbackCl" data-value="1">— —
<span>Poor</span>
</div>
<div class="feedbackCl" data-value="2">-
<span>Fair</span>
</div>
<div class="feedbackCl" data-value="3">+ —
<span>Good</span>
</div>
<div class="feedbackCl" data-value="4">+
<span>Very good</span>
</div>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
</form>
</div>
</div>

Try my snippet! I dont use any js code, just html and css! hope this can help you!
.feedback{float:left;width:100%;margin-top:10px}
.feedbackCl{float:left;width:15%}
.feedbackCl>input[type="radio"]{display:none}
.feedbackCl>input[type="radio"]:checked+label>.sight{border:solid 2px #00f;background:orange}
.feedbackCl>label{width:100%;height:100%;display:inline-block;text-align:center}
.feedbackCl>label>.sight{width:100%;float:left;border:solid 1px #ccc;padding:10px 0;color:#00f;margin-left:1px}
.feedbackCl>label>.screen_reader{width:100%;float:left;padding-top:10px}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedback">
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">
<span class="sight">— —</span>
<span class="screen_reader" id="o1-l">Poor</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">
<span class="sight">—</span>
<span class="screen_reader" id="o2-l">Fair</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">
<span class="sight">+—</span>
<span class="screen_reader" id="o3-l">Good</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_3" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_3" class="labelClass">
<span class="sight">+</span>
<span class="screen_reader" id="o3-l">Very Good</span>
</label>
</div>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
</body>
</html>

Rather than using radio buttons, you can add an onClick event to each div which will populate a hidden input.
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" onclick="setRating(1)">
<label for="overall_0" class="labelClass">- -</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl" onclick="setRating(2)">
<label for="overall_1" class="labelClass">-</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
Javascript
<script>
function setRating(v) {
document.getElementById('overall').value = v;
}
</script>

I think you wish to use the radio inputs, because you don't know another way to get only one form field to track on submit.
Here, I use a hidden input field to store which div (poor - fair - good) has been selected.
And divs are easy to style like you want.
;)
$(".feedbackCl").on("click",function(){
$(".feedbackCl").removeClass("selected").css({"opacity":1});;
$(this).addClass("selected");
$(".feedbackCl").not(".selected").css({"opacity":0.6});
console.log("Value stored in the hidden input of the form: "+$(this).attr("id"));
$("#feedbackResult").val( $(this).index() );
});
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
border:1px solid grey;
display:block;
}
.feedbackCl.selected{
border:2px solid blue;
}
#poor{
background-color:red;
}
#fair{
background-color:yellow;
}
#good{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;">
<a id="modal_close" href="#">close <b>X</b></a>
</div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<br>
<div class="feedbackCl" id="poor">
Poor
</div>
<div class="feedbackCl" id="fair">
Fair
</div>
<div class="feedbackCl" id="good">
Good
</div>
<input type="hidden" id="feedbackResult" name="feedbackResult">
<br>
<br>
<br>
<textarea id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" ></textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
<br>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

CSS and JS Query - javascript

To insert the '+' sign use a placeholder. <input type="" id="" name="" placeholder="+"> A click event could be achieved by a simple hyperlink <a href=''>Example Hyperlink</a>

Related

How to contain jQuery datepicker within div?

Can I manipulate a Textbox in an html based Google Apps Script Sidebar through a function associated to a button in that Sidebar?

Cannot align bootstrap submit button in form?

Issue with forms using twitter typeahead and bootstrap3

How to set radio button as hidden for the div

Categories

Resources