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');
}
Related
I have two forms in my view: One of them is modal and could get excel file. after importing excel file and proccessing its data -> i need these data in the other form of my view. How Can I Handle this?
i want when i submit excel import form, its data show in the first form for sending sms.
Here is my view code
<form asp-controller="Festival" asp-action="SendNotificationToCustomer" method="post">
<div class="card-body">
#await Component.InvokeAsync("AdminWidget", new { widgetZone = AdminWidgetZones.FestivalDetailsTop, additionalData = Model })
<div class="card card-default">
<div class="card-body">
<div class="form-group row" id="OperatorName-area">
<div class="col-md-12">
<div class="input-group">
<div class="col-md-6">
<div class="input-group">
<nop-select asp-for="SelectedCustomerRoleIdsForSms" asp-items="Model.AvailableCustomerRolesForSms" asp-multiple="true" />
</div>
<label asp-for="SMSPhonenumbers" />
<textarea asp-for="SMSPhonenumbers" asp-required="true" />
<span asp-validation-for="SMSPhonenumbers"></span>
</div>
<div class="col-md-6">
#Html.HiddenFor(x=>x.Id)
<label asp-for="TextMessage" />
<textarea asp-for="TextMessage" asp-required="true" />
<span asp-validation-for="TextMessage"></span>
</div>
<div class="input-group-append py-2">
<button type="submit" id="btnSendNotification" class="btn btn-info rounded-sm">
#T("Admin.festival.notification.Button")
</button>
</div>
<div class="input-group-append py-2 mr-2">
<button type="button" name="importexcel" class="btn bg-olive rounded-sm" data-toggle="modal" data-target="#importexcel-window">
<i class="fas fa-upload"></i>
#T("Admin.Common.Import")
</button>
</div>
<span>#Model.PhonenumbersFromExcel</span>
</div>
<span asp-validation-for="TextMessage"></span>
</div>
</div>
</div>
</div>
</div>
</form>
<div id="importexcel-window" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="importexcel-window-title">
<div class="modal-dialog">
<form asp-controller="Festival" asp-action="ImportPhonenumbersFromExcel" method="post" enctype="multipart/form-data">
<div class="form-horizontal">
<div class="modal-body">
<div class="form-group row">
<div class="col-md-2">
<div class="label-wrapper">
</div>
</div>
<div class="col-md-10">
<input type="file" id="importexcelfile" name="importexcelfile" class="form-control" />
<input type="hidden" id="currentId" name="currentId" value="#Model.Id" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary"></button>
</div>
</div>
</form>
</div>
</div>
</div>
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'm doing a automation project using selenium webdriver and c#.
Now I have a challenge to solve: my system is a system to pay tickets, and each ticket is dynamic in the page with its components, to pay it's need to click in a dynamic checkbox(each ticket has the checkbox). Below, has a example with some tickets to pay:
<form action="/PagamentoOnline/fix_3001837_conexaoCore/Pagamento/FormaPagamento" id="frmDebitos" method="post"><input data-val="true" data-val-required="The TipoPagamento field is required." id="TipoPagamento" name="TipoPagamento" type="hidden" value="0" /> <div class="row">
<div class="col-md-6 txt-gray txt-right"><input data-val="true" data-val-required="The TipoSolicitacaoPagamento field is required." id="TipoSolicitacaoPagamento" name="TipoSolicitacaoPagamento" type="hidden" value="Pagamento" /></div>
<div class="col-md-3 txt-gray txt-right">
<input id="DataPagamento" name="DataPagamento" type="hidden" value="2017-02-13">
<span class="huge">13/02/2017</span>
<br />
<span class="medium">Data de pagamento</span>
</div>
<div class="col-md-3 txt-gray txt-right">
<span class="huge total-debitos-selecionados"></span>
<br />
<span class="medium">Total de débitos</span>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4 col-debito">
<input class="chk-debitos-selecionados" id="DebitosSelecionados_0_" name="DebitosSelecionados[0]" type="checkbox" value="29133609" /><input name="DebitosSelecionados[0]" type="hidden" value="false" />
<div class="panel panel-gray"
data-codigo-titulo="29133609"
data-valor-pagar="21.41"
data-valor-original="20"
data-data-vencimento="Venc.: 15/12/2016"
data-numero-parcela="1"
data-descricao-tipo-debito="Parcela"
data-sigla-periodo-letivo="2016/2">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<div class="medium pull-right"><i class="glyphicon glyphicon-unchecked"></i></div>
<div class="huge pull-left" data-bind="text: valor">R$ 21,41</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-left">Valor Atualizado</div>
<div class="pull-right">1ª Parcela - 2016/2</div>
</div>
</div>
</div>
<div class="panel-footer">
<span class="pull-left">Débito: R$ 20,00</span>
<span class="pull-right">Venc.: 15/12/2016</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-md-4 col-debito">
<input class="chk-debitos-selecionados" id="DebitosSelecionados_1_" name="DebitosSelecionados[1]" type="checkbox" value="29608740" /><input name="DebitosSelecionados[1]" type="hidden" value="false" />
<div class="panel panel-gray"
data-codigo-titulo="29608740"
data-valor-pagar="21.43"
data-valor-original="20.99"
data-data-vencimento="Venc.: 19/01/2017"
data-numero-parcela="1"
data-descricao-tipo-debito="Parcela"
data-sigla-periodo-letivo="2016/2">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<div class="medium pull-right"><i class="glyphicon glyphicon-unchecked"></i></div>
<div class="huge pull-left" data-bind="text: valor">R$ 21,43</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-left">Valor Atualizado</div>
<div class="pull-right">1ª Parcela - 2016/2</div>
</div>
</div>
</div>
<div class="panel-footer">
<span class="pull-left">Débito: R$ 20,99</span>
<span class="pull-right">Venc.: 19/01/2017</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-md-4 col-debito">
<input class="chk-debitos-selecionados" id="DebitosSelecionados_2_" name="DebitosSelecionados[2]" type="checkbox" value="29675826" /><input name="DebitosSelecionados[2]" type="hidden" value="false" />
<div class="panel panel-gray"
data-codigo-titulo="29675826"
data-valor-pagar="1210.42"
data-valor-original="1180.95"
data-data-vencimento="Venc.: 07/02/2017"
data-numero-parcela="2"
data-descricao-tipo-debito="Parcela"
data-sigla-periodo-letivo="2017/1">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<div class="medium pull-right"><i class="glyphicon glyphicon-unchecked"></i></div>
<div class="huge pull-left" data-bind="text: valor">R$ 1.210,42</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-left">Valor Atualizado</div>
<div class="pull-right">2ª Parcela - 2017/1</div>
</div>
</div>
</div>
<div class="panel-footer">
<span class="pull-left">Débito: R$ 1.180,95</span>
<span class="pull-right">Venc.: 07/02/2017</span>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-7"></div>
<div class="col-md-2 top-right">
</div>
<div class="col-md-1"></div>
<div class="col-md-2 top-right">
<button id="PagamentoCredito" type="submit" class="btn btn-success">Pagar com cartão de credito</button>
</div>
</div>
Each div class:
<div class="col-md-4 col-debito">
is a ticket to pay.
I need to select one of this tickets and select the checkbox
<i class="glyphicon glyphicon-unchecked"></i>
I tryed to use a foreach loop to select a especified checkbox of a ticket:
ticketToPay = "cod_ticket_to_pay";
ReadOnlyCollection<IWebElement> ticketsInSystem= driver.FindElements(By.XPath("//div[#class='panel panel-gray']"));
foreach (IWebElement ticketInformation in ticketsInSystem)
{
if (ticketInformation.GetAttribute("data-codigo-titulo").Equals(ticketToPay))
{
IWebElement checkBoxTicket = ticketInformation.FindElement(By.XPath("//*[#class='glyphicon glyphicon-unchecked']"));
checkBoxTicket .Click();
}
}
But when the action of the element checkboxTicket is click in the first element of his type, not in the correct ticket. Anyone know how to solve this?
One ticket - one checkbox
And
Selected ticket - selectecd checkbox to click.
I have no idea about how to do this with c#. But Using Java Language you can do this way.
WebElement check1 = driver.findElement(By.xpath("//input[#value='29133609']"));
WebElement check2 = driver.findElement(By.xpath("//input[#value='29608740']"));
WebElement check3 = driver.findElement(By.xpath("//input[#value='29675826']"));
int[] check_values = new int[] {29133609, 29608740, 29675826};
for(int i =0; i<check_values.length; i++)
{
WebElement check_source = driver.findElement(By.xpath("//input[#value='"+check_values[i]+"']"));
if(!check_source.isSelected())
{
check_source.click();
Thread.sleep(2500);
}
}
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>
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");