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.
Related
I have three radio buttons on my HTML form i.e.
<input type="radio" name="radioBtn" id="rdBtn1" />
<input type="radio" name="radioBtn" id="rdBtn2" />
<input type="radio" name="radioBtn" id="rdBtn3" />
I want to see which radio button is selected so that I can further process. I am trying this
#functions{
var choice = Request.Params["radioBtn"];
}
But the "choice" only returns 'on'. How can I know which one of these radio buttons are actually active at this point of time?
Currently your radio buttons aren't in any way different from one another, as far as the form is concerned. Give them values:
<input type="radio" name="radioBtn" id="rdBtn1" value="rdBtn1" />
<input type="radio" name="radioBtn" id="rdBtn2" value="rdBtn2" />
<input type="radio" name="radioBtn" id="rdBtn3" value="rdBtn3" />
That way the form can post more than just the binary option of whether or not the radio button was selected. Then choice should end up with the value of the one which was selected.
This question already has answers here:
MVC which submit button has been pressed
(11 answers)
Closed 6 years ago.
In my MVC form starting with #Html.BeginForm I have put two submit buttons:
<div>
<input id="submitButton" type="submit" value="Register" />
<input type="hidden" name="btn" value="register" />
</div>
<div>
<input id="cancelButton" type="submit" value="Cancel" />
<input type="hidden" name="btn" value="cancel" />
</div>
But in my action method, the value that is coming in is still "register" from first button, even if I click the Cancel button.
How can I fix this?
The hidden fields have nothing to do with the buttons, but their values are what you are receiving, regardless of which submit button you click.
Remove the hidden fields, and add the name="btn" attribute to each of the buttons. The value you receive in btn will be the value (and also the exact text) of the button that was pressed.
Example:
<div>
<input id="submitButton" type="submit" name="btn" value="Register" />
</div>
<div>
<input id="cancelButton" type="submit" name="btn" value="Cancel" />
</div>
I am trying to create a "next" button and a "back" button in my form. I want the "next" button to validate and submit the form. And I want the "back" button to simply go back to the "cart" page. But the "back" button keeps validating and trying to submit the form.
Here is my code:
<div class="buttons">
<button class = "button" id = "back">Back</button>
<input type="submit" value="Next" class="button" />
</div>
The reason I need the back link to be a button is so that it will look the same as the "next" button. Any ideas how I can get this working correctly?
A <button> element always submits the form. The same goes for a <input type="submit" /> element.
But a <input type="button" /> will not submit the form. That's what you want.
<div class="buttons">
<input type="button" class="button" id="back" onclick="window.location = '#Url.Action("Index", "Cart")';">Back</a>
<input type="submit" value="Next" class="button" />
</div>
Edit I'm not sure if you can put that inside an <a> element though. I reworked my example to use click events rather than a link. If it is valid to put inside a <a> element (can anyone confirm?), you can do it like that as well.
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>
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.