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
});
Related
I have a View with a table with this structure:
<form asp-action="Index">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<table class="table table-hover table-responsive-sm display">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Descripcion)
</th>
<th>
#Html.DisplayNameFor(model => model.Activa)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<input value="#Html.DisplayFor(modelitem => item.AreaClave)"/>
</td>
<td>
<input id="desc" name="desc" value="#Html.DisplayFor(modelItem => item.Descripcion)" />
</td>
<td>
<input value="#Html.DisplayFor(modelItem => item.Activa)" />
</td>
<td>
<div class="form-group">
<button asp-route-id="#item.AreaClave" type="submit" name="action">Update</button>
</div>
</td>
</tr>
}
</tbody>
</table>
I want to have multiple rows with an open input for "item.Descripcion", this is because I want to be able to update every row individually by its row ID.
This approach works just as fine for the first row, but for the following it doesn't work. I think this is because the name tag is repeated and its only considering the first one.
Is there a way to make my table with an update input in each row?
You can try to generate <form> and <table> for each item like below:
#model IEnumerable<Test>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<table class="table table-hover table-responsive-sm display">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Descripcion)
</th>
<th>
#Html.DisplayNameFor(model => model.Activa)
</th>
<th></th>
</tr>
</thead>
</table>
#foreach (var item in Model)
{
<form asp-action="Index">
<table class="table table-hover table-responsive-sm display">
<tbody>
<tr>
<td>
<input value="#Html.DisplayFor(modelitem => item.AreaClave)" />
</td>
<td>
<input id="desc" name="desc" value="#Html.DisplayFor(modelItem => item.Descripcion)" />
</td>
<td>
<input value="#Html.DisplayFor(modelItem => item.Activa)" />
</td>
<td>
<div class="form-group">
<button asp-route-id="#item.AreaClave" type="submit" name="action">Update</button>
</div>
</td>
</tr>
</tbody>
</table>
</form>
}
Backend code:
[HttpPost]
public IActionResult Index(string id,string desc)
{
//do your stufff...
}
I have the following table:
<form method="post" asp-action="Index" asp-controller="Record">
<table class="table table-hover">
<thead>
<tr>
<th scope="col"><input type="checkbox" id="chkAll"></th>
<th scope="col">Created</th>
<th scope="col">User Reference</th>
<th scope="col">Type</th>
<th scope="col">Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach (var rec in Model.Data)
{
<tr>
<td style="display: none">
#Html.TextBoxFor(m => rec.Id)
</td>
<td>
#Html.CheckBoxFor(m => rec.IsChecked)
</td>
<td>#rec.Created</td>
<td>#rec.UserReference</td>
<td>#rec.Type</td>
<td>#rec.Status</td>
<td>
<input name="submit" type="submit" id="process" value="submit" />
</td>
</tr>
}
</tbody>
</table>
</form>
The issue I have is when I press submit I'm expecting to pass the content of the table into my controller, however when I submit the form the model on my controller is null:
[HttpPost]
public async Task<IActionResult> Index(List<UserData> data)
When I submit the form I expect to have a list of id's and checkbox values either true / false, can someone shed some light into why I'm not able to see this within the post method of the controller?
Found the solution of the following thread, seems switching foreach to for resolved the issue.
The file fmOrderIn.cshtml is a view that contains a complex form:
#model MVF2.Models.FarmOrderModel
…
<form method="post">
<table>
<tr>
<td><label>Nº Encomenda</label></td>
<td><input asp-for="encID" readonly="readonly" style="background-color:lightgray;" /></td>
</tr>
<tr>
<td><label>Farmácia</label></td>
<td><input asp-for="farmDetails.cliNome" readonly="readonly" /></td>
</tr>
<tr>
<td><label>Contactos</label></td>
<td><input asp-for="farmDetails.cliTelefone[0]" readonly="readonly" /><input asp-for="farmDetails.cliTelefone[1]" readonly="readonly" /></td>
</tr>
<tr>
<td><label>Rua</label></td>
<td><input asp-for="farmDetails.locRua" readonly="readonly" /></td>
</tr>
<tr>
<td><label>Localidade</label></td>
<td><input asp-for="farmDetails.locLocalidade" readonly="readonly" /></td>
</tr>
<tr>
<td><label>Código Postal</label></td>
<td><input asp-for="farmDetails.locCodPostal" readonly="readonly" /></td>
</tr>
<tr>
<td>#Html.LabelFor(m => m.aSelVM.SelectedArm)</td>
<td>#Html.DropDownListFor(m => m.aSelVM.SelectedArm, Model.aSelVM.ArmList, "Seleccionar...")</td>
#Html.ValidationMessageFor(m => m.aSelVM.SelectedArm)
</tr>
<tr>
<td>#Html.LabelFor(m => m.aSelVM.SelectedArmLoc)</td>
<td>#Html.DropDownListFor(m => m.aSelVM.SelectedArmLoc, Model.aSelVM.ArmLocList)</td>
</tr>
#Html.Partial("_ProdPartialView", Model.pVM)
The file _ProdPartialView.cshtml is that partial view that contains:
#model MVF2.Models.ViewModels.prodTableViewModel
#foreach (var p in Model.pTable.AsEnumerable())
{
<tr>
<td>#p.Codigo</td>
<td>#p.ProdNome</td>
<td><input asp-for="#p.Data.Date" type="date" /></td>
<td><input asp-for="#p.QtdVendida" /></td>
<td><input asp-for="#p.QtdBonus" /></td>
<td>#p.QtdTotal</td>
<td><input asp-for="#p.PercDesconto" /></td>
<td><select asp-for="#p.TipoDesconto" asp-items="Html.GetEnumSelectList<DiscountEnumType>()">
</select></td>
</tr>
}
Now, I want to post all this information to the controller through a button.
I tried some <input type="submit" … /> and also a #Html.ActionLink helpers, but I didn't manage to transfer all this information.
Could you help me?
Thank you very much.
I simplified your model but you can use the same format for the rest of the properties
fmOrderIn.cshtml:
#model FarmOrderModel
<form method="post" action="#Url.Action("Method", "Home")">
<table>
<tr>
<td><label>Nº Encomenda</label></td>
<td><input asp-for="encID" readonly="readonly" style="background-color:lightgray;" /></td>
</tr>
#Html.Partial("_ProdPartialView", Model)
</table>
<input type="submit" value="Click Me" />
</form>
And the Url.Action("Method", "Home") will go to the url /Home/Method so you will need to change that to the correct action method you want to hit
_ProdPartialView.cshtml:
#model FarmOrderModel
#for (int i = 0; i < Model.pTable.Count; i++)
{
<tr>
<td>
<input asp-for="#Model.pTable[i].Codigo" />
</td>
</tr>
}
When I click the button to submit my form, the viewModel is not being bound. I'm not sure whether this is to do with the model property being an array.
Controller
[HttpPost]
public async Task<IActionResult> CommodityAdditionalCodes(CommodityAdditionalCodesViewModel viewModel)
{
//todo code in here which calls webservice
return View(viewModel);
}
ViewModel
public class CommodityAdditionalCodesViewModel
{
public CommodityAdditionalCodeType[] Types { get; set; }
}
View
#model Asm.Helios.ToolboxMvc.ViewModels.CommodityAdditionalCodesViewModel
#{
ViewData["Title"] = "CommodityAdditionalCodes";
}
<Section>
<button type="button" id="btnCommit">Commit Changes</button><span id="isDirtyMessage" class="warning" style="display:none">There are unsaved changes, press the commit changes button to save them</span>
</Section>
<form id="frmAdditionalCodes" name="frmAdditionalCodes" method="post" >
<table class="table header-fixed">
<thead>
<tr >
<th>Origin</th>
<th>Description</th>
<th>Valid From</th>
<th>Valid To</th>
<th>Type</th>
<th>Customs Identifier</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Types)
{
<tr>
<td>
<span>#item.Origin</span>
<input type="text" value="#item.Origin" style="display:none"/>
</td>
<td>
<span>#item.Description</span>
<input type="text" value="#item.Description" style="display:none" />
</td>
<td>
<span>#item.ValidFrom</span>
<input type="text" value="#item.ValidFrom" style="display:none" />
</td>
<td>
<span>#item.ValidTo</span>
<input type="text" value="#item.ValidTo" style="display:none" />
</td>
<td>
<span>#item.Type</span>
<input type="text" value="#item.Type" style="display:none" />
</td>
<td>
<span>#item.CustomsIdentifier</span>
<!--<input type="text" value="#item.CustomsIdentifier" style="display:none" />-->
#Html.TextBoxFor(m=>item.CustomsIdentifier, new {#style="display:none"})</td>
<td>
<button type="button" id="deleteItem">Delete</button>
<button type="button" id="editItem">Edit</button>
<button type="button" id="updateItem" style="display:none">Update</button>
<button type="button" id="cancelItem" style="display:none">Cancel</button>
</td>
</tr>
}
</tbody>
</table>
</form>
Don't use a foreach loop, instead use a classic for and index the model, for example Model.Types[index].
Also you should consider using tag helpers, it makes your Razor code much easier to read as it more closely resembles real HTML.
#for (var index = 0; index < Model.Types.Count; index++)
{
<input type="text" asp-for="Model.Types[index].Origin" />
<!-- etc... -->
}
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>