Develop Reference

Angular 6 registration form not sending

I'm doing a project an asp.net angular 6 project and am trying to include a registration and login form. So far my login form is working but my registration form isn't doing anything when pressing the register button. I'm following the same logic from my login form, I was wondering if anyone could point out to me why it isn't working.
register.component.html
<div class="container card" style="width:40rem;">
<div class="row justify-content-center card-header bg-primary" >
<div class="col">
<h2 class="text-center text-white mb-4">Register</h2>
</div>
</div>
<div class="row justify-content-center card-body mt-2">
<div class="col-6">
<form (ngSubmit)="onRegister()" [formGroup]="registerForm">
<div class="form-row">
<div class="col">
<label>
First name
<input class="form-control" type="text" formControlName="firstName"/>
</label>
<span class="help-block text-danger" *ngIf="registerForm.get('firstName').touched && registerForm.get('firstName').invalid">First name is required.</span>
</div>
</div>
<div class="form-row">
<div class="col">
<label>
Last name
<input class="form-control" type="text" formControlName="lastName"/>
</label>
<span class="help-block text-danger" *ngIf="registerForm.get('lastName').touched && registerForm.get('lastName').invalid">Last name is required.</span>
</div>
</div>
<div class="form-row">
<div class="col">
<label>
Address
<input class="form-control" type="text" formControlName="address"/>
</label>
<span class="help-block text-danger" *ngIf="registerForm.get('address').touched && registerForm.get('address').invalid">Address is required.</span>
</div>
</div>
<div class="form-row">
<div class="col">
<label>
E-mail
<input type="email" class="form-control" formControlName="email"/>
</label>
<span class="help-block text-danger" *ngIf="registerForm.get('email').touched && registerForm.get('email').invalid">Email is required and must be a valid email address.</span>
</div>
</div>
<div class="form-row">
<div class="col">
<label>
Date of Birth
<input type="date" class="form-control" formControlName="dateOfBirth"/>
</label>
<span class="help-block text-danger" *ngIf="registerForm.get('dateOfBirth').touched && registerForm.get('dateOfBirth').invalid">Date of birth is required.</span>
</div>
</div>
<div class="form-row">
<div class="col">
<label>
Password
<input type="password" class="form-control" formControlName="password"/>
</label>
<span class="help-block text-danger" *ngIf="registerForm.get('password').touched && registerForm.get('password').invalid">
<span *ngIf="registerForm.get('password').errors['passwordComplexity']" class="help-block d-block">The password needs to start with a letter and contain a number and a special character.</span>
<span *ngIf="registerForm.get('password').errors['passwordLength']" class="help-block d-block">The password must be at least 8 characters long.</span>
</span>
</div>
</div>
<div class="form-row">
<div class="col">
<label>
Security question
<select class="form-control" formControlName="securityQuestion">
<option *ngFor="let question of securityQuestions" value="{{question.id}}">{{question.question}}</option>
</select>
</label>
<span class="help-block text-danger" *ngIf="registerForm.get('securityQuestion').touched && registerForm.get('securityQuestion').invalid">Answer to security question is required</span>
</div>
</div>
<div class="form-row">
<div class="col">
<label>
Answer to security question
<input type="text" class="form-control" formControlName="securityAnswer"/>
</label>
<span class="help-block text-danger" *ngIf="registerForm.get('securityAnswer').touched && registerForm.get('securityAnswer').invalid">Answer to security question is required</span>
</div>
</div>
<div class="form-row">
<div class="col text-right">
<button class="btn btn-primary mr-2" [disabled]="registerForm.invalid">
Sign up
</button>
<a class="mr-2" [routerLink]="['/account']">
<button class="btn btn-warning">
Cancel
</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
register.component.ts
import {Component, OnInit} from "#angular/core";
import {FormControl, FormGroup, Validators} from "#angular/forms";
import {MessageService} from "../../services/message.service";
import {ApiMethod, ApiService} from "../../services/api.service";
import {PasswordValidator} from "../../shared/validators/password.validator";
import {User, UserUpdateResult} from "../../shared/user-model";
import {HttpClient} from "#angular/common/http";
import {SecurityQuestion} from "../../shared/security.question.model";
#Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit{
public securityQuestions: SecurityQuestion[] = [];
public registerForm: FormGroup = new FormGroup({
firstName: new FormControl(null, Validators.required),
lastName: new FormControl(null, Validators.required),
address: new FormControl(null, Validators.required),
email: new FormControl(null, [Validators.email, Validators.required]),
dateOfBirth: new FormControl(null, Validators.required),
password: new FormControl(null, [Validators.required, PasswordValidator.Length, PasswordValidator.Complexity]),
securityQuestion: new FormControl(1, Validators.required),
securityAnswer: new FormControl(null, [Validators.required]),
});
constructor(public messageService: MessageService,
public apiService: ApiService,
public httpClient: HttpClient){}
ngOnInit(): void {
this.httpClient.get(this.apiService.getUrl(ApiMethod.GetSecurityQuestions)).subscribe((questions: SecurityQuestion[]) => {
this.securityQuestions = questions;
})
}
public onRegister(){
const user = new User();
user.fullName = this.registerForm.value.firstName + ' ' + this.registerForm.value.lastName;
user.password = this.registerForm.value.password;
user.email = this.registerForm.value.email;
user.address = this.registerForm.value.address;
user.dateOfBirth = new Date(this.registerForm.value.dateOfBirth);
const securityQuestion = new SecurityQuestion();
securityQuestion.id = this.registerForm.value.securityQuestion;
securityQuestion.answer = this.registerForm.value.securityAnswer;
user.securityQuestion = securityQuestion;
this.httpClient.post(this.apiService.getUrl(ApiMethod.UserSelfRegister), user).subscribe((result: UserUpdateResult) => {
if(result == UserUpdateResult.UsernameTaken){
this.messageService.error('User cannot be created', 'This user is already registered.');
return;
}
this.messageService.success('User registered', 'Waiting for activation. Please check your inbox for an email once your account has been activated.');
this.registerForm.reset();
});
}
}

