I have a quick question. I have a form with a for loop. Each for loop has a text box. I want to have two buttons that when I click on one, all the text boxes get populated with the value in the button. For example, when I click on the button "Add 50 minutes," I want all my text boxes to populate with 50. The same goes for if I click on the button "Add 110 minutes" (Screen shot attached)
Here is my form
#using (Html.BeginForm("Index", "Minutes", FormMethod.Post, new { enctype = "multipart/form-date", onsubmit = "popup()" }))
{
#Html.ValidationSummary(true)
<fieldset>
<div>
<table id="tablereport" class="table table-striped table-bordered table-hover table-condensed">
<thead style="background-color:black; font-weight:bold; color:aliceblue">
<tr>
</thead>
<tr>
<td><b>#Html.Label("Date :")</b></td>
<td>#Html.TextBox("datepicker", DateTime.Now.ToString("MM/dd/yyyy"), new { required = "required" })</td>
</tr>
<tr>
<td><input type="button" id="btnSetText" value="Add 50 Minutes" class="btn btn-default" onclick="setText" /></td>
<td><input type="button" value="Add 110 Minutes" class="btn btn-default" /></td>
</tr>
</table>
</div>
#if (ViewBag.Message != null)
{
<div id="dialog-message" title="Alert !!">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
#ViewBag.Message
</p>
</div>
}
<table id="tablereport" class="table table-striped table-bordered table-hover table-condensed">
<thead style="background-color:black; font-weight:bold; color:aliceblue">
<tr>
</thead>
<tr>
<th>Class ID</th>
<th>Course Title</th>
<th>Department</th>
<th>SID</th>
<th>Full Name</th>
<th>Minutes</th>
</tr>
#for (var i = 0; i < Model.Count; i++)
{
<tr>
<td>
#Html.DisplayFor(model => model[i].ClassID)
#Html.HiddenFor(model => model[i].ClassID)
</td>
<td>
#Html.DisplayFor(model => model[i].CourseTitle)
#Html.HiddenFor(model => model[i].CourseTitle)
</td>
<td>
#Html.DisplayFor(model => model[i].Department)
#Html.HiddenFor(model => model[i].Department)
</td>
<td>
#Html.DisplayFor(model => model[i].SID)
#Html.HiddenFor(model => model[i].SID)
</td>
<td>
#Html.DisplayFor(model => model[i].FullName)
#Html.HiddenFor(model => model[i].FullName)
</td>
<td>
#Html.TextBoxFor(model => model[i].Minutes, new { #Value = "0" })
#Html.ValidationMessageFor(model => model[i].Minutes)
</td>
</tr>
}
</table>
<table align="center">
<tr>
<td><input type="submit" value="Save" class="btn btn-default" onclick="popup()" /></td>
</tr>
</table>
</fieldset>
}
Here is my script
<script>
var date = new Date();
var maxdate = date.getDate();
//var currentDate = $(".selector").datepicker("getDate");
$(function () {
$("#datepicker").datepicker({
defaultDate: maxdate,
minDate: '-1M',
maxDate: '+0D'
});
});
**function setText(){
var setText = document.getElementById('setText');
setText.value = '50';
}**
The script I have is working, but will only populate one text box.
Thank you!!
Well the ids should be unique for every element in the DOM. Even though in your case there's more than one element with the same id the document.getElementById() function returns one element(the first one with that id). What you want to do is add a class to each textbox and then use document.getElementsByClassName() which will return a list of all the elements that have the class.
For example:
$("#add-50").on('click', function() {
// ill intentionally use vanilla js here
var inputs = document.getElementsByClassName('textbox');
for (var i = 0; i < inputs.length; i++) {
var input1 = inputs[i];
input1.value = '50';
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="add-50">Click Me for 50</button><br/>
<input class="textbox" type="text" /><br/>
<input class="textbox" type="text" /><br/>
<input class="textbox" type="text" /><br/>
<input class="textbox" type="text" /><br/>
<input class="textbox" type="text" />
</div>
You can wrap all the textboxes in a div, add a class to all of them and then use something like this:
function setValue(value){
$('#divWithtextboxes .TextboxClass').each(function (i) {
$(this).val(value);
<br>
});<br>
Related
I have made the following form but have some difficulties with retrieving values. The problem that I cannot seem to overcome is checking whether the #Html.CheckBox("check", new {#type="checkbox", #id="CheckBox"}) is checked or not and according to that save the #Html.DisplayTextFor(m => m.DLLsFull[i][0]) in a List. I was wondering if someone could guide me unto the right path / help me out to find out how I can do this.
Munch appreciated!
<div class="text-center">
<h1 class="display-6">Testsets per DLL</h1>
#using (Html.BeginForm("TestsetsPerDLL", "GenerateOverview", FormMethod.Post, new {#class = "d-flex flex-column"}))
{
<h1 class="w-50 text-start align-self-sm-center fw-lighter fs-5">Vul de output type in:</h1>
<table class="w-50 align-self-sm-center">
<tr>
<td>#Html.HiddenFor(m => m.Overview)</td>
#if (#ViewBag.OutputTypes == null || #ViewBag.OutputTypes.Count == 0)
{
<td>#Html.TextBoxFor(m => m.Output, new { #class = ""})</td>
}
else
{
<td>#Html.DropDownListFor(m => m.Output, new SelectList(#ViewBag.OutputTypes), "Selecteer een type", new {#class = " w-100"})</td>
}
</tr>
</table>
<partial name="_pager" model="Pager"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table class="table table-striped">
#if (Model.DLLsFull is not null)
{
<tr>
<th>DLL</th>
<th>Titel</th>
<th>Beschrijving</th>
<th>Geselecteerd</th>
</tr>
#for (int i = 0; i < Model.DLLsFull.Count; i++)
{
<tr>
<td class="m-t-1 text-start">#Html.DisplayTextFor(m => m.DLLsFull[i][0])</td>
<td class="m-t-1 text-start">#Html.DisplayTextFor(m => m.DLLsFull[i][1])</td>
<td class="m-t-1 text-start">#Html.DisplayTextFor(m => m.DLLsFull[i][2])</td>
<td class="m-t-1 text-center">#Html.CheckBox("check", new {#type="checkbox", #id="CheckBox"})</td>
</tr>
}
}
</table>
<input class="btn btn-outline-primary" type="submit" value="Genereer" />
}
</div>````
Hello I have a form with several html/input tags. Like so:
<form class="form-group">
<div class="body table-responsive">
<table class="table m-b-0">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>phone number</th>
<th>ID</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.name</td>
<td>
<input type="text" name="" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="" id="" value=""
class="bordered">
</td>
</tr>
}
</tbody>
</table>
</div>
</form>
I havent named or id them yet , since I know there is a way to fill all inputs and save them all at the same time when a submit or button is pressed, I just dont know how.
Do I need to add something a tag or attribute on the in order to be able to save all inputs at the same time when the is pressed?
You have to assign names to each input and add place a submit button. When you click submit, user input will be sent to the server with the given method.
<form method="post" class="form-group">
<div class="body table-responsive">
<table class="table m-b-0">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>phone number</th>
<th>ID</th>
</tr>
</thead>
<tbody>
#{
var i = 0;
foreach (var item in Model) {
<tr>
<td>#item.name</td>
<td>
<input type="text" name="input1_#i" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="input2_#i" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="input3_#i" id="" value=""
class="bordered">
</td>
</tr>
}
}
</tbody>
</table>
</div>
<button type="submit">Submit</button>
</form>
Or you can listen to the submit event and handle it yourself.
$('form').submit(function(e) {
e.preventDefault();
// you can get the input data from 'this' (form element)
// here comes your validation and server call
});
I have a Mvc Table it looks like this:
<table id="example" class="table table-hover">
<thead>
<tr>
<th>SL NO
</th>
<th>Designation Name
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
//Here I want Serial No here [I used Paging]
</td>
<td>
#Html.DisplayFor(modelItem => item.desigantionName)
</td>
<td>
<div class="btn btn-default btn-lg disabled p-x-2">#Html.ActionLink("Edit", "Edit", new { id = item.desigantionId }) </div>
<div class="btn btn-default btn-lg disabled p-x-2">#Html.ActionLink("Details", "Details", new { id = item.desigantionId }) </div>
<div class="btn btn-default btn-lg disabled p-x-2">#Html.ActionLink("Delete", "Delete", new { id = item.desigantionId })</div>
</td>
</tr>
}
</tbody>
</table>
above code first column I want serial no I use sl no use css but problem is when go to next page index sl no resart upto 1
each pager I used 5 rows I need to start 2nd page index sl no upto 6
Do something like this,if you want to print the serial no of the data in Model.pagesize and pageNum should be set according to the current page number and its size
<tbody>
#{ int i = 0; }
#foreach (var item in Model)
{
<tr>
<td>
<label>pageSize * (pageNum - 1) + #i</label> //your serial no
#{ i++; }
</td>
<td>
#Html.DisplayFor(modelItem => item.desigantionName)
</td>
<td>
<div class="btn btn-default btn-lg disabled p-x-2">#Html.ActionLink("Edit", "Edit", new { id = item.desigantionId }) </div>
<div class="btn btn-default btn-lg disabled p-x-2">#Html.ActionLink("Details", "Details", new { id = item.desigantionId }) </div>
<div class="btn btn-default btn-lg disabled p-x-2">#Html.ActionLink("Delete", "Delete", new { id = item.desigantionId })</div>
</td>
</tr>
}
</tbody
I am trying to pass values from a view to a controller in MVC. I am using a ViewModel and normally the values would bind to the properties as long as the names are the same. However because the values are generated via a foreach loop the names of the values do not match the names of the properties in the view model.
I am working around this by assigning the values to a variable in Razor. However one of my values is in a text box on the form and the value is not being passed to the controller and I cannot work out why.
I get a null exception when clicking the button.
VIEW Code is below:
#model PagedList.IPagedList<Mojito.Domain.ViewModels.ShoppingCartProductItem>
#using System.Web.UI.WebControls
#using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Mojito Products</h2>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.FirstOrDefault().Description)
</th>
<th>
#Html.ActionLink("Price", "Index", new { sortOrder = ViewBag.SortByPrice, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.DisplayNameFor(model => model.FirstOrDefault().Quantity)
</th>
<th>
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.TextBoxFor(modelItem => item.Quantity)
</td>
<td>
#{string Description = item.Description;}
#{decimal Price = item.Price;}
#{int Quantity = item.Quantity; }
#using (Html.BeginForm("AddToCart", "ShoppingCart", FormMethod.Post))
{
<div class="pull-right">
#if (Request.Url != null)
{
<input type="text" hidden="true" name="Description" value=#Description />
<input type="text" hidden="true" name="Price" value=#Price />
<input type="text" hidden="true" name="Quantity" value=#Quantity />
#Html.Hidden("returnUrl", Request.Url.PathAndQuery)
<input type="submit" class="btn btn-success" value="Add to cart" />
}
</div>
}
</td>
</tr>
}
</table>
<div class="col-md-12">
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
</div>
#Html.PagedListPager(Model, page => Url.Action("Index",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
Controller Code below
public ActionResult AddToCart(Cart cart, MojitoProduct product, string returnUrl, int Quantity =1)
{
if (product != null)
{
cart.AddItem(product, Quantity);
}
return RedirectToAction("Index", new { returnUrl });
}
Do not use foreach. Use a for-loop instead and within this, qualify the full path to your properties using the index.
Better yet: use a Edit- or DisplayTemplate for the ShoppingCartProductItem. This will also keep your path.
You have to use for loop instead of foreach:
#for (int i=0;i < Model.Count; i++)
{
<tr>
<td>
#Html.DisplayFor(modelItem => Model[i].Description)
</td>
<td>
#Html.DisplayFor(modelItem => Model[i].Price)
</td>
<td>
#Html.TextBoxFor(modelItem => Model[i].Quantity)
</td>
..........................
..........................
..........................
}
you can also post all using one form by posting List<ShoppingCartProductItem>, see Model Binding To A List
Your textboxes so values out of the form.
Try like below
#using (Html.BeginForm("AddToCart", "ShoppingCart", FormMethod.Post))
{
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.TextBoxFor(modelItem => item.Quantity)
</td>
<td>
#{string Description = item.Description;}
#{decimal Price = item.Price;}
#{int Quantity = item.Quantity; }
<div class="pull-right">
#if (Request.Url != null)
{
<input type="text" hidden="true" name="Description" value=#Description />
<input type="text" hidden="true" name="Price" value=#Price />
<input type="text" hidden="true" name="Quantity" value=#Quantity />
#Html.Hidden("returnUrl", Request.Url.PathAndQuery)
<input type="submit" class="btn btn-success" value="Add to cart" />
}
</div>
</td>
</tr>
}
}
I resolved this in the short term by using new and forcing the name of the parameter.
#Html.HiddenFor(modelItem => t.NoOfUsers, new { Name = "NoOfUsers", id = "NoOfUsers" })
C#, MVC4
I have a PartialView created for a popup data entry on a form. This is a snippet from the main form.
<input type="button" id="btnAddGroup" value="Add Group" />
<p>
<input type="submit" value="Save" />
</p>
</div>
</fieldset> }
I discovered quickly that I needed to have the line:
#Html.Partial("_Groups")
Outside the primary view so the form submit button in the partial view would accept and process.
My controller processes and sends back the data using:
return PartialView(NewModel);
I can run the debugger and see that the data is getting passed back to the PartialView but since the view sits outside the original form, it's not displaying.
My PartialView is as follows:
#model OMD.ViewModels.SearchedUser
#if (Model.AddGroups != null)
{
<h2>Groups to be Added</h2>
<table id="AddGroupList">
<thead>
<tr>
<th>
Name
</th>
<th>
Until
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
#foreach (var Group in Model.AddGroups)
{
<tr>
<td>
#Html.DisplayFor(model=> Group.GroupName)
</td>
<td>
#Html.DisplayFor(model=> Group.dtAddedTo)
</td>
<td>
#Html.DisplayFor(model=> Group.bAddOrRemove)
</td>
<td>
#if (AuthCheck.CheckUser(new HttpContextWrapper(HttpContext.Current), oRoles.StaffChangeRequest) ||
AuthCheck.CheckUser(new HttpContextWrapper(HttpContext.Current), oRoles.StudentChangeRequest))
{
<span>#Html.ActionLink("Remove", "RemoveGroup", new { id = Group.ID })</span>
}
</td>
</tr>
}
</tbody>
</table>
}
<div id="dlgAddGroup" title="Add Group" style="display: none">
#using (Ajax.BeginForm("_Groups",new AjaxOptions { UpdateTargetId ="ID",OnSuccess="onSuccess"}))
{
#Html.DropDownListFor(model => model.AllGroups,new SelectList(Model.AllGroups, "ID","GroupName"), "Select Group to Add")
#Html.ValidationMessageFor(model => model.AllGroups)
<div class="editor-label">
#Html.CheckBox("cbxMakeGroupPermanent", true) Permanent
</div>
<div class="editor-label" id ="dlgUntil1">
Group Add Until:
</div>
<div class="editor-field" id="dlgUntil2">
#Html.TextBox("tbAddUntil",null,new { maxlength = 30, style = "width: 100px" })
<span style='padding:5px'><img id='calImageGroup' alt="img" src='~/Images/calendar.gif'></span>
</div>
<button class="btn btn-inverse" type="submit">add</button>
}
I can see the table at the top display the information posted back to it but it doesn't show on the screen...
How can I get this data/table to display?