Label and TextBox value on button click as alert - c#

I need little help.
On button click I need values from the labels and txtBox'es shown in form of alert on the screen.
It should look like this:
Label0(value) txtBoxOpis0(value)
Label1(value) txtBoxOpis1(value) ....
The table has many more filed's, I copy'ed in this example only two rows.
<table id="MainContent_gvKarakteristike" style="color:#333333;border-collapse:collapse;" cellspacing="0" cellpadding="4">
<tbody><tr style="color:White;background-color:#507CD1;font-weight:bold;">
<th scope="col">Karakteristike</th><th scope="col"> </th><th scope="col">Opis</th>
</tr><tr style="background-color:#EFF3FB;">
<td>
<span id="MainContent_gvKarakteristike_Karakteristike_0" mycustomattr="foo" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Total_Thickness</span>
</td><td>
<span id="MainContent_gvKarakteristike_Label_0" class="IDKarakteristike" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">1</span>
</td><td>
<input name="ctl00$MainContent$gvKarakteristike$ctl02$txtBoxOpis" id="MainContent_gvKarakteristike_txtBoxOpis_0" margin-left="100px" style="font-family:Georgia;height:28px;width:130px;" type="text">
</td>
</tr><tr style="background-color:White;">
<td>
<span id="MainContent_gvKarakteristike_Karakteristike_1" mycustomattr="foo" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Wear Layer thickness</span>
</td><td>
<span id="MainContent_gvKarakteristike_Label_1" class="IDKarakteristike" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">2</span>
</td><td>
<input name="ctl00$MainContent$gvKarakteristike$ctl03$txtBoxOpis" id="MainContent_gvKarakteristike_txtBoxOpis_1" margin-left="100px" style="font-family:Georgia;height:28px;width:130px;" type="text">
</td>
</tr><tr style="background-color:#EFF3FB;">
<td>
Here's the button
<input name="ctl00$MainContent$btnButton" value="Save" onclick="return false;" id="MainContent_btnButton" autopostback="false" type="submit">
Thanks in advance !

You Can Do something like this
$('#MainContent_btnButton').click(function () {
alert(
'Label0('+
$("#MainContent_gvKarakteristike_Label_1").text()+
')\n(txtBoxOpis0'+
$("#MainContent_gvKarakteristike_txtBoxOpis_1").text()+
')'
);
});

Related

Unable to locate element inside a table using xpath with selenium

I want to click on a button inside my table each row has a update button I want to click on a specfic button inside my table.
Here is a what my table looks like:
<table _ngcontent-vhp-c82="" datatable="" id="dtOptionsComments" class="display table table-striped table-bordered dt-responsive dataTable dtr-inline" aria-describedby="dtOptionsComments_info" style="width: 100%;" width="100%">
<thead _ngcontent-vhp-c82="">
<tr _ngcontent-vhp-c82="">
<th _ngcontent-vhp-c82="" class="no-marking sorting_disabled" rowspan="1" colspan="1" style="width: 50.4px;" aria-label=""></th>
<th _ngcontent-vhp-c82="" class="sorting sorting_asc" tabindex="0" aria-controls="dtOptionsComments" rowspan="1" colspan="1" style="width: 1109.4px;" aria-label="Comment.Comment Shipping.ShippingDatatable.aria.sortDescending" aria-sort="ascending">Comentario Shipping.Shipping</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="no-marking dtr-control">
<a href="javascript:void(0);">
<span data-toggle="modal" data-target="#update-modal" update-comment-text="6 MESES DE GARANTIA" update-comment-id="5" class="material-icons md-18 clickable"> edit </span>
</a>
<a href="javascript:void(0);">
<span data-toggle="modal" data-target="#delete-modal" delete-comment-id="5" class="material-icons clickable">delete</span>
</a>
</td>
<td class="sorting_1">6 MESES DE GARANTIA</td>
</tr>
<!-- MORE ROWS!!! -->
</tbody>
<tfoot _ngcontent-vhp-c82="">
<tr _ngcontent-vhp-c82="">
<td _ngcontent-vhp-c82="" class="no-marking" rowspan="1" colspan="1">
<a _ngcontent-vhp-c82="" href="javascript:void(0);">
<span _ngcontent-vhp-c82="" class="material-icons clickable"> add_box </span>
</a>
</td>
<td _ngcontent-vhp-c82="" rowspan="1" colspan="1">
<input _ngcontent-vhp-c82="" formcontrolname="addComment" type="text" id="addComment" name="addComment" class="form-control ng-untouched ng-pristine ng-invalid">
<!---->
</td>
</tr>
</tfoot>
</table>
Here is my code trials:
IWebElement btnUpdate = _driver.FindElement(By.XPath("//*[update-comment-id='" + commentAction.GetLastQuoteInsertId().ToString() + "']"));
btnUpdate.Click();
I have validated that the function GetLastQuoteInsertId returns the proper value
Why is my xPath selector wrong how can I fix it thank you for your help.
You were almost there. While considering a xpath the attribute_name should be always preceded by a # sign.
Additionally to make the xpath more canonical as the element is a <span> element you can mention //span to start the xpath.
Effectively, your line of code will be:
IWebElement btnUpdate = _driver.FindElement(By.XPath("//span[#update-comment-id='" + commentAction.GetLastQuoteInsertId().ToString() + "']"));
btnUpdate.Click();