Add type="submit" in button tag
<button type="submit" class="btn btn-primary mr-2" [disabled]="registerForm.invalid">
Sign up
</button>

You can add type="submit" to your button tag or you can remove (ngSubmit)="onRegister()" from your form tag and add (click)="onRegister()" to your button tag.

C# Razor pages Partial View Model is null on submit

I am new to Razor pages and trying to create a page with a partial view. The partial view has a dropdownlist and a text input for Quantity field and a submit button. The Partial View renders correctly but when I click on the Submit button the Model passed to the Code behind has no value.
Here is the code I have
_PartialAddons.cshtml
#*
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*#
#{
}
#model Public.Areas.Register.AddonListDto
<form method="post">
#Html.HiddenFor(Model => Model.Quantity)
<div style="padding:5px;">
<b>NZD $45</b>
</div>
<div>
<div style="padding:5px;">
<select id="skuSelect" asp-for="SelectedSkus" asp-items="#(new SelectList(Model.AddonSkus,"SkuId","SkuName"))" class="form-control">
<option>Please select one</option>
</select>
</div>
<div style="padding:5px;">
<input type="hidden" name="handler" value="Quantity" />
<input asp-for="Quantity" name="Quantity" class="form-control ng-untouched ng-pristine ng-valid" max="999" min="0" style="width:150px;" type="number" value="0" id="#Model.Id">
</div>
</div>
<div style="padding:5px;">
<a class="btn green" asp-page-handler="AddToCart">Add to Cart</a>
</div>
</form>
This is the Main Page
#foreach (var addons in Model.StoreAddonList)
{
<div class="panel card panel-default" style="margin-top:10px;">
<div class="panel-heading card-header" role="tab">
<div class="panel-title">
<div class="accordion-toggle" role="button" aria-expanded="true">
<div accordion-heading="" style="width:100%;">
#addons.Title
<i class="pull-right float-xs-right glyphicon glyphicon-chevron-down"></i>
</div>
</div>
</div>
</div>
<div class="panel-collapse collapse in show" role="tabpanel" style="overflow: visible; height: auto; display: block;" aria-expanded="true" aria-hidden="false">
<div class="panel-body card-block card-body">
<div style="padding-top:10px;background-color:#ffffff;clear:both;">
<div style="width:100%">
<div style="float:left;width:20%;text-align:left;">
Name
</div>
<div style="float:left;width:30%;padding-left:10px;">
#addons.Description
</div>
</div>
<div style="float:left;width:40%;padding-left:10px;">
<div>
#{
await Html.RenderPartialAsync("_PartialAddons.cshtml", addons);
}
</div>
</div>
<div style="clear:both;">
</div>
</div>
</div>
</div>
</div>
}
This is the Index.cshtml.cs to handle the submit
public ActionResult OnGetAddToCart(AddonListDto addOnList)
{
var sass = Quantity;
var tass = SelectedSkus;
return null;
}
The AddonListDto is null on the OnGetAddToCart Method. Have been trying to get this working for the past two days. Any help would be greatly appriciated

