I have a simple form in my MVC3 site that allows users to create a contest entry. This has been implemented and works fine currently, but a request has been made to now allow users to make their entries private.
In my Entry model I added a boolean isPrivate. Then I figured I would change the HTML forms for create and edit to include a checkbox to specify whether the entry should be private.
I'm new to MVC3, but I figured I could simply change the action that the form posts to by including a new boolean parameter.
This unfortunately doesn't seem to work. Can anyone tell me how checkbox values are passed from an HTML form to a post action? This is probably fairly common, but I can't seem to find an example for this on the web. Almost all the examples out there simple show text inputs, I can't find anything with checkboxes.
Form:
<form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return isValidInput()">
<input type="text" id="EntryTitle" name="EntryTitle" />
<div id="invalidTitle" class="invalidData"></div>
<p id="char-remaining">(100 characters remaining)</p>
<input type="text" id="EntryVideo" name="EntryVideo" />
<div id="invalidVideo" class="invalidData"></div>
<p id="vid-desc">(URL of the Video to Embed)</p>
<input type="file" id="ImageFile" name="ImageFile" />
<div id="invalidImage" class="invalidData"></div>
<p id="file-desc">(200x200px, jpeg, png, or gif)</p>
<textarea id="EntryDesc" name="EntryDesc"></textarea>
<div id="invalidDesc" class="invalidData"></div>
<br />
<input type="checkbox" id="isPrivate" name="isPrivate" />
Make my entry private.
<br />
(private entries will only be viewable by you and site administrators)
<br />
<button id="new-entry-save">save</button>
</form>
Action:
public ActionResult Create(string EntryTitle, string EntryVideo, HttpPostedFileBase ImageFile, string EntryDesc, Boolean isPrivate)
{
...
}
add value="true" to checkbox, also add hidden input after it with same name and value=false, i.e.:
<input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
<input type="hidden" name="isPrivate" value="false" />
If you don't want to use hidden, use bool? instead of bool (e.g. nullable)
The other option is to have hidden text field with the same name to force data in unchecked field to be part of the post. See Post the checkboxes that are unchecked.
<form>
<input type='hidden' value='0' name='selfdestruct'>
<input type='checkbox' value='1' name='selfdestruct'>
</form>
Related
I have a simple form for payment:
<form method="POST" action="https://www.liqpay.ua/api/3/checkout" accept-charset="utf-8">
<input name="data" value="{{data}}" />
<input name="signature" value="{{signature}}" />
<input type="image" src="//static.liqpay.ua/buttons/p1ru.radius.png" />
</form>
The problem is that I can't press the button for payment, it's just don't work
I can assure you that the form is working I've checked this on C# with some changes:
<div class="container">
<form method="POST" action="https://www.liqpay.ua/api/3/checkout" accept-charset="utf-8">
<input type="hidden" name="data" value="#ViewData["PaymentData"]" />
<input type="hidden" name="signature" value="#ViewData["Signature"]" />
<input type="image" src="//static.liqpay.ua/buttons/p1ru.radius.png" />
</form>
</div>
And all the parametress a passed correctly. It seems like Angular dont let me go to the link or sth like that. Help pls.
UPDATE
Ok I changed the form like this:
<form [formGroup]="payForm" (ngSubmit)="LiqPay()" #formDir="ngForm" novalidate>
<input formControlName="data" name="data" value="{{data}}" />
<input formControlName="signature" name="signature" value="{{signature}}" />
<button type="submit" class="btn btn-default" ng-href="https://www.liqpay.ua/api/3/checkout">go</button>
</form>
with LiqPay method:
LiqPay(){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.payForm.value.data = this.data;
this.payForm.value.signature = this.signature;
this._http.post('https://www.liqpay.ua/api/3/checkout',
this.payForm,{headers}).map((response: Response) => response.json());
}
Now I guess the request is sent but it doesn't redirect on the desired link (https://www.liqpay.ua/api/3/checkout). So how can I change the form to redirect to this link with post data?
In the LiqPay method you are trying to send a post request to https://www.liqpay.ua/api/3/checkout. And in the button you have a ng-href attribute (trying to browser go to that url). I think that is not correct. You are sendind an asynchronous requets, and simultaneously sendind your user to that url.
I can understand, you are sending a form to a payment checkout? ok, you can use action in the form, exactly like the C# example.
I have tested your initial code
<form method="POST" action="https://www.liqpay.ua/api/3/checkout" accept-charset="utf-8">
<input name="data" value="{{data}}" />
<input name="signature" value="{{signature}}" />
<input type="image" src="//static.liqpay.ua/buttons/p1ru.radius.png" />
</form>
And it works...
You can view it here:
https://jsfiddle.net/L1ruajzn/
I'm building a webform in c# .net mvc using mongodb to store information. The form works with a company object that has a property that is a List of Addresses, called addressdata. When the form is submitted, the company object is sent to the controller and then upserted into MongoDB. The input names take the form
<input type="text" name="Company.addressdata[a].city" />
Where "a" is the index in the list. This all works great! The list of address objects is created upon submission and inserts into mongoDB.
However, I just added the ability to delete addresses, and now I'm running into trouble. I have noticed that when a user deletes the first row, all the rows after are lost. So, if they delete the 0 index, the Company object will not populate the list of Addresses and thus they will not go into MongoDB.
Is there a way to work around this? Is this how it's designed to work? It seems like too much to renumber all of the following rows with the new index, but is that what it takes? Or is there another way?
In my experience, that's by design. The indexes must start from 0, or you have to define your own indexes for each of them with a special element.
This article shows an example of that: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/
<form method="post" action="/Home/Create">
<input type="hidden" name="products.Index" value="cold" />
<input type="text" name="products[cold].Name" value="Beer" />
<input type="text" name="products[cold].Price" value="7.32" />
<input type="hidden" name="products.Index" value="123" />
<input type="text" name="products[123].Name" value="Chips" />
<input type="text" name="products[123].Price" value="2.23" />
<input type="hidden" name="products.Index" value="caliente" />
<input type="text" name="products[caliente].Name" value="Salsa" />
<input type="text" name="products[caliente].Price" value="1.23" />
<input type="submit" />
</form>
So you have options, either:
Update indices when deleting, or
Define arbitrary indices
I`ve got three radio buttons in my form. Every rbutton has own label as below
<form method="post">
<input type="radio" name="radio" "onclick="removeField()">
<label>Text1</label>
<br>
<input type="radio" name="radio" onclick="removeField()">
<label>Text2</label>
<br />
<input type="radio" name="radio" onclick="addField()">
<b>Another</b>
<br />
How I can get in my c# code label of radiobutton which is on?
You could just make the radio button's value be the same text as the label. When you post the form it should give you a key/value pair of 'radio=Text1' (or whatever.
<form method="post">
<input type="radio" name="radio" value="Text1" "onclick="removeField()">
<label>Text1</label>
<br>
<input type="radio" name="radio" value="Text2" onclick="removeField()">
<label>Text2</label>
<br />
<input type="radio" name="radio" value="Another" onclick="addField()">
<b>Another</b>
...
A few additional notes:
If label wraps the radio button, it becomes clickable and will toggle the radio button. Make sure to put the 'onclick' on the label tag if you do that.
The name 'radio' for a form field is not illegal, but I would suggest it's complicated. That radio button represents a property of your viewmodel (or of something) so I would suggest calling it something like 'SelectedText' or whatever.
I am developing a website using asp.net c# and I want to put a form inside the page. Now as aspx pages have the form tag I do not want to nest another form inside this as it will invalidate my html. But I need this form to use GET rather than POST. I know I can change the postback url in the asp:button. Can this be done without using logic in the codbehind?
Change the method to GET just for this form not every thing on the page
change the target to _blank if possible.
Example in html of what I want.
<form action="http://maps.google.co.uk/maps" method="get">
<p><label for="saddr">Your postcode</label>
<input type="text" name="saddr" id="saddr" value="" />
<input type="submit" value="Go" />
<input type="hidden" name="daddr" value="[destination]" />
<input type="hidden" name="hl" value="en" /></p>
</form>
you can use jquery to accomplish this
$(document).ready(function() {
$("#buttonId").click(function() {
$("#formId").attr("method", "get");
});
});
the above snippet, fires when the button with id 'buttonId' is clicked. it changes the method attribute of the form with id 'formId'
You can have multiple forms in an html. ASP.NET page also supports multiple form tags, however only one of then can be server side form (runat="server").
So I will suggest that you add another form tag within your page - some thing like
...
<body>
<form runat="server">
... server controls etc
</form>
<!-- your form -->
<form action="http://maps.google.co.uk/maps" method="get">
<p><label for="saddr">Your postcode</label>
<input type="text" name="saddr" id="saddr" value="" />
<input type="submit" value="Go" />
<input type="hidden" name="daddr" value="[destination]" />
<input type="hidden" name="hl" value="en" /></p>
</form>
</body>
</html>
Note that you cannot put any server side control in your html tag. So you have to use html controls and manage them within page code using Request object.
What is the best way to handle this:
class Option {
int id;
string name;
}
class QuoteItem
{
IList<Option> options;
}
class QuoteViewModel {
IList<Option> allOptions;
QuoteItem quoteItem;
}
Basically, I have all the available options in allOptions. I want to have a checkbox that puts another Option (even if its just its id) into the QuoteItem.options list when it is checked. How would I accomplish this? Would it best be an IList<bool> and bind it after the fact?
I suggest you take look at this blog entry from Phil Haack about model binding to a list
For your situation you can use simple model binding to a IEnumerable<int> options, where the values will be the id of your selected options.
your input view will then look something like this:
<form method="post" action="/QuoteItems/SetOptions">
<input type="hidden" name="options" value="1" />
<input type="hidden" name="options" value="4" />
<input type="hidden" name="options" value="2" />
<input type="hidden" name="options" value="8" />
<input type="submit" />
</form>
The hidden inputs contain your selected optionId's, note name attribute which is the same for each hidden input. The default model binder can bind this to a list of integers.
The thing you need to do next is adding / removing a hidden options input at client side depending on whether an item is selected in your "all-options" select control.