How to save data from more than 3 html <input> </>

Hello I have a form with several html/input tags. Like so:
<form class="form-group">
<div class="body table-responsive">
<table class="table m-b-0">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>phone number</th>
<th>ID</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.name</td>
<td>
<input type="text" name="" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="" id="" value=""
class="bordered">
</td>
</tr>
}
</tbody>
</table>
</div>
</form>
I havent named or id them yet , since I know there is a way to fill all inputs and save them all at the same time when a submit or button is pressed, I just dont know how.
Do I need to add something a tag or attribute on the in order to be able to save all inputs at the same time when the is pressed?
You have to assign names to each input and add place a submit button. When you click submit, user input will be sent to the server with the given method.
<form method="post" class="form-group">
<div class="body table-responsive">
<table class="table m-b-0">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>phone number</th>
<th>ID</th>
</tr>
</thead>
<tbody>
#{
var i = 0;
foreach (var item in Model) {
<tr>
<td>#item.name</td>
<td>
<input type="text" name="input1_#i" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="input2_#i" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="input3_#i" id="" value=""
class="bordered">
</td>
</tr>
}
}
</tbody>
</table>
</div>
<button type="submit">Submit</button>
</form>
Or you can listen to the submit event and handle it yourself.
$('form').submit(function(e) {
e.preventDefault();
// you can get the input data from 'this' (form element)
// here comes your validation and server call
});

Unable to locate input element under div in Selenium