If you want to submit your data, you need to use OnPost instead of OnGet in razor pages and set the handler name in the <form> tag. For example:
handler:
public ActionResult OnPostAddToCart(AddonListDto addOnList)
partial view:
#model Public.Areas.Register.AddonListDto
<form method="post" asp-page-handler="AddToCart">
#Html.HiddenFor(Model => Model.Quantity)
<div style="padding:5px;">
<b>NZD $45</b>
</div>
<div>
<div style="padding:5px;">
<select id="skuSelect" asp-for="SelectedSkus" asp-items="#(new SelectList(Model.AddonSkus,"SkuId","SkuName"))" class="form-control">
<option>Please select one</option>
</select>
</div>
<div style="padding:5px;">
<input type="hidden" name="handler" value="Quantity" />
<input asp-for="Quantity" name="Quantity" class="form-control ng-untouched ng-pristine ng-valid" max="999" min="0" style="width:150px;" type="number" value="0" id="#Model.Id">
</div>
</div>
<div style="padding:5px;">
<input type="submit" value="Add To Cart" class="btn btn-primary" />
</div>
</form>

Automatically refresh a component in Blazor

I am working on a Blazor page for adding a new object. The object "RepairOrder" has List of object "RepairSection".
On the page there is an area that will loop through the List "RepairOrder"."RepairSections" and show the elements:
<div class="col-lg-10">
#if (sections.Count > 0)
{
foreach (var sec in sections)
{
<h3>Section #sec.SectionNumber</h3>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-5">
<label for="Failure" class="control-label">Failure: </label>
<input for="Failure" class="form-control" bind="#sec.Failure" readonly />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-1">
<label><input type="checkbox" checked="#IsCApprovedChecked(sec)" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" value="#IsWarrantyChecked(sec)" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="AdminComments" class="control-label">Admin Comments: </label>
<input for="AdminComments" class="form-control" bind="#sec.AdminComments" readonly />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="TechComments" class="control-label">Tech Comments: </label>
<input for="TechComments" class="form-control" bind="#sec.TechComments" readonly />
</div>
</div>
}
}
</div>
After all the current sections in the list have been added to the page, there is a button to add a new section. When the button is clicked, the function changes a bool value to true to open a modal as a dialog. The modal contains fields to input a new section elements.
function called to open the modal:
protected void AddSectionCalled()
{
_newSection = new RepairSection();
this.isAddNew = true;
}
Modal Code:
<div class="modal" tabindex="-1" style="display:block" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">New Repair Section</h3>
<button type="button" class="close" onclick="#CloseModal"><span aria-hidden="true">X</span></button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="sectionLetter" class="control-label">Section: </label>
<input for="sectionLetter" class="form-control" bind="#_newSection.SectionNumber" />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.Warranty" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.CustomerApproved" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_failure" class="control-label">Failure: </label>
<input for="_failure" class="form-control" bind="#_newSection.Failure"/>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_adminComments" class="control-label">Admin Comments: </label>
<input for="_adminComments" class="form-control" bind="#_newSection.AdminComments" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_techComments" class="control-label">Tech Comments: </label>
<input for="_techComments" class="form-control" bind="#_newSection.TechComments"/>
</div>
</div>
<br/>
<button class="btn btn-primary float-left" onclick="AddNewSection">Add New Section</button>
</form>
</div>
</div>
</div>
</div>
When the "Add New Section" button is clicked, the "_newSection" object created from the information collected in the modal is added to the "sections" list that was originally looped through when the page was loaded.
private void AddNewSection()
{
sections.Add(_newSection);
this.StateHasChanged();
this.isAddNew = false;
}
as you can see I added the "StateHasChanged()" after the new section is added to the sections list. However the page does not render to display the new section.
I originally had created dummy data on the page "OnInitAsync()" event that loaded the sections list with data before it was displayed. This way I could make sure the page displayed what was in the list correctly.
How can I make the page re-render the information in the list after user adds a new object to the list?
----Edit-----
Below is the code for the entire page. I will try and minimize this on the weekend, however there really is not a lot here.
#page "/AddRepairOrder"
#using ShopLiveWebVersion2._0.Models
#using ShopLiveWebVersion2._0.DataAccess
#using ShopLiveWebVersion2._0.Services
#using ShopLiveWebVersion2._0.Data
#inject IUriHelper UriHelper
#inject RepairOrderContext context
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10"><h1>Create New Repair Order</h1></div>
</div>
<br /><br />
<form id="AddROForm">
<div class="form-group">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="ControlNumber" class="control-label">Repair Order #: </label>
<input for="ControlNumber" class="form-control" bind="#ro.ControlNumber" maxlength="15" required />
</div>
<div class="col-lg-1">
<label for="TagNumber" class="control-label">Tag #: </label>
<input for="TagNumber" class="form-control" bind="#ro.TagNumber" maxlength="8" />
</div>
<div class="col-lg-3">
<label for="VIN" class="control-label">VIN: </label>
<input for="VIN" class="form-control" bind="#ro.VIN" maxlength="18" />
#*<small id="Chasis" class="form-text text-muted">#ro.GetChassisNumber()</small> figure out how to get chassis from vin after box looses focus*#
</div>
<div class="col-lg-2">
<label for="Make" class="control-label">Make: </label>
<input for="Make" class="form-control" bind="#ro.Make" maxlength="30" />
</div>
<div class="col-lg-2">
<label for="Madel" class="control-label">Model: </label>
<input for="Madel" class="form-control" bind="#ro.Madel" maxlength="30" />
</div>
</div>
<div class="row AddRow">
<div class="col-lg-1"></div>
<div class="col-lg-4">
<label for="Customer" class="control-label">Customer: </label>
<input for="Custoemr" class="form-control" bind="#ro.Customer" maxlength="50" />
</div>
<div class="col-lg-2">
<label asp-for="Location" class="control-label">Vehicle Location: </label>
<select asp-for="Location" class="form-control" bind="#ro.Location">
<option value="">-- Select a Location --</option>
#foreach (var loc in Location)
{
<option value="#loc">#loc</option>
}
</select>
</div>
<div class="col-lg-2">
<label asp-for="Assigned" class="control-label">Assigned: </label>
<select asp-for="Assigned" class="form-control" bind="#ro.Assigned">
<option value="">-- Select an Employee --</option>
#foreach (var emp in Employee)
{
<option value="#emp">#emp</option>
}
</select>
</div>
<div class="col-lg-2">
<label asp-for="Status" class="control-label">Status: </label>
<select asp-for="Status" class="form-control" bind="#ro.Status">
<option value="">-- Select a Status --</option>
#foreach (var st in Status)
{
<option value="#st">#st</option>
}
</select>
</div>
</div>
<br />
<div class="row"><div class="col-lg-1"></div><div class="col-lg-10"><hr id="Double" /></div></div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
#if (sections.Count > 0)
{
foreach (var sec in sections)
{
<h3>Section #sec.SectionNumber</h3>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-5">
<label for="Failure" class="control-label">Failure: </label>
<input for="Failure" class="form-control" bind="#sec.Failure" readonly />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-1">
<label><input type="checkbox" checked="#IsCApprovedChecked(sec)" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" value="#IsWarrantyChecked(sec)" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="AdminComments" class="control-label">Admin Comments: </label>
<input for="AdminComments" class="form-control" bind="#sec.AdminComments" readonly />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="TechComments" class="control-label">Tech Comments: </label>
<input for="TechComments" class="form-control" bind="#sec.TechComments" readonly />
</div>
</div>
}
}
</div>
</div>
<div class="row"></div>
</div> #*Form-group*#
</form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-9">
<br /><br />
<button class="btn btn-primary float-right" onclick="#AddSectionCalled">Add New Section</button>
</div>
</div>
#if (isAddNew == true)
{
<div class="modal" tabindex="-1" style="display:block" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">New Repair Section</h3>
<button type="button" class="close" onclick="#CloseModal"><span aria-hidden="true">X</span></button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="sectionLetter" class="control-label">Section: </label>
<input for="sectionLetter" class="form-control" bind="#_newSection.SectionNumber" />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.Warranty" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.CustomerApproved" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_failure" class="control-label">Failure: </label>
<input for="_failure" class="form-control" bind="#_newSection.Failure" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_adminComments" class="control-label">Admin Comments: </label>
<input for="_adminComments" class="form-control" bind="#_newSection.AdminComments" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_techComments" class="control-label">Tech Comments: </label>
<input for="_techComments" class="form-control" bind="#_newSection.TechComments" />
</div>
</div>
<br />
<button class="btn btn-primary float-left" onclick="AddNewSection()">Add New Section</button>
</form>
</div>
</div>
</div>
</div>
}
#functions
{
private RepairOrder ro;
private RepairOrder incomingRO;
private RepairOrderDataAccess RoData;
private string chassis;
private List<string> Location;
private List<string> Employee;
private List<string> Status;
private FileService fileService;
private List<RepairSection> sections;
private bool isAddNew;
//for new repair section modal
private RepairSection _newSection;
protected override async Task OnInitAsync()
{
ro = new RepairOrder();
Location = new List<string>();
Employee = new List<string>();
Status = new List<string>();
sections = new List<RepairSection>();
isAddNew = false;
fileService = new FileService();
RoData = new RepairOrderDataAccess(context);
await LoadData();
}
private async Task LoadData()
{
Location = await Task.Run(() => fileService.ReadLocation());
Employee = await Task.Run(() => fileService.ReadEmployees());
Status = await Task.Run(() => fileService.ReadStatus());
}
public string IsCApprovedChecked(RepairSection sc)
{
if (sc.CustomerApproved == true)
{
return "checked";
}
else
{
return "";
}
}
public string IsWarrantyChecked(RepairSection sc)
{
if (sc.Warranty == true)
{
return "checked";
}
else
{
return "";
}
}
protected void AddSectionCalled()
{
_newSection = new RepairSection();
this.isAddNew = true;
}
private void AddNewSection()
{
sections.Add(_newSection);
this.StateHasChanged();
this.isAddNew = false;
}
private void CloseModal()
{
this.isAddNew = false;
}

There is a problem with the way you have bound the onclick event of the button on the modal form.
you have onclick="AddNewSection()"
- writing it this way will likely be interpreted as a pure javascript call and if you inspect the DOM in your browser tools, you will likely see onclick="AddNewSection()" on the button.
You should have onclick="#AddNewSection"
- this way, Blazor will hook up the onclick event to your C# method.

align dropdown and input with submit button in line

From bootstrap, it only have the combination of button with dropdown, if i want to have like this
how should i write in my view?
from my view
<div class="container">
<div class="row form-group">
<div class="input-group">
#Html.DropDownList("dateList", ViewData["dateList"] as IEnumerable<SelectListItem>, new { #id = "dateList", #class = "form-control" })
<input type="text" class="form-control" readonly="readonly" id="DCRDate" name="DCRDate" value="" />
<button id="submitBtn" type="submit" class="btn btn-default">Change</button>
</div>
</div>
</div>
i had this
with André Franciscato Paggi codes
with span the dropdownlist it become like
<div class="container">
<div class="row form-group">
<div class="input-group">
<span class="input-group-btn">
#Html.DropDownList("dateList", ViewData["dateList"] as IEnumerable<SelectListItem>, new { #id = "dateList", #class = "form-control" })
</span>
<input type="text" class="form-control" readonly="readonly" id="date" name="date" value="" />
<button id="submitBtn" type="submit" class="btn btn-default">Change</button>
</div>
</div>
</div>

You can surround the button and the select with a span tag each, using the class "input-group-btn".
Here is a snippet:
#myselect{
width: 80px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<span class="input-group-btn">
<select name="myselect" id="myselect" class="form-control">
<option selected>Foo</option>
<option>Bar</option>
</select>
</span>
<input type="text" class="form-control" readonly="readonly" id="DCRDate" name="DCRDate" value="Input here" />
<span class="input-group-btn">
<button id="submitBtn" type="submit" class="btn btn-default">Change</button>
</span>
</div>

Multiple iterated varied input elements using jquery

I am using MVC3 razor with the following markup:
<div class="budget">
<!--line item-->
<div class="budget-row">
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="two mobile-one columns">
<label class="right inline">Item:</label>
</div>
<div class="ten mobile-three columns">
#Html.TextBox("description[]", "", new { #class = "expand" })
</div>
</div>
<div class="row">
<div class="two mobile-one columns">
<label class="right inline">Cost:</label>
</div>
<div class="two mobile-one columns field-left">
#Html.TextBox("amount[]", "0", new { #class = "expand" })
</div>
<div class="one mobile-one columns">
<label class="right inline">Markup:</label>
</div>
<div class="one mobile-one columns field-left">
#Html.TextBox("markup_amount[]", "0", new { #class = "expand" })
</div>
<div class="one mobile-one columns field-left">
<select id="markup_type[]" style="display:none;">
<option value="P" SELECTED>%</option>
<option value="D">$</option>
</select>
</div>
</div>
</div>
</div><!--row-->
</div>
<!--end line item-->
<a class="button radius small success middle" href="#" id="submit">Submit</a>
</div>
The "budget" div is the overall div, the "budget-row" div can be one or multiple lines. I am looking for an iteration catching values of each input. I have tried this:
$("#submit").click(function() {
$(".budget input[type=text]").each(function() {
alert(this.value);
});
return false;
});
Frankly, tried so many things, that might not be even close at this point. And that only returns my text boxes, as well.
Thanks
Edit
This is adding the output code:
<div class="budget">
<!--line item-->
<div class="budget-row">
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="two mobile-one columns">
<label class="right inline">Item:</label>
</div>
<div class="ten mobile-three columns">
<input class="expand" id="description__" name="description[]" type="text" value="" />
</div>
</div>
<div class="row">
<div class="two mobile-one columns">
<label class="right inline">Cost:</label>
</div>
<div class="two mobile-one columns field-left">
<input class="expand" id="amount__" name="amount[]" type="text" value="0" />
</div>
<div class="one mobile-one columns">
<label class="right inline">Markup:</label>
</div>
<div class="one mobile-one columns field-left">
<input class="expand" id="markup_amount__" name="markup_amount[]" type="text" value="0" />
</div>
<div class="one mobile-one columns field-left">
<select id="markup_type[]" style="display:none;">
<option value="P" SELECTED>%</option>
<option value="D">$</option>
</select>
</div>
</div>
</div>
</div><!--row-->
</div>
<!--end line item-->
<a class="button radius small success middle" href="#" id="submit">Submit</a>
</div>

This is what I came up with for getting your selected value. Not sure if this was all you were needing, or if there was more.
<div class="row">
<div class="two mobile-one columns">
<label class="right inline">Cost:</label>
</div>
<div class="two mobile-one columns field-left">
<input type="text" value="1" class="first" />
</div>
<div class="one mobile-one columns">
<label class="right inline">Markup:</label>
</div>
<div class="one mobile-one columns field-left">
<input type="text" value="2" class="second" />
</div>
<div class="one mobile-one columns field-left">
<select id="markup_type[]" class="first">
<option value="A" SELECTED>%</option>
<option value="B">$</option>
</select>
</div>
<div class="one mobile-one columns field-left">
<select id="test_type[]" class="second">
<option value="Z" SELECTED>%</option>
<option value="Y">$</option>
</select>
</div>
</div>
$(document).ready(function () {
$("#submit").click(function () {
$("select :selected").each(function(){
alert($(this).val());
//get the corresponding input for this select
var cName = $(this).parent().attr("class");
var div = $(this).closest(".row");
var input = $("." + cName, div);
alert($(input).val());
});
return false;
});
});
You can check out the fiddle here.
Notice that we are tying a select to an input using a class. In this example I've marked the input with class="first" and the select with class="first" to tie them together.
Let me know if this works for you or not.