I have created HTML widgets (Calculator) to calculate per hour manpower effort, On Submit how can I save this data in Drive data table.
Using this data wants to genrate the workflow email.
<div class="gap10"></div>
<div class="container">
<table class="table table-bordered data" >
<thead>
<tr>
<th colspan="4"><h3 style="text-align: left;margin-top:0px; margin-bottom:0px;">Technology Design Services</h3></th>
</tr>
<tr class="one">
<th>Service Area</th>
<th>Per Hour Rate</th>
<th>Number Of Hours</th>
<th>Total Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Contact Centre Expert</td>
<td><div class="form-group num">
<input name="" type="number" placeholder="" class="form-control input-md"id="PerHourRate1"type="text" value="2325" readonly>
</div></td>
<td><div class="form-group num">
<input name="" type="text" placeholder="" class="form-control input-md"value="0" id="rTpe1">
</div></td>
<td><div class="form-group num">
<input name="" type="text" placeholder="" class="form-control input-md"value="0" id="rFor1"readonly>
</div></td>
</tr>
<tr>
<td>Solution Design</td>
<td><div class="form-group num">
<input name="" type="number" placeholder="" class="form-control input-md"id="PerHourRate2"type="text" value="2762" readonly>
</div></td>
<td><div class="form-group num">
<input name="" type="text" placeholder="" class="form-control input-md"value="0"id="rTpe2">
</div></td>
<td><div class="form-group num">
<input name="" type="text" placeholder="" class="form-control input-md"value="0" id="rFor2"readonly>
</div></td>
</tr>
If you have Model with ServiceArea, PerHourRate, NumberOfHours fields then you can just drop a table on a page (table wizard allows to select which fields should be editable), add column for total rate and set binding for it to #datasource.item.PerHourRate * #datasource.item.NumberOfHours. With such setup changes made to NumberOfHours field will be automatically saved to database.
Note:
If you want to keep PerHourRate read only, be sure to implement server side validation for that in Model Events.
Related
i am working on wordpress and i get the location data of user like zip code i would like to know that i want to send this zip code to other page on button click. these are my form fields and i only want to show zip code on other page.
<div id="locationField">
<input id="autocomplete" type="text" placeholder="Enter your address" /></div>
<table id="address">
<tbody>
<tr style="display: none;">
<td class="label" style="display: none;">Street address</td>
<td class="slimField"><input id="street_number" class="field" style="display: none;" disabled="disabled" type="text" /></td>
<td class="wideField" colspan="2"><input id="route" class="field" style="display: none;" disabled="disabled" type="text" /></td>
</tr>
<tr style="display: none;">
<td class="label" style="display: none;">City</td>
<td class="wideField" colspan="3"><input id="locality" class="field" style="display: none;" disabled="disabled" type="text" /></td>
</tr>
<tr>
<td class="label" style="display: none;">State</td>
<td class="slimField"><input id="administrative_area_level_1" class="field" style="display: none;" disabled="disabled" type="text" /></td>
<td class="label">Zip code</td>
<td class="wideField"><input id="postal_code" class="field" disabled="disabled" type="text" /></td>
</tr>
<tr>
<td class="label" style="display: none;">Country</td>
<td class="wideField" colspan="3"><input id="country" class="field" style="display: none;" disabled="disabled" type="text" /></td>
</tr>
</tbody>
</table>
<input type="button" value="check" />
You can pass data from one page to another in many, many ways. The simplest and most fundamental way is the form html element.
For the purposes of this I'll assume you have two php pages or Wordpress templates, we'll call them start-page.php and finish-page.php.
start-page.php
<!-- If you are using wordpress the action would be
the url of the finish page, not the name of the php file -->
<form action="finish-page.php" method="POST">
<!-- The name attribute below is important -->
<input type="text" value="12345" name="postcode">
<!-- Instead of input type submit, you can also use button type submit -->
<input type="submit"/>
</form>
finish-page.php
<!--
the name in quotes in square brackets matches
the name attribute from the previous page -->
<?php echo $_POST['postcode'] ?>
I am using Bootstrap4 custom radiobutton and it works fine as long as I use Label text. Sometimes it makes no sense to have text, but then the radiobutton alone is dis-aligend. How can this be fixed?
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
Result:
Fiddle: https://jsfiddle.net/SchweizerSchoggi/51vrL8px/5/
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
Using a special character which does not print anything will allow you to get the proper alignment without showing any text next to the radio button.
My guess on why it messes up the styling is because of the ::before and ::after code that gets added to the text. If there is no text there is nothing to add the tags to.
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
Add mb-3 class on the empty label
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label mb-3" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
I am creating an spring-boot MVC web application.
When I get the contents from the controller I can display them correctly on the view. The content is an object with a List. The list is displayed on a table.
<form th:action="#{/}" th:object="${homeVO}" method="post">
<div align="center">
<table width="80%" id="sectionsTable">
<thead>
<th width="10%"><label class="tableTextTitle">ORDER</label></th>
<th width="50%"><label class="tableTextTitle">TITLE</label></th>
<th width="10%"></th>
<th width="10%"><label class="tableTextTitle">HIDE</label></th>
<th width="10%"></th>
<th width="10%"></th>
</thead>
<tbody>
<tr th:each="section, stat :${homeVO.sections}">
<td>
<input type="number" th:value="${section.id}" hidden="true" id="sectionid" />
<input type="number" class="form-control" th:value="${section.position}" id="position"/>
</td>
<td>
<input type="text" class="form-control" th:value="${section.name}" disabled="true" id="name"/>
</td>
<td align="center">
<a th:href="#{./sectionprofile(id=${section.id})}" class="btn btn-default">EDIT</a>
</td>
<td>
<input type="text" class="form-control" th:value="${section.column}" id="column"/>
</td>
<td>
<select class="form-control" id="condition">
<option value="0" th:selected="(${section.condition} == 0)"/>
<option value="1" th:text="#{minor}" th:selected="(${section.condition} == 1)"/>
<option value="2" th:text='#{minorEq}' th:selected="(${section.condition} == 2)"/>
<option value="3" th:text="#{different}" th:selected="(${section.condition} == 3)"/>
<option value="4" th:text='#{equals}' th:selected="(${section.condition} == 4)"/>
<option value="5" th:text='#{biggerEq}' th:selected="(${section.condition} == 5)"/>
<option value="6" th:text='#{bigger}' th:selected="(${section.condition} == 6)"/>
</select>
</td>
<td>
<input type="text" class="form-control" th:value="${section.criteria}" id="criteria"/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
Add Section
<input type="submit" class="btn btn-default" value="SAVE" />
</div>
</form>
When I change some values on the table I want to save them. When I save, I get in the controller the object with an empty List.
#RequestMapping(method = RequestMethod.POST)
public String set(HomeVO homeVO, Model model) {
if (homeVO != null) {
for (SectionVO sectionVO : homeVO.getSections()) {
Section section = sectionRepository.findOne(sectionVO.getId());
section.setPosition(sectionVO.getPosition());
section.setColumn(sectionVO.getColumn());
section.setCondition(sectionVO.getCondition());
section.setCriteria(sectionVO.getCriteria());
sectionRepository.save(section);
}
}
...
return "home";
}
What shall I do to get the table elements back into a List?
To accomplish this rows bindings properly follow the Thymeleaf Spring guide specificaly Dynamic Fields section. There is a special syntax so your HTML should be similar to this:
<tr th:each="row,rowStat : *{rows}">
<td th:text="${rowStat.count}">1</td>
<td>
<select th:field="*{rows[__${rowStat.index}__].variety}">
<option th:each="var : ${allVarieties}"
th:value="${var.id}"
th:text="${var.name}">Thymus Thymi</option>
</select>
</td>
<td>
<input type="text" th:field="*{rows[__${rowStat.index}__].seedsPerCell}" />
</td>
<td>
<button type="submit" name="removeRow"
th:value="${rowStat.index}" th:text="#{seedstarter.row.remove}">Remove row</button>
</td>
</tr>
I have this WTForms template which produces a simple form with text fields, radio buttons and a submit button.
{% extends "layout.html" %}
{% block content %}
<form action="{{ url_for('home') }}" method=post>
<h3>Part I,</h3><h4>G1</h4><div class="well span6">
{{ form.node_1.label }}
<form class="form-inline" role="form">
{% for subfield in form.freq_1 %}<tr><td>{{ subfield }}</td><td>{{ subfield.label }}</td></tr>{% endfor %}
</form></div><h4>G2</h4><div class="well span6">
{{ form.node_2.label }}
<form class="form-inline" role="form">
{% for subfield in form.freq_2 %}<tr><td>{{ subfield }}</td><td>{{ subfield.label }}</td></tr>{% endfor %}
</form></div>
<h3>Part II</h3>
<div class="well span6">
{{ form.extra1.label }} {{ form.extra1}}
{{ form.extra1Email.label }} {{ form.extra1Email }}
{{ form.extra1Group.label }} {{ form.extra1Group }}
<form class="form-inline" role="form">
{% for subfield in form.extra1Freq %}<tr><td>{{ subfield }}</td><td>{{ subfield.label }}</td></tr>{% endfor %}
</form>
</div>
<div class="well span6">
{{ form.extra2.label }} {{ form.extra2}}
{{ form.extra2Email.label }} {{ form.extra2Email }}
{{ form.extra2Group.label }} {{ form.extra2Group }}
<form class="form-inline" role="form">
{% for subfield in form.extra2Freq %}<tr><td>{{ subfield }}</td><td>{{ subfield.label }}</td></tr>{% endfor %}
</form>
</div>
{{ form.submit }}
</form>
{% endblock %}
Here's the html Flask produces:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">Title</h1>
<nav>
<ul class="menu">
<li>Home
</li>
<li>Network
</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<form action="/" method=post>
<h3>Part I,</h3>
<h4>G1</h4>
<div class="well span6">
<label for="node_1">First name 1 Last name 1</label>
<form class="form-inline" role="form">
<tr>
<td>
<input checked id="freq_1-0" name="freq_1" type="radio" value="0">
</td>
<td>
<label for="freq_1-0">1</label>
</td>
</tr>
<tr>
<td>
<input id="freq_1-1" name="freq_1" type="radio" value="1">
</td>
<td>
<label for="freq_1-1">2</label>
</td>
</tr>
<tr>
<td>
<input id="freq_1-2" name="freq_1" type="radio" value="7">
</td>
<td>
<label for="freq_1-2">3</label>
</td>
</tr>
<tr>
<td>
<input id="freq_1-3" name="freq_1" type="radio" value="30">
</td>
<td>
<label for="freq_1-3">4</label>
</td>
</tr>
<tr>
<td>
<input id="freq_1-4" name="freq_1" type="radio" value="183">
</td>
<td>
<label for="freq_1-4">5</label>
</td>
</tr>
<tr>
<td>
<input id="freq_1-5" name="freq_1" type="radio" value="365">
</td>
<td>
<label for="freq_1-5">6</label>
</td>
</tr>
</form>
</div>
<h4>G2</h4>
<div class="well span6">
<label for="node_2">First name 2 Last name 1</label>
<form class="form-inline" role="form">
<tr>
<td>
<input checked id="freq_2-0" name="freq_2" type="radio" value="0">
</td>
<td>
<label for="freq_2-0">1</label>
</td>
</tr>
<tr>
<td>
<input id="freq_2-1" name="freq_2" type="radio" value="1">
</td>
<td>
<label for="freq_2-1">2</label>
</td>
</tr>
<tr>
<td>
<input id="freq_2-2" name="freq_2" type="radio" value="7">
</td>
<td>
<label for="freq_2-2">3</label>
</td>
</tr>
<tr>
<td>
<input id="freq_2-3" name="freq_2" type="radio" value="30">
</td>
<td>
<label for="freq_2-3">4</label>
</td>
</tr>
<tr>
<td>
<input id="freq_2-4" name="freq_2" type="radio" value="183">
</td>
<td>
<label for="freq_2-4">5</label>
</td>
</tr>
<tr>
<td>
<input id="freq_2-5" name="freq_2" type="radio" value="365">
</td>
<td>
<label for="freq_2-5">6</label>
</td>
</tr>
</form>
</div>
<h3>Part II</h3>
<div class="well span6">
<label for="extra1">First and Last name:</label>
<input id="extra1" name="extra1" type="text" value="">
<label for="extra1Email">Email:</label>
<input id="extra1Email" name="extra1Email" type="text" value="">
<label for="extra1Group">Company or Group:</label>
<input id="extra1Group" name="extra1Group" type="text" value="">
<form class="form-inline" role="form">
<tr>
<td>
<input id="extra1Freq-0" name="extra1Freq" type="radio" value="1">
</td>
<td>
<label for="extra1Freq-0">1</label>
</td>
</tr>
<tr>
<td>
<input id="extra1Freq-1" name="extra1Freq" type="radio" value="7">
</td>
<td>
<label for="extra1Freq-1">2</label>
</td>
</tr>
<tr>
<td>
<input id="extra1Freq-2" name="extra1Freq" type="radio" value="30">
</td>
<td>
<label for="extra1Freq-2">3</label>
</td>
</tr>
<tr>
<td>
<input id="extra1Freq-3" name="extra1Freq" type="radio" value="183">
</td>
<td>
<label for="extra1Freq-3">4</label>
</td>
</tr>
<tr>
<td>
<input id="extra1Freq-4" name="extra1Freq" type="radio" value="365">
</td>
<td>
<label for="extra1Freq-4">5</label>
</td>
</tr>
</form>
</div>
<div class="well span6">
<label for="extra2">First and Last name:</label>
<input id="extra2" name="extra2" type="text" value="">
<label for="extra2Email">Email:</label>
<input id="extra2Email" name="extra2Email" type="text" value="">
<label for="extra2Group">Company or Group:</label>
<input id="extra2Group" name="extra2Group" type="text" value="">
<form class="form-inline" role="form">
<tr>
<td>
<input id="extra2Freq-0" name="extra2Freq" type="radio" value="1">
</td>
<td>
<label for="extra2Freq-0">1</label>
</td>
</tr>
<tr>
<td>
<input id="extra2Freq-1" name="extra2Freq" type="radio" value="7">
</td>
<td>
<label for="extra2Freq-1">2</label>
</td>
</tr>
<tr>
<td>
<input id="extra2Freq-2" name="extra2Freq" type="radio" value="30">
</td>
<td>
<label for="extra2Freq-2">3</label>
</td>
</tr>
<tr>
<td>
<input id="extra2Freq-3" name="extra2Freq" type="radio" value="183">
</td>
<td>
<label for="extra2Freq-3">4</label>
</td>
</tr>
<tr>
<td>
<input id="extra2Freq-4" name="extra2Freq" type="radio" value="365">
</td>
<td>
<label for="extra2Freq-4">5</label>
</td>
</tr>
</form>
</div>
<input id="submit" name="submit" type="submit" value="Send your form">
</form>
</div>
</body>
</html>
I use Bootstrap 3 to format the lists of buttons by attributing a class to parts of the form:
<form class="form-inline" role="form">
For some reasons, using these classes "breaks" my form, in that clicking the "submit" button doesn't register or lead anywhere. When I remove the above line (and their relative "") from the form, I am then able to submit.
What is wrong with my use of these Bootstrap classes? What is the proper way to use them?
This is the form I need to do:
For now I'm in this point:
As you can observe I need to create the input buttons bigger. Otherwise visually it will not work. My question would be how to create the input buttons bigger vertically and the input text stay centered vertically in middle of the box.
CSS solution would be the best.
This is my html code if it helps:
<form name="bookingform" action="form-to-email.php" method="post">
<div id="form_box" class="gradient">
<div id="center_box">
<h3>WANT TO BOOK ME?</h3>
<div id="form_data">
<br>
<table>
<tr>
<td><input type="text" value="Company name" name="company" /></td>
<td class="tdright"><input type="text" value="Name" name="name" /></td>
</tr>
<tr>
<td><input type="text" value="Telephone" name="telephone" /></td>
<td class="tdright"><input type="text" value="Email" name="email" /></td>
</tr>
<tr>
<td><input type="text" value="Booking date" name="date" /></td>
<td><input type="button" /></td>
</tr>
</table>
</div>
<div id="form_text">
<br>
<textarea rows="10" cols="40" name="message">Your text...</textarea>
<input type="submit" value="SEND" name="submit" />
</div>
<input type="image" src="" name="Send" />
</div>
</div>
</form>
input[type=button] {
height: 35px; /* increase the height */
line-height: 35px; /* vertically align the text */
}
DEMO