I have been tyring to create a form that a customer could enter the size of their yard and get a quote. If i only use one formula with no if else it works fine, but when I add the other formula options to create accurate pricing I get no results. I have read multiple suggestions and have tried any i could fine with no avail.
<head>
<title>Test</title>
</head>
<body>
<form name="Instant Quote">
<table border="1" width="300" height="200" cellpadding="10" cellspacing="3">
<tr>
<th colspan="2">
<h1>Instant Quote</h1>
</th>
</tr>
<tr>
<th>
<h3>Square Footage of Yard</h3>
</th>
<th>
<input type="number" name="INPUT1" id="input" onchange="calculate();"/>
</th>
</tr>
<tr>
<th>
<h3>Cost per treatment</h3>
</th>
<th>
<input type="number" name="OUTPUT1" id="output">
</th>
</tr>
<tr>
</tr>
</table>
</form>
<script type="text/javascript">
function calculate() {
var USERINPUT1 = document.TESTING.INPUT1.value,
if (USERINPUT1 >=0 && USERINPUT1 <= 5000) {
RESULT = (USERINPUT1*.005) + 25;
} else if (USERINPUT1 >=5001 && USERINPUT1 <= 10000) {
RESULT = (USERINPUT1*.0045) + 25;
} else {
RESULT = (USERINPUT1*.004) + 25;
}
document.TESTING.OUTPUT1.value = RESULT;
}
</script>
<body>
At the end of you USERINPUT1 declaration you probably want a semi-colon instead of a comma.
document.TESTING.INPUT1 doesn't exist on the DOM, you can probably use document.getElementById("input") instead.
function calculate() {
var USERINPUT1 = document.getElementById("input").value;
if (USERINPUT1 >=0 && USERINPUT1 <= 5000) {
RESULT = (USERINPUT1*.005) + 25;
} else if (USERINPUT1 >=5001 && USERINPUT1 <= 10000) {
RESULT = (USERINPUT1*.0045) + 25;
} else {
RESULT = (USERINPUT1*.004) + 25;
}
document.getElementById("output").value = RESULT;
}
<form name="Instant Quote">
<table border="1" width="300" height="200" cellpadding="10" cellspacing="3">
<tr>
<th colspan="2">
<h1>Instant Quote</h1>
</th>
</tr>
<tr>
<th>
<h3>Square Footage of Yard</h3>
</th>
<th>
<input type="number" name="INPUT1" id="input" onchange="calculate();"/>
</th>
</tr>
<tr>
<th>
<h3>Cost per treatment</h3>
</th>
<th>
<input type="number" name="OUTPUT1" id="output">
</th>
</tr>
<tr>
</tr>
</table>
</form>
Related
I have the following view which returns some text if the POnumber is null.
What I think I need to have instead of the if(Model.Invoice.PONumber == null) is a check mechanism ( maybe multiple if statements ) that will check the fields LineNumber, Description, UnitOfMeasure, QtyOrdered and if any of them is null it will replace it with N/A or empty space but it will still allow the user to see the rest of information available.
Do you have any sugestions? I am new to MVC and any help will be apreciated.
Thank you in advance for your time and help,Bobby
<div class="contentWrapper2">
<div class="content2">
<div class="clr lfl w100">
<h1>Invoice Detail</h1>
<div class="return-btn">
<a class="btn btnStyleC btn-back-invoice" href="#Url.Action("InvoiceHistory", "Account")">
Back to Invoice List</a>
</div>
</div>
#if (Model.ErpError.Length > 0)
{
<div class="clr lfl w100 error">
#Html.Raw(Model.ErpError)
</div>
}
else
{
if(Model.Invoice.PONumber == null)
{
<div class="lfl w100 clr messaging">
<p>No information available at the moment for current invoice.
Please call our sales department for further assistance.
</p>
</div>
}
else
{
<div class="clr lfl w100">
<div class="order-number-date">
<table>
<tr>
<th class="col-1">
<h3>Invoice #:</h3>
</th>
<td class="col-2">
<h3>#Model.Invoice.InvoiceNumber</h3>
</td>
</tr>
<tr>
<th class="col-1">
<h3>Invoice Date:</h3>
</th>
<td class="col-2">
<h3>#Model.Invoice.InvoiceDate.ToShortDateString()</h3>
</td>
</tr>
</table>
</div>
<div class="order-number-date">
<table>
<tr>
<th class="col-1">
<h3>Order #:</h3>
</th>
<td class="col-2">
<h3>#Model.Invoice.OrderNumber</h3>
</td>
</tr>
<tr>
<th class="col-1">
<h3>PO #:</h3>
</th>
<td class="col-2">
<h3>#Model.Invoice.PONumber</h3>
</td>
</tr>
<tr>
<th class="col-1">
<h3>Due Date:</h3>
</th>
<td class="col-2">
<h3>#Model.Invoice.DueDate.ToShortDateString()</h3>
</td>
</tr>
</table>
</div>
</div>
<div class="clr lfl w100">
<div class="bill-ship">
<table>
<tr>
<th>
<h4>Billing Information</h4>
</th>
</tr>
<tr>
<td>#Model.Invoice.BTDisplayName
</td>
</tr>
<tr>
<td>
<#Html.Raw(Model.Invoice.BTAddress1)
</td>
</tr>
#if (!string.IsNullOrEmpty(Model.Invoice.BTAddress2))
{
<tr>
<td>#Html.Raw(Model.Invoice.BTAddress2)
</td>
</tr>
}
<tr>
<td>#Html.CityCommaStateZip(Model.Invoice.BTCity, Model.Invoice.BTState, Model.Invoice.BTZip)</td>
</tr>
<tr>
<td>#Model.Invoice.BTCountry
</td>
</tr>
<tr>
<td>#Model.Invoice.BTPhone1</td>
</tr>
<tr>
<td>#Model.Invoice.BTEmail
</td>
</tr>
</table>
</div>
</div>
if (Model.Invoice.InvoiceLines.Count > 0)
{
<div class="clr lfl w100 line-item-detail">
<table class="info-tbl">
<tr>
<th class="vid-item">Item #</th>
<th class="vid-desc">Description</th>
<th class="vid-um">
U/M
</th>
<th class="vid-qty">
Qty
</th>
<th class="vid-ship">
Ship Date
</th>
#if (Model.ShowPackslip)
{
<th class="vid-pack">Pack Slip</th>
}
<th class="vid-unit">Unit Price</th>
<th class="vid-ext">Ext Price</th>
</tr>
#foreach (var invoiceLine in Model.Invoice.InvoiceLines)
{
<tr>
<td class="vid-line">#invoiceLine.LineNumber</td>
<td class="vid-desc">#invoiceLine.Description</td>
<td class="vid-um">#invoiceLine.UnitOfMeasure</td>
<td class="vid-qty">#invoiceLine.QtyOrdered</td>
<td class="vid-ship">
#if (invoiceLine.ShipDate.ToShortDateString() == "1/1/0001")
{
}
else
{
#invoiceLine.ShipDate.ToShortDateString()
}
</td>
#if (Model.ShowPackslip)
{
<td class="vid-pack">
#invoiceLine.PackSlip
</td>
}
<td class="vid-unit">#invoiceLine.UnitPrice.ToCurrency()
</td>
<td class="vid-ext">#invoiceLine.ExtendedPrice.ToCurrency()
</td>
</tr>
}
</table>
</div>
}
<div class="clr lfl w100">
<table class="tbl-total">
<tr class="subtotal">
<th class="col-1">Subtotal</th>
<td class="col-2">#Model.Invoice.OrderSubTotal.ToCurrency()
</td>
</tr>
#if (Model.Invoice.DollarOffOrder > 0)
{
<tr>
<th class="col-1">Order Discount</th>
<td class="col-2">#Model.Invoice.DollarOffOrder.ToCurrency()</td>
</tr>
}
#if (Model.Invoice.ShippingAndHandling > 0)
{
<tr>
<th class="col-1">Shipping</th>
<td class="col-2">#Model.Invoice.ShippingAndHandling.ToCurrency()
</td>
</tr>
}
#if (Model.Invoice.MiscCharges > 0)
{
<tr>
<th class="col-1">Misc. Charges</th>
<td class="col-2">#Model.Invoice.MiscCharges.ToCurrency()</td>
</tr>
}
<tr>
<th class="col-1">Sales Tax</th>
<td class="col-2">#Model.Invoice.TotalTax.ToCurrency()</td>
</tr>
<tr>
<th class="col-1">Invoice Total</th>
<td class="col-2">#Model.Invoice.InvoiceTotal.ToCurrency()</td>
</tr>
</table>
</div>
<div class="clr lfl w100">
<a class="btn btnStyleB btn-print" href="javascript:window.print();">Print</a>
</div>
}
}
</div>
</div>
You could create a template called for example "nullcheck.cshtml" like:
#if (ViewBag.ValueToCheck == null) {
<div class="lfl w100 clr messaging">
<p>
No information available at the moment for #(ViewBag.Field).
Please call our sales department for further assistance.
</p>
</div>
}
else {
#Html.Partial(ViewBag.TargetTemplate, Model)
}
Then you call it from your main view:
#{
ViewBag.TargetTemplate = "okModel";
ViewBag.Field = "P.O.Number";
ViewBag.ValueToCheck = Model.Invoice.PONumber;
Html.RenderPartial("nullCheck", Model, ViewBag);
}
okModel.cshtml should be the part of your template you will display when the value is not null...
I haven't tested this myself but it should give you some ideas... contact me if things go wrong XD
Cheers!
This seems like something you should take care of in your controller.
public ActionResult YourControllerAction()
{
var myViewModel = SomeService.GetMyViewModel();
if (myViewModel.Invoice.PONumber == null)
{
myViewModel.Invoice.PONumber = "N/A";
}
//etc
}
This leaves your view clearer (my personal preference)
However in the view you could simply use the null coalescing operator like so:
#Model.Invoice.PONumber ?? "NA"
i have a table that is "supposed" to be binded with the result of a json:
<table>
<thead>
<tr>
<th>
Id
</th>
<th>
Number
</th>
<th>
Name
</th>
<th>
Password
</th>
<th>
Role
</th>
</tr>
</thead>
<tbody data-bind="foreach: Employees">
<tr>
<td>
<span data-bind="text: EmployeeId"></span>
</td>
<td>
<span data-bind="text: EmployeeNumber"></span>
</td>
<td>
<span data-bind="text: EmployeeName"></span>
</td>
<td>
<span data-bind="text: EmployeePassword"></span>
</td>
<td>
<span data-bind="text: EmployeeRole"></span>
</td>
</tr>
</tbody>
my knockout script for that is this:
<script type="text/javascript">
$(document).ready(function () {
var viewModel = {};
var data = $.getJSON("Employees.json", function (data) {
viewModel.model = ko.mapping.fromJSON(data);
ko.applyBindings(viewModel);
}
);
});
</script>
i am trying to bind the table with the json result but it is not working, where could be the problem... here is my json in controller:
public ActionResult GetEmployees()
{
var r = db.Employees;
var s = new
{
Employees = r.Select(x => new { empId = x.Id, empName = x.Name, empNumber = x.Number, empPassword = x.Password, empRole = x.Role }).ToList()
.Select(x => new
{
EmployeeId = x.empId,
EmployeeName = x.empName,
EmployeeNumber = x.empNumber,
EmployeePassword = x.empPassword,
EmployeeRole = x.empRole
}).ToArray(),
};
return Json(s, JsonRequestBehavior.AllowGet);
}
UPDATE: here is my sample returned json data:
{"Employees":[{"EmployeeId":1,"EmployeeName":X","EmployeeNumber":"1","EmployeePassword":"x","EmployeeRole":"User"},{"EmployeeId":10,"EmployeeName":"S","EmployeeNumber":"21","EmployeePassword":"s","EmployeeRole":"Admin"}]}
Assuming everything server side is fine, your model is being bound to a .model property but so your foreach should be
<tbody data-bind="foreach: model.Employees">
That's all I can see right now, will need to see more code to help further.
You may want to use firebug or chrome dev tools and confirm what javascript errors you are receiving if any, also check the response to make sure your action method is returning data.
EDIT
OK here is a jsfiddle of your code. A few things, probably typos but just in case. Missing tag in your markup and there is a un-terminated comment in your json before the first EmployeeName.
http://jsfiddle.net/madcapnmckay/3rRUQ/1/
You do need to the model.Employees as stated above. Because you are returning json from mvc it will have the correct headers so jquery will convert it to a javascript object automatically so no need for the fromJSON, instead try fromJS.
Hope this helps.
<script id="tmpl_ScreenNavigation" type="text/html">
<tr class="erow">
{{if ScreenParentNevigationId}}
<td width="250px"><table cellpadding="5" class="Permission" sceenid="${ScreenNevigationId}" border="0" RoleDetailId="0"><tr><td><label><input type="checkbox" id="view${ScreenNevigationId}" class="View" /> View</label></td><td><label><input type="checkbox" id="AddModify${ScreenNevigationId}" class="Save"/> Add/Modify</label></td><td><label><input type="checkbox" id="Delete${ScreenNevigationId}" class="Delete" /> Delete</label></td></tr></table></td>
{{/if}}
{{if !ScreenParentNevigationId}}
<td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}} width="250px"><table cellpadding="5" class="Permission" sceenid="${ScreenNevigationId}" border="0" RoleDetailId="0"><tr><td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}><label><input type="checkbox" id="view${ScreenNevigationId}" class="View" /> View</label></td></tr></table></td>
{{/if}}
<td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}>${ScreenName}</td>
<td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}>${ScreenDescription}</td>
</tr>
</script>
$("#tmpl_ScreenNavigation").tmpl(resultJson).appendTo("#tblRoles");
Change the location of your JavaScript tag to the top of the html file just above the table. The data might not be populating correctly because of that.
Sometime working and sometime not.
I am trying to generate Grid with the help of JQuery Template via Ajax once record is added or deleted. In js file
$('.gridRow').remove();
is not working properly. Someone tell me how to reset grid to fill it again. Below is the code.
JS File
var ReloadGrid = (function(){
$.getJSON("/HeaderMenu/GetHeaderGrid", function(data) {
$('.gridRow').remove();
(data.length <= 0) ? $("#gridBtn").hide() : $("#gridBtn").show();
for (var i=0; i<data.length; i++) { data[i].num = i+1; }
$('#gridTemplate').tmpl(data).appendTo('table.gridTable > tbody');
});
});
on MVC3 cxhtml page
<script id="gridTemplate" type="text/x-jquery-tmpl">
<tr class="gridRow">
<td class="cellTd ">
<input type="checkbox" id="deleteCb" />
<input type="hidden" id="Id_ + ${num}" class="idField" value="${Id}" />
</td>
<td class="cellTd">
<input id="index" name="index" class="numberField" type="text" value="${IndexOrder}" />
</td>
<td class="cellTd">${DisplayName}</td>
<td class="cellTd ">${UrlName}</td>
<td class="cellTd ">
<input type="checkbox" id="activeCb" {{if Active}} checked{{/if}} />
</td>
</tr>
</script>
<div class="gridDiv">
<table class="gridTable" cellspacing="0" cellpadding="0">
<tbody>
<tr class="gridTitleRow">
<td class="iconLink width36">Delete</td>
<td class="iconLink width60">Sort Order</td>
<td class="iconLink widthAuto">Display Name</td>
<td class="iconLink widthAuto">Url Name</td>
<td class="iconLink widthAuto">Active</td>
</tr>
</tbody>
</table>
</div>
I usually empty the wrapper instead of the row.
$('table.gridTable > tbody').empty();
But for that to work you'd have to change your table to use thead
<table class="gridTable" cellspacing="0" cellpadding="0">
<thead>
<tr class="gridTitleRow">
<th class="iconLink width36">Delete</th>
<th class="iconLink width60">Sort Order</th>
<th class="iconLink widthAuto">Display Name</th>
<th class="iconLink widthAuto">Url Name</th>
<th class="iconLink widthAuto">Active</th>
</tr>
<thead>
<tbody>
</tbody>
</table>
I have this code and I am a bit in doubt how to make it print 2 rows instead of just 1 (Later I want it to be dynamic depending on screensize if possible, but for now it should just be 2 columns)
http://pastebin.com/H7CpBWWN
#model IEnumerable<FirstWeb.Models.Picture>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
Title
</th>
<th>
Path
</th>
<th>
ConcertYear
</th>
<th>
Title
</th>
<th>
Path
</th>
<th>
ConcertYear
</th>
</tr>
#bool even = false;
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
<a href=#Html.DisplayFor(modelItem => item.Path)><img src=#Html.DisplayFor(modelItem => item.Path) width="250px" /> </a>
</td>
<td>
#Html.DisplayFor(modelItem => item.ConcertYear)
</td>
</tr>
}
</table>
So I want the boolean to be the switch between left and right column
I don't know how you can do it with your boolean flag for left or right, but if you are just after two columns, you could do something like this (apologies for typos/syntax errors, but you get the idea).
#for (int i = 0; i < Model.ContactMethods.Count; i += 2)
{
<tr>
<td>
#Html.DisplayFor(modelItem => Model[i].Title)
</td>
<td>
<a href=#Html.DisplayFor(modelItem => Model[i].Path)>
<img src=#Html.DisplayFor(modelItem => Model[i].Path) width="250px" />
</a>
</td>
<td>
#Html.DisplayFor(modelItem => Model[i].ConcertYear)
</td>
#if (Model.ContactMethods.Count > i + 1)
{
<td>
#Html.DisplayFor(modelItem => Model[i + 1].Title)
</td>
<td>
<a href=#Html.DisplayFor(modelItem => Model[i + 1].Path)>
<img src=#Html.DisplayFor(modelItem => Model[i + 1].Path) width="250px" />
</a>
</td>
<td>
#Html.DisplayFor(modelItem => Model[i + 1].ConcertYear)
</td>
}
else
{
<td colspan="3"></td>
}
</tr>
}
As far as dynamic columns, you'll need to look at jquery for that
I make some table use DataTable. I make this table can filtering data from each column.
This is some tfoot for filtering:
<tfoot>
<tr>
<th><input type="text" name="search_Date" value="Search Date" class="search_init" /></th>
<th><input type="text" name="search_Model" value="Search Model" class="search_init" /></th>
<th><input type="text" name="search_Qty" value="Search Qty" class="search_init" /></th>
<th><input type="text" name="search_Name" value="Search Name" class="search_init" /></th>
</tr>
</tfoot>
But how if I want to make the same thing if I make some additional table. So, we have two table in this page and also have a tfoot like the first table.
<tfoot>
<tr>
<th><input type="text" name="search_Date" value="Search Date" class="search_init" /></th>
<th><input type="text" name="search_Line" value="Search Line" class="search_init" /></th>
<th><input type="text" name="search_Model" value="Search Model" class="search_init" /></th>
<th><input type="text" name="search_Lot_no" value="Search Lot_no" class="search_init" /></th>
<th><input type="text" name="search_Range" value="Search Range" class="search_init" /></th>
</tr>
</tfoot>
I don't know how to modify the dataTable's script. The script is like below:
var asInitVals = new Array();
$(document).ready(function() {
var oTable;
var aTable;
oTable = $("#datadaily").dataTable({.......}); //1st table
aTable = $("#unfinish").dataTable({.......}); //add. table
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
aTable.fnFilter( this.value, $("tfoot input").index(this) );
});
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
});
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
});
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
});
Could I use one filtering script to control two tfoot? Ff so, how do I do it?
You must specify what's index of the tfoot you've click.
Using code:
var index = $(this).index("table tfoot");
Then you should change your data struct:
var TABLE_COUNT = 2;
var DATA_ATABLE = 0;
var DATA_OTABLE = 1;
var tableData = [];
tableData[DATA_ATABLE] = $("#datadaily").dataTable({.......
tableData[DATA_OTABLE] = $("#unfinish").dataTable({.......
Here is demo source:
<table class="table-test" border="1">
<thead>
<tr>
<th>Colum1</th>
<th>Colum2</th>
<th>Colum3</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>F1</th>
<th>F2</th>
<th>F3</th>
</tr>
</tfoot>
</table>
<table class="table-test" border="1">
<thead>
<tr>
<th>Colum1</th>
<th>Colum2</th>
<th>Colum3</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>F1</th>
<th>F2</th>
<th>F3</th>
</tr>
</tfoot>
</table>
<script>
/*#const*/
var TABLE_COUNT = 2;
var DATA_ATABLE = 0;
var DATA_OTABLE = 1;
var tableData = [];
tableData[DATA_ATABLE] = $("#datadaily").dataTable({.......
tableData[DATA_OTABLE] = $("#unfinish").dataTable({.......
$(".table-test tfoot").click(function(){
var index = $(this).index(".table-test tfoot");
//#Todo
tableData[index] = ...................
});
</script>