I am wanting to redirect to another page but at the same time being able to grab the details of the button that was selected. I was reading up on how onsubmit works with HTML and radio buttons work. Prior to adding buttons, I had a button and whenever it was clicked it would redirect me to the next page. I still want to do the same thing, just being able to add radio buttons to the view and submit that radio button so that way I can grab the information from the button that was selected.
I attempted:
#{
ViewData["Title"] = "Index";
}
<h2>Customer</h2>
<form method="POST">
<input type="radio" value="1" /><label>Valid</label>
<input type="radio" value="2" /><label>Wrong</label>
<input type="radio" value="3" /><label>InValid</label>
<a href="#("window.location.href='" + #Url.Action("SecIndex", "Second") + "'");">
<input type="submit" value="Address Validation" />
</a>
However, this does not redirect me to the page that I needed it to redirect to. I also noticed that once I select buttons I cannot unselect, is that apart of the radio button feature?
I also noticed that once I select buttons I cannot unselect, is that apart of the radio button feature
Yes. That's how it works.
I still want to do the same thing, just being able to add radio buttons to the view and submit that radio button so that way I can
grab the information from the button that was selected.
If you want to post the selected value to backend, you could set name for radio buttons. Because model binding system will bind value by name.
View:
<form method="POST" asp-action="SecIndex" asp-controller="Second">
<input type="radio" value="1" name="Status"/><label>Valid</label>
<input type="radio" value="2" name="Status"/><label>Wrong</label>
<input type="radio" value="3" name="Status"/><label>InValid</label>
<input type="submit" value="Address Validation" />
</form>
Controller:
public class SecondController : Controller
{
[HttpPost]
public IActionResult SecIndex(string Status)
// you can get "1" or "2" or "3" which based on your checked radio button
{
return RedirectToAction("Privacy");
}
}
HTML doesn't have store capability. you can't grab data without a programming language. But you can click to redirect to another page.
Use the button tag and use the anchor tag in the button, rather than -
Related
I have a page that has dynamic rows that show and hide based on radio button selection. There is also validation making sure that each field (that is shown) is populated and has a valid value. When the user submits the page it validates the fields and posts back and while the text box values are stored all the radio buttons become deselected and the dynamic rows are all hidden.
I was wondering how to maintain the selection of the radio buttons and the visible/hidden fields after a postback.
<div class="form-group">
<label asp-for="HaveYouEnteredTheProperty">Have you entered the property?</label>
<div asp-for="HaveYouEnteredTheProperty" class="btn-group btn-group-toggle" data-toggle="buttons" style="width:100%">
<label style="width:50%" class="btn btn-success">
<input type="radio" name="VisitDetailsRadio" id="propYes" value="Yes"/> Yes
</label>
<label style="width:50%" class="btn btn-danger">
<input type="radio" name="VisitDetailsRadio" id="propNo" value="No" /> No
</label>
</div>
<span asp-validation-for="HaveYouEnteredTheProperty" class="text-danger"></span>
</div>
this is one of my radio buttons on the cshtml page
$("input[name=VisitDetailsRadio]").change(function () {
if ($(this).val() == "No") {
$(".VisitDetailsExpandedYes").hide();
$(".VisitDetailsExpandedNo").show();
$(".EnteredProperty").hide();
}
else {
$(".VisitDetailsExpandedYes").show();
$(".VisitDetailsExpandedNo").hide();
$(".EnteredProperty").show();
}
});
This is the jquery that shows and hides fields based on the radio button selection
if (results.IsValid)
{
_context.Results.Add(model);
_context.SaveChanges();
ModelState.Clear();
return View();
}
else
{
results.AddToModelState(ModelState, null);
return View(model);
}
and this is the validation after pressing the submit button at the end of the form.
Any help would be appreciated.
On a high level, what you need to do is the following:
Treat your CREATE view the same you would do an UPDATE view. You should add Razor syntax for any radiobuttons that should be clicked.
You should use either Razor or Javascript to figure out which dynamic contents to show or hide based on the selected radio buttons.
I got a form with a radio button (button with value 3) that I need to select and a submit button that need to be clicked. The problem is I don't know how to select the radio buttons or click the button since it doesn't have a name or id.
Here is the HTML code:
<input type="radio" name="chosen" value="3" id="a3">
<input type="radio" name="chosen" value="2" id="a2">
<input type="radio" name="chosen" value="1" id="a1">
<input value="Next" type="submit">
Here is the code I've tried for the button (I'm trying to select the button with value 3:
webBrowser1.Document.GetElementsByTagName("input").GetElementsByName("chosen")[2].InvokeMember("click");
but that code won't work and I don't know how to click the button to submit and go on. I need help selecting the radio button and click the submit button. I don't have access to change any of the HTML code.
I'm not quite sure what you meant by "use C# to click". Because basically, the element is displayed and interact in browsers (Chrome, FireFox). And C# is for processing http requests in server (IIS).
So to select/click some html element, you can use jQuery such as
$('input[value="3"]').click();
I've got a form similar to the below, the name attributes have been set with MVC model binding in mind.
At the moment I'm only able to select one radio between the two forms. I want to select a radio button for each form, i.e. one radio button selected per form at any given time. I can't find a way to do this whilst keeping my name attribute naming convention.
Any ideas, thanks.
<div class="form-group-1">
<input type="radio" name="Students[0].Answer1" value=""><br>
<input type="radio" name="Students[0].Answer2" value=""><br>
</div>
<div class="form-group-2">
<input type="radio" name="Students[1].Answer1" value=""><br>
<input type="radio" name="Students[1].Answer2" value=""><br>
</div>
I am passing the input data from the .cshtml page to the action method.
Here is my .cshtml page:
#model passingdata
<form asp-controller="Home" method="post" asp-action="About" >
<button class="btn-danger" type="submit" value="Submit"></button>
<div class="form-group">
<label>
<input asp-for="date" placeholder="Date" class="col-md-8" />
</label>
<label>
Select from these Four Classes
<input type="radio" name="class" asp-for="classselect1" id="classselect1" value="classselect1" class="col-md-4" /> <p> #Model.classname1</p>
<input type="radio" name="class" asp-for="classselect2" id="classselect2" value="classselect2" class="col-md-4" /> <p> #Model.classname2</p>
<input type="radio" name="class" asp-for="classselect3" id="classselect3" value="classselect3" class="col-md-4" /> <p> #Model.classname3</p>
<input type="radio" name="class" asp-for="classselect4" id="classselect4" value="classselect4" class="col-md-4" /> <p> #Model.classname4</p>
</label>
</div>
</form>
And here is my controller code which is invoked when i Click on the button.
[HttpPost]
public IActionResult About(passingdata p)
{
ViewData["Message"] = "Your application description page.";
Teacher.classselect1 = p.classselect1;
Teacher.classselect2 = p.classselect2;
Teacher.classselect3 = p.classselect3;
Teacher.classselect4 = p.classselect4;
Teacher.date = p.date;
return View();
}
The input data like date and bool value from the radiobutton is not passing through the object of the class which contain these variables.
Please help me in this.
If i remember correctly, the Name attribute of each radiobutton is how .net MVC will map the values to your model.
In this case, all of your names are "class", which essentially means you have 1 form field named class with 4 options.
I would recommend using the html helper classes, because they will automatically create the proper html for you. The answer to this post should help: When using .net MVC RadioButtonFor(), how do you group so only one selection can be made?
If you dont want to use the helper just remember that when you submit a form, the data that is posted is based on the name of each form field. .Net does some magic in the background to serialize your Model for you, but essentially you are just submitting data in the format "?prop1=val1&prop2=val2".
Update
I figure maybe I should clarify a little better why what you are doing is not working how you expect.
When you post or put data via a form, it passes the input fields (text box, radio button, checkbox, etc...) as either querystring params or are part of the body. Radio buttons work a little differently than other input type. For a radio button, there are multiple input elements, but only one of them is valid. That is handled by using the name attribute. In your case, all of the names are "class", which means that the only thing being passed to the server is a single "?class={val}" (val is the value of which ever radio button is selected).
If your passingdata model had a property called "class", it would be populated. If your goal is to populated all 4 of the classselect properties with different values, you would need the name of each radio button to be different. But if there was only one radio button with each name, then each property could only have 1 value. You would need multiple RadioButtons with the same name to have multiple values (only one of which is selectable for each property).
Hopefully that clarifies what is wrong and gets you in the right direction.
I looked at several similar questions, but I can't get it working.
I have some radio buttons in a form. Instead of selecting the option and clicking the submit button, I want to submit the form when the user clicks a radio button.
So I hid the submit button and placed a javascript function that emulates the click of the button (I also tried to get it working with the button click, but this doesn't seem to be the problem).
In my View I have:
<script type="text/javascript" src="/Scripts/jquery-1.9.1/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="/Scripts/jquery-1.9.1/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
function change() {
$('#buttonradio').click();
}
</script>
<h2>Dashboard</h2>
<div class="Dashboard" id="itemsDshBrd" style="overflow:auto;height:97%;">
<div id="DshBrdRadioGroup" style="float:right;font-size:small">
<% using (Ajax.BeginForm("Index", "DshBrd", new { value = 1 }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "stations" })) { %>
<input class="radioclass" id="r1" name="radiogroup" type="radio" value="1" onclick="change()" checked/> A
<input class="radioclass" id="r2" name="radiogroup" type="radio" value="2" onclick="change()"/> B
<input class="radioclass" id="r3" name="radiogroup" type="radio" value="3" onclick="change()"/> C
<input class="radioclass" id="r4" name="radiogroup" type="radio" value="4" onclick="change()"/> D
<input id="buttonradio" type="submit" value="Submit" style="visibility:hidden"/>
<% } %>
</div>
<div id="stations">
<% Html.RenderPartial("~/Views/DshBrd/Stations.ascx"); %>
</div>
</div>
*I know that I'm sending value = 1.
In my controller I have:
[HttpPost]
public ActionResult Index(int value)
{
if (Request.IsAjaxRequest())
{
return PartialView("~/Views/DshBrd/Stations.aspx");
}
return View("~/Views/DshBrd/Index.aspx");
}
Where Request.IsAjaxRequest() is never true.
My Web.Config is also OK:
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
Any ideas?
I don't think you're submitting the form correctly.
Try removing the submit button altogether, and replacing your change code with:
function change() {
$("#DshBrdRadioGroup form").submit();
}
It also sounds like your unobtrusive ajax isn't working correctly. Check the following:
ClientValidationEnabled is true in your web.config app settings.
UnobtrusiveJavaScriptEnabled is true in your web.config app settings.
Your referencing jquery.unobtrusive-ajax.min.js script on your page somewhere.
I thinks this issue with your module binder . change you variable name value to radiogroup on your action.
First, you are trying to do a regular post not through AJAX from what you are describing. It will never be true.
So, you need to use something like http://malsup.com/jquery/form/ which makes it easy to do it from AJAX.
Once you are using AJAX to do your submits, you really don't have to use onclick in each radio button element. I would have done it like the following assuming those radio buttons are the only radio buttons using the class radioclass:
$('.radioclass').click(function () {
$(this).parents('form:first').trigger('submit');
});