I'm trying to write a simple fuel consumption calculator with user inputs. I'm having trouble to make the calculation.
It should be:
100 x Fuel spent liters(L) รท Kilometers (km) driven
I've done inputs and tried different types of calculations, but nothing is working. Here is what I have so far on my index view:
<h1>Fuel Consumption Calculator</h1>
<div class="calculator">
<div class="form-group">
<label for="no1">Liters (l):</label>
<input type="text" class="form-control" id="no1" />
</div>
<div class="form-group">
<label for="no2">Kilometers driven: (km)</label>
<input type="text" class="form-control" id="no2" />
</div>
<input type="submit" value="Laske" name="tot">
<div class="form-group">
<label for="tot">Total:</label>
<input type="text" class="form-control" id="tot" name="tot" />
</div>
</div>
Do you guys have any tip?
Related
I am new to C# and .NET MVC. I have a View page with a radio button with two options, those are tied to a controller. When I try to add a new radiobutton by copying the radio button code in the View page, the newly added radiobuttons act like a continuation of the existing radiobuttons with the same input. I would like to differentate both radio buttons and use the input from the newly added radiobuttons elsewhere. Parts from my controller and Viewpage are below. Please ask me if you need more information.
Viewpage:
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
// ....
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="3" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="4" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
When I add the second radiobutton with values 3 and 4, I want it to be treated as a different input, not the same as the first radiobutton.
Can you help me with this?
Thanks!
You will need to give the second radio button a different name, so in the below code I have given it the name="radiobtn2"
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn2" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
So within a form no two radio buttons should have the same name attribute if you want them to perform different actions.
I would also suggest reading id vs. name
Try this solution , it should fix your problem, it seems you are referring two different ratio buttons with same name radiobtn. that is causing issue.
Here i updated two radio buttons names like
<input type="radio" name="radiobtnFirst" value="3" class="clsradio" />
<input type="radio" name="radiobtnSecond" value="4" class="clsradio" />
Complete Form:
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
// ....
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtnFirst" value="3" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtnSecond" value="4" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
so i have this searchkick running fine and perfect.
However i'm wanting to add filters, Just something to filter down the data. I've seen that searchkick has something to do with aggerations.
Heres what i have
<div class="panel-body" style="color: #1292fd; font-weight:bold">
<label for="datefrom">Date From:</label>
<input type="date" id="datefrom" class="form-control" name="date" value="dd/mm/yyyy">
<label for="dateto">Date To:</label>
<input type="date" id="dateto" class="form-control" name="date" value="dd/mm/yyyy">
<div style="float:right">
<button class="btn btn-info" name="button">Apply Filters</button>
</div>
</div>
I'm wanting as you can see all this to work in the way that the date from / to is compared against the column date in the Event table.
Thanks
Sam
I have a shiny app that conducts t-test between two independent samples. Based on a radio button choice, you can either input summary statistics (\bar{x}, sd, n) for both samples, or you can copy/paste or type in the values of each sample. The renderUI function looks something like this:
output$ui<-renderUI({
switch(input$option,
"Summary Stats" =
c(textInput("barx1","$$\\bar{x}_1$$", "0"),
textInput("picksd1", "$$sd_1$$", "1"),
textInput("n1","$$n_1$$","10"),
textInput("barx2", "$$\\bar{x}_2$$","1"),
textInput("picksd2", "$$sd_2$$","1"),
textInput("n2","$$n_2$$","10")),
"Input Data" = c(tags$textarea(id="foo1", rows=10, cols=38), tags$textarea(id="foo2", rows=10, cols=38)))
})
The textInputs render and work fine in the UI, but the text boxes don't, any help here? I have something very similar for a one sample case, where foo1 works fine, the problem seems to be that I want two text boxes and maybe that I have them stored in c() form, though this works fine for the textInputs. Thanks in advance for any help.
I managed to make this work by using html code instead of "tags". Not sure why tags$textarea didn't work when used in c(tags$textarea, tags$textarea) form but this looks a lot cleaner anyway:
output$ui<-renderUI({
switch(input$option,
"Summary Stats" = HTML(
'<div class="form-group shiny-input-container">
<label for="barx1">$$\\bar{x}_1$$</label>
<input id="barx1" type="text" class="form-control" value="0"/>
</div>
<div class="form-group shiny-input-container">
<label for="picksd1">$$sd_1$$</label>
<input id="picksd1" type="text" class="form-control" value="1"/>
</div>
<div class="form-group shiny-input-container">
<label for="n1">$$n_1$$</label>
<input id="n1" type="text" class="form-control" value="10"/>
</div>
<div class="form-group shiny-input-container">
<label for="barx2">$$\\bar{x}_2$$</label>
<input id="barx2" type="text" class="form-control" value="1"/>
</div>
<div class="form-group shiny-input-container">
<label for="picksd2">$$sd_2$$</label>
<input id="picksd2" type="text" class="form-control" value="1"/>
</div>
<div class="form-group shiny-input-container">
<label for="n2">$$n_2$$</label>
<input id="n2" type="text" class="form-control" value="10"/>
</div>'
),
"Input Data" = HTML(
'<div class="form-group shiny-input-container">
<label for="foo1">Sample 1</label>
<textarea id="foo1" rows="10" cols="38"></textarea>
</div>
<div class="form-group shiny-input-container">
<label for="foo2">Sample 2</label>
<textarea id="foo2" rows="10" cols="38"></textarea>
</div>'
))
})
I am using the acts-as-taggable gem in a Rails 4 app with an angular frontend. If I use the console it works fine. I have done all the obvious things and I can get it to work by adding this to the create controller:
if params[:tag_list]
droplet.tag_list.add(params[:tag_list], parse: true)
end
The problem is that it should be doing this anyway. Does anyone have any insight as to why it is simply not firing the tag_list.add method automatically? I am uncomfortable using this hack to get it to work.
And yes, I have added :tag_list to the strong parameters.
Update: The form html
<form ng-submit="createNewDropletForm.$valid && createNewDroplet()" name="createNewDropletForm" novalidate>
<div class="form-group">
<label for="name">Title:</label>
<input ng-keyup="keyup()" ng-model="drop.name" ng-model-options="{ debounce: 500 }" type="text" class="form-control" placeholder="Add Droplet Title Here" required>
</div>
<div class="form-group">
<label for="description">Description:</label>
<textarea class="form-control" rows="4" ng-model="drop.description" placeholder="Add helpful description of what this droplet tests." required></textarea>
</div>
<div class="form-group">
<label for="tags">Tags:</label>
<input class="form-control" ng-model="drop.tag_list" placeholder="add tags separated by commas">
</div>
<button type="submit" class="btn btn-default">Next</button>
</form>
I need some advice how is a recommended way to handle Twitter Bootstrap fields with Thymeleaf. I know that recommendations are not so easy, so I wrote my thoughts about it and hope you can comment it. At the end there a some concrete questions.
First I tried a fragment which shows what is needed to generate
<div th:fragment="textfield">
<div class="control-group"
th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName
</label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
which can be used with
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag">
<label class="control-label replace">Benutzer-Id</label>
<div class="controls replace">
<input type="text" value=""/>
</div>
</div>
or in short
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag"/>
It's not very flexible about the input, so you need for a checkbox an own fragment.
Next I choose the layout-approach:
<div layout:fragment="bsfield">
<div class="control-group" th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName </label>
<div class="controls">
<span layout:fragment="bsinput" th:remove="tag">
<input type="text" class="replace" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</span>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
Which is very flexible because I can define my input directly.
I can use it shortly with
<div layout:include="templates::bsfield" th:with="fId='firstName'" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
or more prototype style
<div class="control-group" layout:include="templates::bsfield" th:with="fId='lastName'" th:remove="tag">
<label class="control-label" th:remove="all">Last Name</label>
<div class="controls" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
</div>
Both variants has still a lot of boilerplate. So I think about the following solution inspired by Playframework helper.
<input type="text" th:bsfield="firstName" th:disabled="${disabled}"/>
and writing a Processor which creates
<div class="control-group"
th:classappend="${#fields.hasErrors('${fId}')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.${fId}}+':'">
FirstName </label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{${fId}}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('${fId}')}"
th:errors="*{${fId}}"></span>
</div>
</div>
and replace ${fId} with the value of bsfield in this example "firstname". After that Thymeleaf should recompute it (setRecomputeProcessorsImmediately (true);) For the prototype I think it's necessary to write a JS-Solution.
I'm unsure if this is really clever or a misuse of Processors. Furthermore I'm unsure how much time a beginner need to write such a processor. Are 4 hours realistic or more a few days?
Would appreciate if someone can give me a hint.
In the meantime I did it. As a beginner you must calculate 4-8 hours, without JUnit tests (it looks difficult to test processors) and DTD and editor-support. The most problems I had was that it's difficult to reuse an existing node after changing attributes. Here it's better to clone it.
Next time I think I can do it in 1 or 2 hours.
The experience is very good, you have clean and short code. With the JS-File you don't lose the prototyping experience.