I'm trying to get the value of the radio button clicked but so far the value is null. The code below has a couple of things going on:
1) when the button is clicked it should move the radio buttons to the left.
2) I need to the get value of which radio button is clicked
The first part works but I can't get the second part. This is my code:
<script>
$(document).ready(function(){
$("#form1").click(function(){
$("#list_of_btns").animate({left: '-150px'});
});
});
</script>
//this is the form for radio button...it must be centered to middle of the page
<div id="list_of_btns" style="padding-top: 80px; position:fixed;">
<div class="row" style="position:fixed;">
<div class="col-md-8 col-md-offset-4" style="position:fixed;">
<div class="list-group" style="position:fixed;">
<form role="radio_button_form" style="position:fixed;">
<div class="radio">
<label><input type="radio" value="male" name="method">male</label>
</div>
<div class="radio">
<label><input type="radio" value="female" name="method">female</label>
</div>
</form>
</div>
</div>
</div>
</div>
//this is the enter button.
<div class="row" style="padding-top: 80px; position:relative;">
<div class="col-md-8 col-md-offset-16" style="position:relative;">
<form id="form1" runat="server" style="position:relative;">
<asp:LinkButton class="btn btn-info" ID="getStarted_btn" runat="server" OnClick="btn_clicked" Text="Enter" />
</form>
</div>
</div>
This is where I am trying to get value of the radio button, in my c# code:
public void btn_clicked (object sender, EventArgs args)
{
Console.Out.WriteLine ("sdsfdsfdfsdf");
if (Request.Form["method"] != null)
{
string selectedGender = Request.Form["method"].ToString();
Console.Out.WriteLine (selectedGender);
}
}
Does anybody have any idea on what I'm doing wrong or is there a better way in achieving this?
I have edited your code and this is working.Plz check
<body>
<form id="form1" runat="server" style="position: relative;">
<div id="list_of_btns" style="padding-top: 80px; position: fixed;">
<div class="row" style="position: absolute;">
<div class="col-md-8 col-md-offset-4" style="position: fixed;">
<div class="list-group" style="position: fixed;">
<div class="radio">
<label>
<input type="radio" value="male" name="method">male</label>
</div>
<div class="radio">
<label>
<input type="radio" value="female" name="method">female</label>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-top: 80px; position: relative;">
<div style="position: relative;">
<asp:LinkButton class="btn btn-info" ID="getStarted_btn" runat="server" OnClick="btn_clicked" Text="Enter" />
</div>
</div>
</form>
Enclose the whole content inside single Form..
Related
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>
I am creating a modal in an aspx form which will add data in database. But it is showing this error
A page can have only one server-side Form tag.
I did the same in another file on same project where I created a Login page which worked completely fine. It also had 2 forms, the default one and the one I created. But here it is showing error although I have tried removing runat="server" from the second form but still no solution.
<body>
<form id="form1" runat="server">
<div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsiblenavbar">
<a class="navbar-brand" href="index.aspx">
<img src="logo.ico" class="img-responsive" /></a>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="index.aspx"><i class="fa fa-home"></i> home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.aspx"><i class="fa fa-sign-out"></i> logout </a>
</li>
<%--<asp:listview runat="server" id="listview1" --%>
</ul>
</div>
</nav>
<p></p>
<style>
p {
line-height: 5px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="user.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">profile info</h5>
<%--<p class="card-text" id="para1"><i class="fa fa-user-circle-o"></i> taimoor baig</p>--%>
<asp:Label ID="label1" CssClass="card-text fa fa-user-circle-o" runat="server"> </asp:Label>
<p class="card-text"><i class="fa fa-user-circle"></i> admin</p>
<p class="card-text"><i class="fa fa-clock-o"></i> last login : xx-xx-xxxx</p>
edit profile
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%;">
<h1>welcome admin</h1>
<div class="row">
<div class="col-md-6">
<iframe src="http://free.timeanddate.com/clock/i6ovwi4o/n106/szw160/szh160/hoc222/hbw6/cf100/hgr0/hcw2/hcd88/fan2/fas20/fdi70/mqc000/mqs3/mql13/mqw6/mqd94/mhc000/mhs3/mhl13/mhw6/mhd94/mmc000/mml5/mmw1/mmd94/hwm2/hhs2/hhl55/hhb18/hhw8/hms2/hml85/hmb18/hmw8/hmr7/hss3/hsl90/hsr5" frameborder="0" width="160" height="160"></iframe>
</div>
<div class="col-md-6">
<div class="card" <%--style="font-size: large;"--%>>
<div class="card-body" style="width: 20rem;">
<h5 class="card-title">new orders</h5>
<p class="card-text">here you can add new orders.</p>
new orders
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">brand</h5>
<p class="card-text">here you can manage brand.</p>
add brand
manage brand
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">product</h5>
<p class="card-text">here you can manage products.</p>
add product
manage products
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">market</h5>
<p class="card-text">here you can manage markets.</p>
add market
manage markets
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">salesman</h5>
<p class="card-text">here you can manage salesman.</p>
add salesman
manage salesman
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">vendor</h5>
<p class="card-text">here you can manage vendor.</p>
add vendor
manage vendors
</div>
</div>
</div>
</div>
</div>
<!-- modal of brand -->
<div class="modal fade" id="form_brand" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">add new brand</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div runat="server" class="modal-body">
<form runat="server">
<div class="form-group" runat="server">
<label>brand name</label>
<%--<input type="text" class="form-control" name="brand_name" id="brand_name" placeholder="enter brand name"/>--%>
<asp:TextBox CssClass="form-control" ID="textbox1" runat="server">
enter brand name
</asp:TextBox>
</div>
<div class="form-group">
<label>brand sector name</label>
<%--<input type="text" class="form-control" id="brand_sector_name" placeholder="enter brand sector name"/>--%>
<asp:TextBox ID="textbox2" CssClass="form-control" runat="server">
enter brand sector name
</asp:TextBox>
<small id="brand_sector__error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label>vendor dealing</label>
<%--<input type="text" class="form-control" id="vendor_dealing" placeholder="enter vendor name"/>--%>
<asp:TextBox ID="textbox3" CssClass="form-control" runat="server">
enter vendor name
</asp:TextBox>
<small id="vendor_error" class="form-text text-muted"></small>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
<button type="button" class="btn btn-primary">add</button>
</div>
</div>
</div>
</div>
I expect a webform with a modal displaying after pressing the "add brand" button
Looks like you have two form tag, 1 in master page and 1 in the page that throws the error.
Try to remove 1
I have to create a textbox and button dynamically on page load and on button click have to check the textbox value is not greater than the amount value give with radio for each row. For example - if value in radio is 500$ then textbox value should be greater than 500$ or equal if less then the button in this panel should be disabled.
<asp:Repeater runat="server" ID="RP_R"><ItemTemplate>
<div class="well">
<div class="row">
<div class="col-sm-12 ">
<label class="radio-inline" style="font-size:20px;margin-left:-1px;"><input type="radio" name="reward"><%# Eval("_amount") %> or more</label>
</div>
</div>
<div class="row" style="font-size:15px;" >
<hr/>
<div class="col-sm-5 col-xs-6" style="padding-left:20px;">
<label><%#Eval("name") %></label>
<p><%#Eval("details") %></p>
</div>
<div class="col-sm-offset-3 col-sm-3 col-xs-6">
<label>Estimated Delivery </label>
<p><%#Eval("estimated_delivery_date") %></p>
</div>
</div>
<div class="clearfix"></div>
<hr/>
<div class="row">
<div class="col-sm-12">
<label style="font-size:16px;padding-left:5px;" >Amount Raised</label>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-xs-8">
<asp:TextBox runat="server" ID="txt_reward" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-2 col-xs-3">
<button type="button" class="btn btn-success" runat="server" id="btn_r">Continue</button>
</div>
</div>
</div>
</ItemTemplate></asp:Repeater>
Here I am implementing bootstrap tab control in asp.net application.
1) On click on next i want to go to next tab.
I want to make tab control working by clicking on tabs of tab control to go to next tab or by clicking on next button.
<form id="form1" runat="server">
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#personal">Personal Information</a></li>
<li><a data-toggle="tab" href="#professional">Professional Information</a></li>
<li><a data-toggle="tab" href="#accountinformation">User Account Infromation</a></li>
</ul>
<div class="tab-content">
<div id="personal" class="tab-pane fade in active">
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-4">
<span class="Star-clr">*</span>First Name :
</div>
<div class="col-sm-8">
<asp:TextBox ID="txtName" runat="server" placeholder="First Name"</asp:TextBox>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-2">
</div>
<div class="col-sm-10" style="float: right">
<asp:Button ID="btnNext" Width="150" runat="server" Text="NEXT" />
</div>
</div>
</div>
</div>
</div>
<div id="professional" class="tab-pane fade">
</div>
<div id="accountinformation" class="tab-pane fade">
</div>
</div>
</div>
</form>
Image of Tab control:
Create a button after your content divs and call function on this button
<input type="button" value="Next" onclick="ShowNextTab();" />
function ShowNextTab() {
if ($('.nav-tabs > .active').next('li').length == 0) //If you want to select first tab when last tab is reached
$('.nav-tabs > li').first().find('a').trigger('click');
else
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
Below is a complete solution
HTML
<form id="form1" runat="server">
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#personal">Personal Information</a></li>
<li><a data-toggle="tab" href="#professional">Professional Information</a></li>
<li><a data-toggle="tab" href="#accountinformation">User Account Infromation</a></li>
</ul>
<div class="tab-content">
<div id="personal" class="tab-pane fade in active">
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-4">
<span class="Star-clr">*</span>First Name :
</div>
<div class="col-sm-8">
<asp:TextBox ID="txtName" runat="server" placeholder="First Name"></asp:TextBox>//close tag is missing
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-2">
</div>
<div class="col-sm-10" style="float: right">
<asp:Button ID="btnNext" Width="150" runat="server" Text="NEXT" />
</div>
</div>
</div>
</div>
</div>
<div id="professional" class="tab-pane fade">
</div>
<div id="accountinformation" class="tab-pane fade">
</div>
<input type="button" value="Next" onclick="ShowNextTab();" />
<input type="button" value="Prev" onclick="ShowPrevTab();" />
</div>
</div>
</form>
JavaScript
function ShowNextTab() {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
function ShowPrevTab() {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
}
I am using Webdriver C#, there is a drop down on the form. It's id value is dynamic
id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52311_3_52311_3_DDL"
the number: 52311 changes every time the form is opened.
How do i select the item in the drop down?
I have tried the following code - I want to select Switzerland value in the drop down:
Thanks,
IWebElement dropDownListBox =
<form id="aspnetForm" enctype="multipart/form-data" action="/33985/quality-assurance-committee/472/application" method="post" name="aspnetForm">
<input id="__EVENTTARGET" type="hidden" value="" name="__EVENTTARGET"/>
<input id="__EVENTARGUMENT" type="hidden" value="" name="__EVENTARGUMENT"/>
<input id="__VIEWSTATE" type="hidden" value="/wEPDkPz/fw==" name="__VIEWSTATE"/>
<input id="__EVENTVALIDATION" type="hidden" value="/wEWOfc=" name="__EVENTVALIDATION"/>
<div/>
<script type="text/javascript"> //<![CDATA[ var theForm = document.forms['aspnetForm']; some javascript code here </script>
<div class=""/>
<div id="ctl00_uxFormTemplate" question="" gotoarray="">
<nav class="navbar navbar-static-top navbar-default" container="false" role="navigation">
<div id="page-container" class="container">
<div class="">
<div>
<div id="ctl00_uxFormTemplate_uxErrorControl" class="container" question="" gotoarray=""/>
<div class="container">
<div id="content-container" class="col-md-12">
<div id="ctl00_uxFormTemplate_uxBreadCrumbNavigationControl" class="breadcrumb- container col-md-12 nopadding" question="" gotoarray="">
<div class="form-horizontal">
<div id="ctl00_uxFormTemplate_uxApplicationControl" question="" gotoarray="">
<h1 class="borderbottom">Question</h1>
<div id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl" class="questions-container" question="" gotoarray="">
<span/>
<div id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52309_1" class="question-control form-group" question="52309" gotoarray="{}" style="display: block;">
<div id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52310_2" class="question-control form-group" question="52310" gotoarray="{}" style="display: block;">
<div id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52311_3" class="question-control form-group" question="52311" gotoarray="{}" style="display: block;">
<div class="col-md-5">
<div class="col-md-7">
<select id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52311_3_52311_3_DDL" class="form-control" name="ctl00$uxFormTemplate$uxApplicationControl$uxQuestionControl$52311_3$52311_3_DDL">
</div>
</div>
<div id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52312_4" class="textbox question-control form-group" question="52312" gotoarray="{}" style="display: block;">
<div id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52313_5" class="image-container image-container question-control form-group" question="52313" gotoarray="{}" style="display: block;">
<div id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52314_6" class="form-group question-control" question="52314" gotoarray="{}" style="display: block;">
<div id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52315_7" class="question-control form-group" question="52315" gotoarray="{}" style="display: block;">
<div id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52316_9" class="question-control form-group text" question="52316" gotoarray="{}" style="display: block;">
<div id="ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_52317_11" class="form-group question-control" question="52317" gotoarray="{}" style="display: block;">
<input id="error-count" type="hidden" value="0"/>
</div>
<input id="error-count" type="hidden" value="0"/>
</div>
</div>
<div id="ctl00_uxFormTemplate_uxNavigationControl" class="col-md-12 nopadding" question="" gotoarray="">
</div>
</div>
</div>
<div class="col-md-12"/>
<div class="col-md-6">
<div class="col-md-6">
</div>
</div>
This should work for you:
IWebElement selectElement = driver.FindElement(By.CssSelector("select[id^='ctl00_uxFormTemplate_uxApplicationControl_uxQuestionControl_']"));
SelectElement select = new SelectElement(selectElement);
select.SelectByText("Switzerland");