I can output a list, and I can add and remove items from the list, client side with javascript and partial views. But the resulting non-sequential indices cause a problem when the form is submitted.
For example, this code from the first link below
<input id="items_0__Amount" type="text" value="Apple" name="items[0].Title">
<input id="items_1__Amount" type="text" value="Banana" name="items[1].Title">
<input id="items_2__Amount" type="text" value="Orange" name="items[2].Title">
looks like this if I delete a row
<input id="items_0__Amount" type="text" value="Apple" name="items[0].Title">
<input id="items_2__Amount" type="text" value="Orange" name="items[2].Title">
or like this if I use js to add a new row with a partial view
<input id="items_0__Amount" type="text" value="Apple" name="items[0].Title">
<input id="items_1__Amount" type="text" value="Banana" name="items[1].Title">
<input id="items_2__Amount" type="text" value="Orange" name="items[2].Title">
<input id="items_0__Amount" type="text" value="Apple" name="items[0].Title">
Here are links to a previous question and a Haacked blog post that address the issue, but don't solve my problems completely.
MVC/Razor model binding collections when an element is missing
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/
In addition, this content is from the MVC 2 era.
Are there other ways to work with lists where the index can be managed?
Are there better ways to work with the index for Razor views / partial views in the latest versions of MVC?
Related
I'm working on <form> that have multiple groups of <input> with the same attributes name='product-code' and name='amount' (because of structure).
For better understanding, example: form where you can choose color and amount of one specific product to add in a basket, but I want to send product code from the catalog (because each color of this product is another item in a catalog) instead of sending color names.
And I'm trying to understand how it should be done semantically correctly and serialized. Should it be one form and one post request or many forms and many post requests? What's your opinion?
<form>
<div>
<input type="text" name="product-code" value="ST912600">
<input type="number" name="amount" value="2">
</div>
<div>
<input type="text" name="product-code" value="ST821806">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST467165">
<input type="number" name="amount" value="1">
</div>
<div>
<input type="text" name="product-code" value="ST348499">
<input type="number" name="amount" value="1">
</div>
<div>
<input type="text" name="product-code" value="ST545081">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST430287">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST988144">
<input type="number" name="amount" value="4">
</div>
<button type="submit">Send</button>
</form>
I'm expecting the server will parse request with multiple data as an array
You can't use the same name in form tag. Visual your form like an associated array.
name => value
name2 => value2
So if you send a form with the same name, you create a conflict.
But you can use a simple form, change name attribut like you want and set a class named product-code for example. preventDefault with JS on your submit button and use getElementsByClassName and get his value etc. save in an array and create a loop for submit one by one with formElt.submit() funtion.
Or create a lot of forms in HTML.
I am using bootstrap for templating. I have a group of checkboxes. I want to use required property of bootstrap but, when I want to use it for group of checkboxes not for individual.
Is there is any way to impletement this.
Here is the reference image http://grab.by/Hm5m
Given
<form>
<input type="checkbox" name="whatever" value="1" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="2" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="3" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="4" required="required" class="required_group" />
<input type="submit" name="submit" />
</form>
You could make it so that the user is required to check at least one checkbox:
$('form').on('click', '.required_group', function(){
$('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});
This solution relies on the HTML5 required attribute (and browser support). It doesn't require any particular Bootstrap code, but it uses jQuery (which you're already using with Bootstrap), so you can customize it with the Bootstrap classes and widgets that make sense for your project.
I have on my web application (Play Framework 2.2.1 & Scala) a list of customers who are displayed with ajax and AngularJS. It works fine, and now I want to add a new customer dynamically in my list, with a JS pop up I've made (with jQuery UI).
I search first how to display on browser data sended by the HTML/AngularJS form, but when I click on my submit button, nothing happen... And I don't know why, other AngularJS actions works.
Here is my code :
JavaScript
function AddCustomerController($scope) {
$scope.add = function() {
$scope.customers.push({id: $scope.email, phone: $scope.phone, isActivated: $scope.activation, name: $scope.name, roleType: $scope.roleType});
}
}
HTML
<div id="dialogAddCustomer" title="title" ng-controller="AddCustomerController">
<label id="dialNewCustomerName">Add Customer</label>
<label class="lblPopUp">Email</label>
<input type="text" id="dialNewCustomerEmail" class="form-control" ng-model="email" />
<label class="lblPopUp">Phone Number</label>
<input type="text" id="dialNewCustomerPhone" class="form-control" ng-model="phone" />
<label class="lblPopUp">Customer Activated ?</label> <br />
<input type="radio" name="activation" id="dialNewCustomerYes" value="1" ng-model="activation" /> Yes
<input type="radio" name="activation" id="dialNewCustomerNo" value="2" ng-model="activation" /> No
<label class="lblPopUp">Name</label>
<input type="text" id="dialNewCustomerName" class="form-control" ng-model="name" />
<label class="lblPopUp">Role Type</label> <br />
<select class="form-control" ng-controller="RoleTypesController">
<option ng-repeat="roleType in roleTypes" value="{{roleType.id}}" ng-model="roleType">{{roleType.name}}</option>
</select>
<br />
<button class="btn btn-default" type="submit" ng-click="add()">Validate</button>
</div>
Second, I don't know how to push data to my controller (I've searched already on the web) correctly to insert new customer in database.
Any idea, or tips ?
Maybe you should add AddCustomerController to the HTML, or move the add() function to the CustomerController.
You should also just put a customer object into scope, and add the individual fields to it, and then access it via customer.email, customer.phone and so on. That will help prevent scoping issues and also make the controller code a lot simpler.
Also, this has nothing to do with Play, as you don't send any data to the server (check $http in Angular's documentation on how to do this).
Nothing is ever sent to the server because the code never instructs AngularJS to send anything.
Your add function modifies local scope only, and doesn't invoke $http.post().
You may be thinking too much in html terms and not enough in AngularJS terms. With angular you don't need to have a form; it can be handy - particularly for validation - but it's not required. The model is what is key, with or without a form.
In general, I suggest having your inputs modify parts of an object, so instead of:
<input type="text" ng-model="email" />
<input type="text" ng-model="phone" />
<button type="submit" ng-click="add()">Add</button>
do instead:
<input type="text" ng-model="customer.email" />
<input type="text" ng-model="customer.phone" />
<button type="submit" ng-click="add(customer)">Add</button>
Controller then something like:
function AddCustomerController($scope, $http) {
$scope.customer = {};
$scope.add = function(newCustomer) {
// this assumes newCustomer has been validated
$http.post('/api/customers', newCustomer); // TODO: handle response
}
}
As a side note, the more you get into angular, the less you'll need jquery and jquery ui - I have a rule that a page is either jquery or angular, but never both. YMMV.
Alright so I saw a question similar to this but thought my situation was a little different and warranted a question. So I am working on a site that allows you to select from two dropdowns. I'm using jQuery to keep track of when these drop downs change. Then based off of the change I update the PayPal hidden form(Cart Upload Command).
Then once the user is done selecting the options they click the checkout button which takes them to the PayPal page that shows them the items they selected and they can begin the checkout process through PayPal. It sounds so easy when I say it like this but then I read that it needs to be encrypted. My question is how do I go about encrypting a dynamically generated form. They suggest using the PayPal button creation tool. Well that would make sense if I had a static amount, but I do not.
HTML
<label for="space-selector">Select Space</label>
<select class="form-control" id="space-selector" name="space-selector">
<option value="150">10' x 10'</option>
<option value="225">20' x 10'</option>
<option value="300">30' x 10'</option>
<option value="500">Custom</option>
</select>
<label for="parkingpass-selector">2 Day Parking Pass - $50</label>
<select class="form-control" id="parkingpass-selector" name="parkingpass-selector">
<option value="0">No</option>
<option value="50">Yes</option>
</select>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="jestewart.11#gmail.com">
<input type="text" name="item_name_1" value="Space Selected" readonly>
<input type="text" name="amount_1" value="1.00"readonly>
<input type="hidden" name="shipping_1" value="1.75">
<input type="text" name="item_name_2" value="Parking Pass" readonly>
<input type="text" name="amount_2" value="2.00" readonly>
<input type="hidden" name="shipping_2" value="2.50">
<input type="submit" value="Checkout">
</form>
jQuery
$(function (){
//space selector change
$("select[name=space-selector]").change( function () {
//update the hidden form values based off of selectors
$("input[name=item_name_1]").val($(this).find(":selected").text());
$("input[name=amount_1]").val($(this).find(":selected").val());
});
//parking pass selector change
$("select[name=parkingpass-selector]").change( function () {
//update the hidden form values based off of selectors
$("input[name=item_name_2]").val($(this).find(":selected").text());
$("input[name=amount_2]").val($(this).find(":selected").val());
});
});
Here is the fiddle to show you functionality. Fiddle
You do not need encrypting the amount and others. The only important thing is to make ALL verifications on the server.
Paypal has an API who permise that. IPN
Some links :
https://developer.paypal.com/webapps/developer/docs/classic/products/instant-payment-notification/
http://www.micahcarrick.com/paypal-ipn-with-php.html
The standard HTML 5 form label wants an ID to link the label to the input.
<form>
<label for="male">Male</label>
<input type="radio" id="male"/>
<label for="female">Female</label>
<input type="radio" id="female"/>
</form>
As most JS developers know, using IDs leaks globals - in this case, window.male and window.female are created.
How can I use form labels without creating globals?
use the other way:
<form>
<label>Male <input type="radio"></label>
<label>Female <input type="radio"></label>
</form>