Code (I'm working with Materialize CSS framework):
<form class="col s12" id="formRequer">
<div class="input-field col s6">
<select id="stdApply" name="stdApply" required>
<option value="" disabled selected>Escolha somente uma das opções</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Selecione o que quer requerer</label>
</div>
</form> <!-- END: form class="col s12" id="formRequer -->
<button class="btn waves-effect waves-light" type="submit" id="btn_submitRequer" form="formRequer">Enviar
<i class="material-icons right">send</i>
</button>
I copied the code excluding CSS and paste it on w3school and it worked fine!
Is it possible that HTMLService evalute() process exclude the required attribute from tag or exclude the value="" attribute from the first option (this is vital for HTML5 select tag works with required attribute)?
Any help?
Try this:
HTML:
<html>
<head></head>
<body>
<form>
<select id="stdApply" name="stdApply">
<option value="" selected>Escolha somente uma das opções</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Selecione o que quer requerer</label>
<br /><input type="button" value="Enviar" onClick="processForm(this.parentNode);" />
</form>
<script>
function processForm(obj) {
if(obj.stdApply.value!='') {
google.script.run.processForm(obj);
}else{
document.getElementById('stdApply').focus();
}
}
</script>
</body>
</html>
Google Script:
function processForm(obj) {
Browser.msgBox(obj.stdApply);
}
function showMyDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah3'), 'Test');
}
Related
I am trying to create a search form within a page using Bootstrap 5 and the following code:
<div class="row mb-5">
<div class="col-lg-10 offset-lg-1">
<form class="form-inline" role="form">
<label for="field">Find all where...</label>
<select id="field" class="form-select">
<option value="company_name" selected>Company Name</option>
<option value="federal_ein" selected>EIN</option>
<option value="state">State</option>
<option value="city">City</option>
</select>
<label for="term">includes...</label>
<input type="text" class="form-control" id="term" placeholder="Enter full/partial term" name="term">
<button type="submit" class="btn btn-primary btn-lg">Search</button>
</form>
</div>
</div>
I want the form to be inline, with the text box stretched to fill unused space in the row. I can't figure out how to achieve this. Any help on it? Thanks!
This code seems to work well. Thanks!
<form id="frmSearch" name="frmSearch" role="form" class="was-validated">
<div class="row mb-4">
<div class="col-lg-2 offset-lg-1 text-end">Find companies where...</div>
<div class="col-lg-2 text-start">
<select ID="ddlType" Class="form-control rounded" required>
<option value="" selected>Search by...</option>
<option value="company_name">Company Name</option>
<option value="city">City</option>
<option value="federal_ein">EIN</option>
<option value="state">State</option>
</select>
</div>
<div class="col-lg-1 text-center">contains...</div>
<div class="col-lg-4 d-flex">
<input type="text" ID="tbTerm" class="form-control rounded text-black" required />
</div>
<div class="col-lg-1 mx-auto">
<button type="submit" ID="btnSearch" class="btn-success btn text-white">Search</button>
</div>
</div>
</form>
I'm working on a small Angular 2 To-do app. I didn't want to have any problems with browser compatibility with inputs types like date, datetime-local, etc., so I did make <select> inputs for user to type in the date and time. Everything works fine, inputs are dynamic, so the user cannot choose the day that does not exist (like e.g. 02/29/2017), etc.
The problem is, I want to send form's data to the service and then to the Back-End of my app, but when I submit the form, values from <select> inputs are not included in the sent object, as well as my checkbox input. I'm not often using these types of inputs, so I'm sorry if this is a noobish question, but I cannot figure out what I'm doing wrong.
Here is the code:
<form #f="ngForm" (ngSubmit)="add(f.value)">
<div *ngIf="error">
<p>{{ error }}</p>
</div>
<div class="login-input-container">
<input type="text" placeholder="title" name="title" ngModel autocomplete="off" required minlength="1" maxlength="100">
</div>
<div class="login-input-container">
<div class="datetime-container">
<div>
<select #year name="year" (change)="showMonths(); selectedYear = year.value; yearDays(year.value);" required>
<option class="invisible" value="" disabled selected>year</option>
<option *ngFor="let year of years" [value]="year" placeholder="year">{{ year }}</option>
</select>
<select #month *ngIf="showedMonths" name="month" (change)="showDays(month.value, year.value); selectedMonth = month.value;" required>
<option class="invisible" value="" disabled selected>M</option>
<option *ngFor="let month of months" [value]="month">{{ month }}</option>
</select>
<select *ngIf="showedDays" name="day" (change)="showTime()" required>
<option class="invisible" value="" disabled selected>d</option>
<option *ngFor="let day of days" [value]="day">{{ day }}</option>
</select>
</div>
<div *ngIf="showedTime">
<select name="hours" required>
<option class="invisible" value="" disabled selected>hh</option>
<option *ngFor="let hour of hours" [value]="hour">{{ hour }}</option>
</select>
:
<select name="minutes" required>
<option class="invisible" value="" disabled selected>mm</option>
<option *ngFor="let minute of minutes" [value]="minute">{{ minute }}</option>
</select>
</div>
</div>
</div>
<div class="login-input-container">
<textarea id="todo-description" type="text" placeholder="description (optional)" name="description" ngModel autocomplete="off" minlength="1" maxlength="500"></textarea>
</div>
<div class="login-input-container">
<span><p>should we notify you?</p><label for="notify-1"><input id="notify-1" type="checkbox" [checked]="todo.notify" value="1"><span></span></label></span>
</div>
<div class="login-input-container">
<input type="submit" value="Submit" (click)="error = ''">
</div>
</form>
If you use [value] or [ngValue] you need to use [(ngModel)] or ngModel (ngModelChange)="showMonths()..." instead of `(change)="..."
This is my code:
<script type="text/javascript">
function goToNewPage ()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>
</head>
<body>
<header>
<nav>
<a href="gems.html">
<img src="gems-logo.png" alt="Gems Logo" height="120" width="150">
</a>
<ul>
<li>Home</li>
<select name="list" id="list" accesskey="target">
<option value='none' selected></option>
<option value="available-services.html">Available Services</option>
<option value="construction.html">Construction Cleaning</option>
<option value="maintenance.html">Maintenance Cleaning</option>
<option value="residential.html">Residential Cleaning</option>
<option value="office.html">Office Cleaning</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
<select name="drop" id="drop" accesskey="target">
<option value='none' selected></option>
<option value="about-gems.html">About Gems</option>
<option value="spring-fall.html">Spring/Fall Information</option>
<option value="application.html">Apply</option>
<option value="pricing.html">Pricing</option>
<option value="contact-us.html">Contact Us</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</ul>
</nav>
</header>
The two button types are yellow in notepad++ and the first drop down works but the second one is allowing me to select an option but the button isn't letting me go to the page that I select. I've tried to rename the button and to rename the button inside the code for example button1 but all that gave me was a type of search bar.
Right, I have sorted it for you but you are trying to do something you cannot do.
As I said, your dropdowns cannot have the same ID as any other element in the DOM or JS cannot find it.
Having two buttons call the same function expecting them to do different things is mental.
I have provided a modified version of your code below that works.
<html>
<head>
<title></title>
<script type="text/javascript">
var goToNewPage1 = function()
{
var url = document.getElementById('list1').value;
if(url != 'none') {
window.location = url;
}
}
var goToNewPage2 = function()
{
var url = document.getElementById('list2').value;
if(url != 'none') {
window.location = url;
}
}
</script>
</head>
<body>
<header>
<nav>
<a href="gems.html">
<img src="gems-logo.png" alt="Gems Logo" height="120" width="150">
</a>
<ul>
<li>Home</li>
</ul>
<select name="list1" id="list1" accesskey="target">
<option value="none" selected=""></option>
<option value="available-services.html">Available Services</option>
<option value="construction.html">Construction Cleaning</option>
<option value="maintenance.html">Maintenance Cleaning</option>
<option value="residential.html">Residential Cleaning</option>
<option value="office.html">Office Cleaning</option>
</select>
<input type="button" value="Go" onclick="goToNewPage()">
<select name="list2" id="list2" accesskey="target">
<option value="none" selected=""></option>
<option value="about-gems.html">About Gems</option>
<option value="spring-fall.html">Spring/Fall Information</option>
<option value="application.html">Apply</option>
<option value="pricing.html">Pricing</option>
<option value="contact-us.html">Contact Us</option>
</select>
<input type="button" value="Go" onclick="goToNewPage()">
</nav>
</header>
</body>
</html>
I have a bootstrap form and want to add a glyphicon before the SELECT fields.
However, it makes a breakline somewhy.
<form role="form" id="registration-form" onsubmit="return onSubmitContinueButton()">
<div class="row">
<div class="form-group col-md-6">
<label class="sr-only" for="xxx"></label>
<span class="glyphicon glyphicon-name"></span> <!-- <-- there is a breakline after this.... why?-->
<select class="form-control" name="aaa">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group col-md-6">
<label class="sr-only" for="xxx"></label>
<span class="glyphicon glyphicon-name"></span> <!-- <-- there is a breakline after this.... why?-->
<select class="form-control" name="aaa">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</form>
I want the glyphicon to be just near the select field and not above it.
How can I fix it?
Thanks
If you want to add icons in front of the select field make it an input group like this
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-plus"></span></span>
<select class="form-control" name="aaa">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
For more information look right here: Bootstrap input groups
I am wanting to concatenate a few form fields into a span or div area.
I have found a script on the web that works really well for me. But it concatenates the fields into another form field.
What do I need to change to tell it to put it in a span/div.
I have made a fiddle to help explain what Im after.
http://jsfiddle.net/3ZHfB/
Cheers in advance!!
Your fiddle updated with answer, see this.
1) Replace copyPassDetails textbox with a span/div:
<div class="field">
<label for="copyPassDetails">Full Name:</label>
<span id="fullName"></span>
</div>
2) Replace textbox' val() inside bind function with span's html():
$('#fullName').html($('#Title').val() + ' ' +
$('#First_Name').val() + ' ' +
$('#Last_Name').val() );
<form method="post" action="">
<div class="field">
<label for="Title">Title:</label>
<select name="Title" id="Title">
<option value="" selected="selected">Select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Revd">Revd</option>
<option value="Prof">Prof</option>
<option value="Judge">Judge</option>
</select>
</div>
<div class="field">
<label for="First_Name"> First Name:</label>
<input type="text" id="First_Name" name="First_Name" />
</div>
<div class="field">
<label for="Last_Name"> Last Name:</label>
<input type="text" id="Last_Name" name="Last_Name" />
</div>
<br>
<br>
<div class="field">
<label for="copyPassDetails">Full Name:</label>
<!-- <input type="text" id="copyPassDetails" name="address" /> -->
<div id="copyPassDetails"></div>
</div>
</form>
<script>
$('#Title, #First_Name, #Last_Name').bind('blur', function() {
$('#copyPassDetails').html($('#Title').val() + ' ' +
$('#First_Name').val() + ' ' +
$('#Last_Name').val() );
});
</script>
Try this, i have edited
<input type="text" id="copyPassDetails" name="address" /> this to
<div id="copyPassDetails"></div> and $('#copyPassDetails').val( to $('#copyPassDetails').html(
To put the value in <div><span> tags you need to use html and for
input val