I am trying to located input element "mpcname" in js file which is under div and table elements.
The code I have written to locate the element is as follows but is not detecting the Input element with the name mpcName in it.
Driver.FindElement(By.XPath(".//input[contains(.,'mpcName')]"));
The HTML code looks like below.
<div enable-tooltips="" class="ng-scope">
<form name="InstanceDetailForm" ng-submit="doApply()" novalidate="" class="ng-pristine ng-invalid ng-invalid-required ng-valid-unnamed ng-valid-maxlength ng-valid-not-integer">
<table class="table-condensed" style="width: 100%;">
<tbody><tr>
<td></td>
</tr>
<tr>
<td>
<table style="width: 100%;">
<tbody><tr>
<td class="pull-left">
<h4 class="ng-binding">Controller Configuration<b ng-show="InstanceIsDirty()" class="ng-hide"> *</b></h4>
</td>
<td class="pull-right">
<button id="btnApply" type="submit" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Save an APC instance">
<span class="glyphicon glyphicon-save"></span> Apply
</button>
<button id="btnExportConfig" type="button" class="btn btn-primary" ng-click="goToInstanceList()" data-toggle="tooltip" data-placement="bottom" title="Cancel save and redirect to APC instance list page.">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<table style="width: 100%" class="table-condensed table-striped table-bordered">
<tbody><tr>
<td>Name</td>
<td>
**<input id="mpcname" name="mpcname" ng-model="mpcname" value="" ng-required="true" is-named="" size="50" autocomplete="off" ng-disabled="!allowEditInstanceName(mpcname,state)" class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-valid-unnamed ng-touched" required="required" type="text">**
With xpath ".//input[contains(.,'mpcName')]" you are actually looking for an <input> element with text mpcName. mpcName is actually the id (and name and ng-model) attribute. You can use
Driver.FindElement(By.Id("mpcName"));
Or
Driver.FindElement(By.Name("mpcName"));
following code may be helpful
Driver.FindElement(By.XPath(".//input[contains(#id,'mpc')]");
Driver.FindElement(By.XPath(".//input[contains(#class,'ng-pris')]");

Remove tag from HtmlTextWriter

I am receiving text to a function public void LoadMarkup(HtmlTextWriter writer){} and I need to remove last <tr> tag from it.
The text I am getting is:
<table class="form">
<tr>
<td class="createLabel">Name:<span class="field">*</span></td><td><input type="text" maxlength="200" id="productTitle" name="productTitle" class="required" style="width: 250px;" /></td>
</tr><tr>
<td class="createLabel">Account:<span class="field">*</span></td><td><select id="recognizedAccount" name="recognizedAccount" class="required">
<option value="8a1dd4c7-8ddd-4632-aa81-6be29dc86d13">
Donation
</option><option value="5617660d-4794-4cad-aab8-a04323faf68a">
Dues Account
</option>
</select></td>
</tr><tr style="display: none;">
<td class="createLabel">Deferral Method:</td><td><select id="deferralMethod" name="deferralMethod" class="required">
<option value="e816071c-282d-46af-8c5d-ebecb8472b94">
None
</option>
</select></td>
</tr><tr>
<td class="createLabel">Description:<span class="required-field">*</span></td><td><textarea id="productDescription" name="productDescription" class="required" rows="3" style="width: 250px;"></textarea></td>
</tr><tr>
<td class="createLabel">Active:</td><td><input type="checkbox" id="productActive" name="productActive" /></td>
</tr><tr>
<td class="createLabel">Expiration Date:<span class="required-field">*</span></td><td><span class="datePicker"><input type="text" autocomplete="off" id="productExpirationDate" name="productExpirationDate" class="required" style="width: 135px;" /></span></td>
</tr><tr class="typeRates">
<td class="createLabel">Rate:<span class="required-field">*</span></td><td><input id="5a2da3f6-c3e5-4cd0-a194-7a704c8f07e0_rate" name="5a2da3f6-c3e5-4cd0-a194-7a704c8f07e0_rate" class="required" type="text" /></td>
</tr>
I need to remove this text from Upper text:
<tr class="typeRates">
<td class="createLabel">Rate:<span class="required-field">*</span></td><td><input id="5a2da3f6-c3e5-4cd0-a194-7a704c8f07e0_rate" name="5a2da3f6-c3e5-4cd0-a194-7a704c8f07e0_rate" class="required" type="text" /></td>
</tr>
I can not modify text before I am receiving it in function as this is coming from framework. Any one can help with it please suggest.
Thanks.
Not tested, nor the most robust, but perhaps give it a try:
public string RemoveLastTableRow(HtmlTextWriter writer)
{
// Create an array which contains each table row split
string[] html = writer.ToString().Split(new string[] { "<tr>" }, StringSplitOptions.None);
// Return all the array indexes joined, except for the final index
return string.Join("", html.Take(html.Count() - 1));
}

MVC #Html.DropDownList Getting Error with SelectList in ViewBag

I have a list which I created in the controller:
var PayList = new[] {
new ListEntry { Id = 1, Name = "" },
new ListEntry { Id = 2, Name = "Yes" },
new ListEntry { Id = 3, Name = "No" }
};
ViewBag.PayList = new SelectList(PayList, "Id", "Name");
In the view I have the following:
#Html.DropDownList("Pay", new SelectList(ViewBag.PayList,"Id","Name"))
When I try to display it, it says the following:
DataBinding: 'System.Web.Mvc.SelectListItem' does not contain a property with the name 'Id'. Not sure why this is not working.
Also how do I default a value to the select list. I like to default it to "Yes". I thought there was a way to do do this from the controller.
Your ViewBag.PayList is already the type of SelectList. I don't see a reason to create the SelectList twice, so shouldn't it just be:
#Html.DropDownList("Pay", ViewBag.PayList)
or
#Html.DropDownList("Pay", ViewBag.PayList as SelectList)
(I don't ever use the ViewBag, so I'm not sure if your version is strongly typed).
Just use
#Html.DropDownList("Pay", ViewBag.PayList)
In your view
Try this Way:
<div id="divmsg" style="color: green; font-weight: bold">
#ViewBag.Msg
</div>
<div id="divmsg2" style="color: red; font-weight: bold">#ViewBag.Msg2</div>
<div id="quality" style="width: 80%;" align="center">
<input type="hidden" value="#ViewBag.ProjectId" id="ProjectId_" class="projectId"/>
<input type="hidden" value="#ViewBag.ProjectName" id="ProjectName_" class="projectName"/>
<input type="hidden" value="#ViewBag.UserId" class="UserId_" id="UserId"/>
<input type="hidden" value="#ViewBag.TempId" class="TempId_" id="TempId" />
<div class="toggle-contents">
<table width="100%" id="qualitygoal">
<tr>
<td class="even" align="left">
#Html.Label("Project Id")
</td>
<td class="even" align="left">
#ViewBag.ProjectId
</td>
</tr>
<tr>
<td class="projectname" align="left">
#Html.Label("Project Name")
</td>
<td class="projectname" align="left">
#ViewBag.ProjectName
</td>
</tr>
</table>
<table width="100%" id="qualitygoal1" class="tbl">
<tbody>
<tr>
<th align="center">DestinationColumns</th>
<th align="center">SourceColumns</th>
</tr>
#foreach (var data in Model)
{
<tr>
<td>
<span class="spanStatus" id="lblStatus_#data.TempId" destinationID = "#data.Destination">#data.Destinationvalue</span>
<select class="status" id="ddlStatus_#data.TempId">
<option value="0">--Select--</option>
<option value="4">TICKET ID</option>
<option value="5">DESCRIPTION</option>
<option value="6">TICKET CATEGERY</option>
<option value="7">SEVIORITY/PRIORITY</option>
<option value="8">STATUS</option>
<option value="9">CREATED DATE</option>
<option value="10">CREATED BY</option>
<option value="11">ASSIGNED TO</option>
<option value="12">ASSIGNED DATE</option>
<option value="13">REPSONSE ETA</option>
<option value="14">RESOLUTION ETA</option>
<option value="15">RESPONSE DATE</option>
<option value="16">RESOLUTION DATE</option>
<option value="17">ROOT CAUSE/MODULE</option>
<option value="18">REOPEN FLAG (Y/N)</option>
<option value="19">CLOSE DATE</option>
<option value="20">SLA MET (Y/N)</option>
</select>
</td>
<td>
<span class="spanSource" id="lblSource_#data.TempId" >#data.Source</span>
<input class="Source" id="txtSource_#data.TempId" type="text" value="#data.Source" maxlength="30" />
</td>
<td>
<table style="width: 50%;">
<tr>
<td>
<input class="edit" id="Edit_#data.TempId" type="button" value="Edit" />
<input class="update" id="Update_#data.TempId" type="button" value="Update" />
</td>
<td class="Gcancle" id="Canc_#data.TempId">
<input class="gridcancel" id="Cancel_#data.TempId" type="button" value="Cancel" />
</td>
</tr>
</table>
</td>
<td>
<table style="width: 50%;">
<tr>
<td>
<input class="delete" id="Delete_#data.TempId" type="button" value="Delete" />
</td>
</tr>
</table>
</td>
</tr>
}
</tbody>
</table>
</div>
<div align="right">
<input type="button" value="Add New Row" class="Add" />
<input type="button" value="Save" class="saved" />
<input type="button" value="Close" class="cancel" />
</div>
</div>

Categories

Resources