I am making a dynamic form with multiple fields in bootstrap and when I add a new inline form, it is not aligned with the previous one. I appreciate if someone can help me with that.
image of the form
html:
<!-- start of the column with properties(form-control)-->
<div class="col-lg-8" id="property-col">
<div class="container">
<form class="form">
<div class="row">
<h3>Properties</h3>
<br>
</div>
<div class="row">
<div class="form-group">
<fieldset class="form-inline">
<label class="control-label">Image Size:</label>
<select class="form-control" id="image-size-selector">
<option value="128">128×128</option>
<option value="256">256×256</option>
<option value="512">512×512</option>
<option value="1024">1024×1024</option>
</select>
</fieldset>
</div>
</div>
<div class="row" id="dynamic_form">
<div class="form-group form-horizontal">
<label>Primitives</label>
<div class="container">
<div class="form-inline" id="primitive_fields">
<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">
<option value=" " disabled selected>primitive</option>
<option value="sphere">sphere</option>
<option value="triangle">triangle</option>
</select>
<input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)">
<input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)">
<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]" >
<option value=" " disabled selected>color</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
</select>
<button type="button" class="btn btn-success btn-add" id="add_more"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
css:
.form-inline .input-mini
{
width: 70px;
font-weight: bold;
}
.form-inline .input-small
{
width: 120px;
font-weight: bold;
}
#primitive-form > *
{
margin: 2px 2px;
}
Hmmm maybe you need to create a codepen.
It seems align if not created dynamically.
http://codepen.io/seiran/pen/LWwWgX
Try to post your script.
//code is the same -- dont mind this
I think you are asking this type of format here i executed with the single input so you can add your own new things.
The fieldset is closed on the first form itself just cut the fieldset there with the belowed two div and paste at the end.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
var next = 1;
$(".add-more").click(function(e){
e.preventDefault();
var addto = "#field" + next;
var addRemove = "#field" + (next);
next = next + 1;
var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';
var newInput = $(newIn);
var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
var removeButton = $(removeBtn);
$(addto).before(newInput);
$(addRemove).before(removeButton);
$('.remove-me').click(function(e){
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length-1);
var fieldID = "#field" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<input type="hidden" name="count" value="1" />
<div class="controls" id="profs">
<form class="input-append">
<div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Related
Spreadsheet:
The html data entry:
I have been working on this for 8 hours, I cannot figure it out.
I have a website that I am uploading items to be sold. I have a Google sheet that I am keeping track of this information. We will have probably over 3,000 items to sell, so this html would be a lifesaver!
I however cannot get it to populate into my Google sheets. It runs, I don't get error messages, it just won't populate in my sheet.
This is my sheet, it is open
I am teaching myself how to do the website myself, I only have about 3 or 4 months under my belt. Any help would be WONDERFUL!
Code GS
function doGet(request) {
return HtmlService.createTemplateFromFile("Index").evaluate();
}
/* #Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
/* #Process Form */
function processForm(formObject) {
var url =
"https://docs.google.com/spreadsheets/d/1uF5YBKyfVxvrA4QrUuRqHrxe7C1qEySIxAL_r-PkBIQ/edit#gid=1180254005";
function processForm(formObject) {
var ss = SpreadsheetApp.getActive();
var ws = ss.getSheetByName("Data");
ws.appendRow([
formObject.location,
formObject.itemNumber,
formObject.name,
formObject.description,
formObject.price,
formObject.markedDown,
formObject.pricePaid,
formObject.category,
formObject.sold,
formObject.postedOnline,
]);
}
}
Index.html
<!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">
<?!= include('JavaScript'); ?>
</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 font-weight-bold">Seattle Bound Data</p>
<!-- Row 1 -->
<div class="form-row">
<div class="form-group col-md-4 font-weight-bold">
<label for="first_name">Location</label>
<input type="text" class="form-control" id="location" name="location" placeholder="Location">
</div>
<div class="form-group col-md-4 font-weight-bold">
<label for="itemNumber">Item Number</label>
<input type="text" class="form-control" id="itemNumber" name="itemNumber" placeholder="Item Number">
</div>
<div class="form-group col-md-4 font-weight-bold">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<!-- Row 1 -->
<!-- Row 2 -->
<div class="form-row">
<div class="form-group col-lg-12 font-weight-bold">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" name="description" placeholder="Description">
</div>
</div>
<!-- Row 2 -->
<!-- Row 3 -->
<div class="form-row">
<div class="form-group col-md-4 font-weight-bold">
<label for="price">Price</label>
<input type="number" class="form-control" id="price" name="price" placeholder="$00.00">
</div>
<div class="form-group col-md-4 font-weight-bold">
<label for="markedDown">Marked Down</label>
<input type="number" class="form-control" id="markedDown" name="markedDown" placeholder="$00.00">
</div>
<div class="form-group col-md-4 font-weight-bold">
<label for="pricePaid">Price Paid</label>
<input type="number" class="form-control" id="pricePaid" name="pricePaid" placeholder="$0.00">
</div>
</div>
<!-- Row 3 -->
<!-- Row 4 -->
<div class="form-row">
<div class="form-group col-sm-6 font-weight-bold">
<label for="categories">Categories</label>
<div class="form-check form-check-inline">
<select name="categories">
<option value="media">Media</option>
<option value="tools">Tools</option>
<option value="clothes">Clothes</option>
<option value="bears">Bears</option>
<option value="misc">Misc</option>
<option value="electronics">Electronics</option>
</select>
<div class="form-group col-sm-6 font-weight-bold">
<p>Sold</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sold" id="true" value="true">
<label class="form-check-label" for="true">True</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sold" id="false" value="false">
<label class="form-check-label" for="false">False</label>
</div>
</div>
<div class="form-group col-sm-6 font-weight-bold">
<p>Posted Online</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="postedOnline" id="true" value="true">
<label class="form-check-label" for="true">True</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="postedOnline" id="false" value="false">
<label class="form-check-label" for="false">False</label>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
JavaScript.html
<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>
I was able to run the code but with few corrections.
In app script, inside the pocessForm() function you are again declaring a new function with the same name, which is unnecessary and your code does not run because of this. So you should remove the outer function and just keep inner one.
When you deploy your app, the activeSheet function does not work. Instead, use
SpreadsheetApp.openById("")
and give the id of the spreadsheet which you can find in the link of the spreadsheet. These will be the alphanumeric character string. For your sheet it's this - "1uF5YBKyfVxvrA4QrUuRqHrxe7C1qEySIxAL_r-PkBIQ".
function doGet(request) {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* #Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
/* #Process Form */
function processForm(formObject) {
Logger.log(JSON.stringify(formObject));
// var ss = SpreadsheetApp.getActive(); // incorrect
const ss = SpreadsheetApp.openById("");
const ws = ss.getSheetByName('Data');
ws.appendRow([formObject.location,
formObject.itemNumber,
formObject.name,
formObject.description,
formObject.price,
formObject.markedDown,
formObject.pricePaid,
formObject.category,
formObject.sold,
formObject.postedOnline]);
}
And this works.
Suggestion - You may want to handle the form validation. Currently, if a user submits the form with any empty field, app script throws error. Easy way to handle this is by making each input field required in html.
I have a form where I would like my users to add max 3 of languages skills and languages levels. I would like to only show it one and let user click to add one more (add one more "profile2" div, max add 3). I did not find anyway to do it.
my html code:
<div class="container">
<div class="profile2">
<label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"> </select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
</select>
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
</div>
</div>
script
<script>
$("#btnAddLanguage").click(function () {
$('#container').append("<div class="profile2">
<label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"> </select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
</select>
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
</div>");
});
</script>
is this what you need ? please check this.
<script>
$("#btnAddLanguage").click(function () {
var $appendItem = $('.profile2').html();
$($appendItem).appendTo('.profile2');
});
</script>
<div class="profile2">
<label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"></select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
</select>
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
</div>
I cannot get the my HttpPost action to fire.
In HomeController.cs I have the following:
public ActionResult TestForm()
{
return View();
}
[HttpPost]
public ActionResult TestForm(TestForm testForm)
{
int x = 1;
return View();
}
In my View code I build my form with
#using (Html.BeginForm())
{
....
}
The rendered HTML is
<form action="/Home/TestForm" method="post"> <div style="display: table">
<div style="display: table-row">
<div style="display: table-cell"><label for="Cmd">CMD String</label></div>
<div style="display: table-cell">
<input class="CmdForm" id="Cmd" name="Cmd" type="text" value="" />
</div>
</div>
<div style="display: table-row">
<div style="display: table-cell"><label class="MacAddress" for="MacAddress">MAC Address</label></div>
<div style="display: table-cell">
<input id="MacAddress" name="MacAddress" type="text" value="" />
</div>
</div>
<div style="display: table-row">
<div style="display: table-cell"></div>
<div style="display: table-cell">
<input type="button" value="Submit"/>
</div>
</div>
</div>
I've put a break point at int x=1; just to see if it's hitting the function on button click but it does not hit it. Can someone give me some tips on what I might be missing?
You put a button for submission which is not of the right type. You should use submit as a type, not button.
Change the following code from
<div style="display: table-cell">
<input type="button" value="Submit"/>
</div>
to
<div style="display: table-cell">
<input type="submit" value="Submit"/>
</div>
Anyone who can explain how this would be done in bootstrap?
First try was with 2 inline forms, but then the search button screws it up...
So i was thinking on a combination of an inline and a horizontal form.
Any ideas how to do this?
My guess here is that you want to do this with as much bootstrap markup as possible and as little custom styling as possible, and in that case I would do it like so:
HTML:
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal">
<div class="row">
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="search" class="col-sm-2 control-label">Find</label>
<div class="col-sm-10">
<input type="search" class="form-control" placeholder="What are you searching for?"/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">in</label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="Postcode"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">under</label>
<div class="col-sm-10">
<select class="form-control">
<option>All categories</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
<option>Category 5</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select class="form-control">
<option>Within 20 miles of</option>
<option>Within 30 miles of</option>
<option>Within 40 miles of</option>
<option>Within 50 miles of</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 cover-col">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-search"></i> Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
CSS:
.panel-default {
background-color: #e6ed9f;
}
.cover-col {
height: 6em;
}
.cover-col .btn {
display: block;
width: 100%;
height: 100%;
padding-left: 15px;
padding-right: 15px;
}
.cover-col .form-group {
height: 100%;
margin-bottom: 0;
}
.cover-col .form-group > div {
height: 100%;
}
JSFIDDLE
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