I have downloaded Dojo login form. What should I change so that when I click on the Login button, I send a POST request with parameters to index.php?
dojo.require("dijit.form.DropDownButton");
dojo.require("dijit.TooltipDialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<body class="claro">
<div dojoType="dijit.form.DropDownButton" class="soria" style="float:right;">
<span>Login</span>
<div dojoType="dijit.TooltipDialog" id="dialog1"
title="Login Form" execute="checkPw(arguments[0]);">
<table>
<tr>
<td><label for="name" title="User name">
Username</label></td>
<td><input dojoType="dijit.form.TextBox"
type="text" name="oldpw"></td>
</tr>
<tr>
<td><label for="loc">Password: </label></td>
<td><input dojoType="dijit.form.TextBox"
type="password" name="newpw"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button dojoType="dijit.form.Button"
type="submit">Login</button></td>
</tr>
</table>
</div>
</div>
You need to add form tag with action
<div dojoType="dijit.form.DropDownButton" class="soria" style="float:right;">
<span>Login</span>
<div dojoType="dijit.TooltipDialog" id="dialog1"
title="Login Form" execute="checkPw(arguments[0]);">
<form id="login_form" method="POST" action="index.php">
<table>
<tr>
<td><label for="name" title="User name">
Username</label></td>
<td><input dojoType="dijit.form.TextBox"
type="text" name="oldpw"></td>
</tr>
<tr>
<td><label for="loc">Password: </label></td>
<td><input dojoType="dijit.form.TextBox"
type="password" name="newpw"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button dojoType="dijit.form.Button"
type="submit">Login</button></td>
</tr>
</table>
</form>
</div>
</div>
Related
I am trying to create a bootstrap table with one of the cell having a form input. However, I realised that this input prevents bootstrap from setting the table width to be the same for each column, even when I reduce the length of the input.
Can anyone help with this to adjust the width to be consistent for all columns? Thanks.
<!doctype html>
<head>
<link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
<script src="./frameworks/bootstrap.min.js"></script>
<script src="./frameworks/button_plus_minus.js"></script>
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
<th>Item</th>
<th>Value ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Silver</td>
<td>1500</td>
</tr>
<tr>
<td>2</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Gold</td>
<td>
<div class="col-xs-8 input-group">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
<span class="fa fa-minus"></span>
</button>
</span>
<input id="inputvalue2" type="text" name="quantity" class="form-control qty" value="1000" min="1" max="100000"></input>
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>US</td>
<td>Computer</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Japan</td>
<td>Bags</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Added a class to the <table> and the <input> tag. By making the text-align center will make your table more subtle and consistent. You should also try using classes for other screen sizes like col-md-6 or col-lg-4 whatever suits you best. But this practice will help you control your UI across different screen sizes. Hope that helps. Let me know if this doesn't work out for you.
<!doctype html>
<head>
<link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
<script src="./frameworks/bootstrap.min.js"></script>
<script src="./frameworks/button_plus_minus.js"></script>
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
.txt_cent{
text-align:center;
}
.inp_width{
width:70px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<table class="table table-striped txt_cent" >
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
<th>Item</th>
<th>Value ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Silver</td>
<td>1500</td>
</tr>
<tr>
<td>2</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Gold</td>
<td>
<div class="col-xs-8 input-group">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
<span class="fa fa-minus"></span>
</button>
</span>
<input id="inputvalue2" type="text" name="quantity" class="form-control qty inp_width" value="1000" min="1" max="100000"></input>
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>US</td>
<td>Computer</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Japan</td>
<td>Bags</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
How to show the popup for each cell with its table data using Datatables?
In the below script script i had used datatables plugin along with alert to show popup each cell but am not getting the proper output?How can i modify the script to show each cell data in popup widow when mouse click is done inside the each cell?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
</head>
<table border="1" align="center" id="example" class="display" width="100%">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>7</td>
<td>12</td>
</tr>
</tbody>
<script>
$(document).ready(function()
{
$('#example tbody').click( function () {
alert("test") ;
});
});
</script>
</table>
</html>
Important Note: Before adding code please include js && css to your page refer js which are use fiddle External Resources section.
Revamp your click function to on click function.
Javascript :
$(document).ready(function () {
var companyTable= $('#jobs').DataTable();
$('#jobs').on('click', 'tr', function () {
$("#company-full-name").val(companyTable.row(this).data()[1]);
$("#company-short-name").val(companyTable.row(this).data()[2]);
$('#DescModal').modal("show");
});
});
HTML:
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">On click row popup will get open </h3>
</div>
<table id="jobs" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Job Title</th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thead>
<tbody>
<!--Made it easier, so no more redundant copypasta in other pages-->
<tr>
<td>1</td>
<td>VP Marketing</td>
<td>Devify</td>
<td>22.38</td>
<td>222 Lillian Hill</td>
<td>2015-02-17</td>
</tr>
<tr>
<td>2</td>
<td>Administrative</td>
<td>Skiba</td>
<td>10.92</td>
<td>3 Corscot Terrace</td>
<td>2015-02-03</td>
</tr>
<tr>
<td>3</td>
<td>Database Admini</td>
<td>Dynazzy</td>
<td>36.72</td>
<td>5082 Butterfield Ter</td>
<td>2015-01-30</td>
</tr>
<tr>
<td>4</td>
<td>Quality Control</td>
<td>Realmix</td>
<td>23.48</td>
<td>598 Independence Cir</td>
<td>2015-02-19</td>
</tr>
<tr>
<td>5</td>
<td>Health Coach II</td>
<td>Linkbuzz</td>
<td>17.11</td>
<td>18 Donald Plaza</td>
<td>2015-02-17</td>
</tr>
<tr>
<td>6</td>
<td>Biostatistician</td>
<td>Roomm</td>
<td>36.37</td>
<td>3 Almo Terrace</td>
<td>2015-02-16</td>
</tr>
<tr>
<td>7</td>
<td>Assistant Profe</td>
<td>Shufflester</td>
<td>29.43</td>
<td>640 Towne Terrace</td>
<td>2015-02-13</td>
</tr>
<tr>
<td>8</td>
<td>Analog Circuit</td>
<td>Tagcat</td>
<td>25.66</td>
<td>316 Claremont Road</td>
<td>2015-02-21</td>
</tr>
<tr>
<td>9</td>
<td>Structural Engi</td>
<td>Tagchat</td>
<td>35.55</td>
<td>809 Butterfield Park</td>
<td>2015-02-10</td>
</tr>
<tr>
<td>10</td>
<td>Senior Develope</td>
<td>Browsecat</td>
<td>21.62</td>
<td>5 Sachs Court</td>
<td>2015-01-30</td>
</tr>
<tr>
<td>11</td>
<td>Human Resources</td>
<td>Jaxbean</td>
<td>32.00</td>
<td>6 Corscot Street</td>
<td>2015-02-10</td>
</tr>
<tr>
<td>12</td>
<td>Analyst Program</td>
<td>Jetpulse</td>
<td>28.13</td>
<td>30 Eggendart Place</td>
<td>2015-02-20</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="DescModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">�</button>
<h3 class="modal-title">Job Requirements & Description</h3>
</div>
<div class="modal-body">
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">job title</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" maxlength="50" id="company-full-name" name="companyFullName">
</div>
</div>
<br>
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Company</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" maxlength="30" id="company-short-name" name="companyShortName">
</div>
</div>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Apply!</button>
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
CSS:
<style type="text/css" class="init"> body {
font-size: 140%;
}
</style>
For DEMO : https://jsfiddle.net/dipakthoke07/t53cyutt/42/
Thanks.
I am trying to find the text from the Select Elements "[New List]". The HTML code behind this is :
<div id="pageBody">
<div class="grid">
<div class="col_12 bgColor column">
<form method="POST" action="pickListEdit.cfm" name="formMain" id="formMain">
<input type="hidden" id="usrAction" name="usrAction" value="NONE"/>
<input type="hidden" id="listtype" name="listtype" value="ACCTS"/>
<input type="hidden" id="listmodified" name="listmodified" value="0"/>
<table cellpadding="0" cellspacing="0" border="0" width="620">
<tbody>
<tr class="alt first last">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="360">
<tbody>
<tr class="alt first">
<td width="150" align="right" class="critH2">
<td height="1" align="left">
<select name="listkey" size="1" onchange="formSubmit('GET');"class="selectfont">
<option value="0">[New List]</option>
</select>
</td>
</tr>
<tr class="alt last">
</tbody>
</table>
</td>
<td width="10"/>
<td width="10"/>
<td valign="top">
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="600">
</form>
</div>
</div>
</div>
</div>
</body>
The C# code that I am using is :
var AccPic = Driver.Instance.FindElement(By.ClassName("selectfont"));
var selectelement = new SelectElement(AccPic);
selectelement.SelectByText(AP);
The problem is it is unable to find the field name. What I need to do is find the element [New List] and select it. Can someone please help.
Assuming it's the only option tag on the page:
var newList = Driver.Instance.FindElement(By.TagName("option"));
var selectedElement = new SelectElement(newlist);
I have this HTML:
<div class="DivHeaderSizes" data-subgroup="1">
<img style="display:none" class="help-size-img-colorbox" data-subgroup="1_Man" src="Man.gif">
<div class="subgroup-description">Jogging</div>
<div class="help-size-link cboxElement" data-subgroup="1_Man">Tutorial</div>
</div>
<div style="float: left;" class="DivSizeElement">
<table data-size="41" class="SizeElement" style="display: none;">
<tbody>
<tr>
<td class="td-label-size">
<span class="label-size" data-size="41">41</span>
</td>
<td class="td-label-textbox">
<input name="ctl00$CthBody$sizelist$TxtSize_41" type="text" maxlength="4" id="CthBody_sizelist_TxtSize_41" class="txt-Size" data-price="19.50" data-size="41" data-available="0" data-subgroup="1" style="width:30px;">
</td>
</tr>
</tbody>
</table>
</div>
<div style="float: left;" class="DivSizeElement">
<table data-size="42" class="SizeElement" style="display: none;">
<tbody>
<tr>
<td class="td-label-size">
<span class="label-size" data-size="42">42</span>
</td>
<td class="td-label-textbox">
<input name="ctl00$CthBody$sizelist$TxtSize_S" type="text" maxlength="4" id="CthBody_sizelist_TxtSize_S" class="txt-Size" data-price="19.50" data-size="42" data-available="0" data-subgroup="1" style="width:30px;">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Using Selenium with C# and starting from input element with name
ctl00$CthBody$sizelist$TxtSize_41
I want the XPath expression to get the text "Jogging". Thanks.
If the context node is input[#name='ctl00$CthBody$sizelist$TxtSize_41'], then the following XPath will select the div containing "Jogging":
(preceding::div[#class='subgroup-description'])[1]
Or you could use:
ancestor::div[1]/preceding-sibling::div[1]/div[#class='subgroup-description']
I'm using jquery to copy 1 row to create 1 row below. Control is dynamic.
I have 1 control to copy and paste from tableclone
<input type="button" value="Add Row" id="addrowbutton" class="Button" />
This is the main table :
<table id="registrationtable" class="Grid">
<tr class="Caption">
<th scope="col">
Registration Number
</th>
<th scope="col"> Is Install
</th>
<th scope="col"> Upload File
</th>
<th scope="col"> Remove
</th>
</tr>
And I clone from here
<table id="tableclone" style="display: none;">
<tbody>
<tr class="Row">
<td style="white-space:nowrap;">
<input id="RegistrasiNo" class="RegistrasiNoClass" type="text" />
</td>
<td>
<asp:DropDownList ID="ddlIsInstall" runat="server" class="IsInstallclass">
<asp:ListItem Value="Y" Text="Yes"></asp:ListItem>
<asp:ListItem Value="N" Text="No"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<div style="float: left">
<input type="file" id="fileUpload" class="fileuploadclass" />
</div>
<div style="float: left">
<input type="button" value="Upload File" id="UploadFileControll" class="UploadFileControllclass" runat="server" />
</div>
</td>
<td>Remove</td>
</tr>
</tbody>
<asp:Button ID="SaveRegistrationID" runat="server" Text="SAVE" OnClick="SaveRegistrationID_Click" CssClass="Button" />
How to get posted file from fileupload dynamicly (more than 1 row) when i click button SAVE ?