I'm having an issue where the form generated with ruby isn't included inside my #content div, is this because the form is generated after the html is read by the browser (sorry if I sound like a moron on this)
-- edit update - view source --
The code below generates with the email box and submit button outside of the content box
<div id="content">
<!-- text here -->
<form accept-charset="UTF-8" action="/password_resets" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="afmtpSAc93w1uMcnouhY9XmbVTM7fE1VNFvZKnp0kMs=" />
</div>
<div class="field">
<input id="email" name="email" placeholder="email#website.com" type="text" />
</div>
<div class="actions">
<input name="commit" type="submit" value="Reset Password" />
</form> </div>
</div>
I'm not sure I got the question right, but in the html above the last </form> </div> should be </div> </form>
figured it out after visiting this link
Is it correct to use DIV inside FORM?
once I removed the div's for field and action it cleared everything up
Related
In my .nercore razor page project I have a number of forms with multiple onPost handlers - different buttons for different events (eg. add / copy / edit / delete)
My problem is - I do not understand how I can differentiate client-side validation depending on the button pressed.
EDIT
Let's assume, I have the following .cshtml which defines two input data fields and two buttons. By pressing one button (Add) the first Field A should be validated, by pressing the second (copy) - another one (Field B):
#page "{id:int}/{modeR:int}"
#model MyProject.Pages.MyProjectDB.AddRecordModel
#{
ViewData["Title"] = "Add Record";
}
<div class="row">
<div class="col-md-7">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit" value="Add" class="btn btn-success">Add Record)</button>
<button type="submit" value="Copy" class="btn btn-warning">Edit Record</button>
</div>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
at the end of my .cshtml page, but it runs always when onPost is called.
I need to run validation "in groups": for one button set of one fields and ignore others, for another - another set and so on like written above
Is there any way to achieve it without writing custom javascript or do it on server side?..
ANOTHER EDIT
The answer was provided for the case where we have clear separation of input fields / buttons. But how can we handle this if we have two input fields and one button. Validation should NOT be fire if either of them is filled in and should fire if both are null. I understand, this sounds a bit strange, but in my example I have one input field and one dropdown-list. So, either a field should be filled-in or an item should be selected from the list, but for code simplicity let's stay with two input fields (Filed A and Field B, one of them should be filled) and one button:
#page "{id:int}/{modeR:int}"
#model MyProject.Pages.MyProjectDB.AddRecordModel
#{
ViewData["Title"] = "Add Record";
}
<div class="row">
<div class="col-md-7">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit" value="Add" class="btn btn-success">Add Record)</button>
</div>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Thanks in advance!
By pressing one button (Add) the first Field A should be validated, by pressing the second (copy) - another one (Field B) should be validated
You can try to put them in separate <form> and specify handler method via the asp-page-handler attribute, like below.
<h1>Go Add Handler</h1>
<form method="post">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div>
<button type="submit" value="Add" class="btn btn-success" asp-page-handler="Add">Add Record</button>
</div>
</form>
<hr />
<h1>Go Copy Handler</h1>
<form id="myform" method="post">
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div>
<button type="submit" value="Copy" class="btn btn-warning" asp-page-handler="Copy">Edit Record</button>
</div>
</form>
#section scripts{
#await Html.PartialAsync("_ValidationScriptsPartial")
}
Test Result
I need to write xpath for 'New' button.
have tried:-
By.xpath("//form[#action='/intruvert/action/CustomRolesAction']/div/div[3]/div/a[1]")
By.xpath("//form[#name='CustomRolesForm']/div/div[3]/div/a[#style='background-color: rgb(242, 242, 242);' and #title='New']")
By.xpath("//form[#name='CustomRolesForm']/div/div[3]/div/a[#title='New']")
but not able to click on New button.
I am not sure here if i missing anything.
kindly suggest.
here is the code:-
<html>
<head>
<body>
<div class="bodywrap">
<form action="/intruvert/action/CustomRolesAction" method="post" name="CustomRolesForm">
<input type="hidden" value="CustomRolesDetails_t" name="userAction"/>
<input type="hidden" value="fullaccess" name="accessRight"/>
<input type="hidden" value="" name="uuid"/>
<input type="hidden" value="true" name="fromTab"/>
<input type="hidden" value="" name="selectedDomain"/>
<input type="hidden" value="/My Company:0/Manager:0" name="resourceName"/>
<input type="hidden" value="MANAGER" name="topMenuName"/>
<input type="hidden" value="Users and Roles" name="secondMenuName"/>
<input type="hidden" value="Roles" name="thirdMenuName"/>
<input type="hidden" value="/My Company:0" name="domainName"/>
<input type="hidden" value="/My Company:0" name="currentDomainName"/>
<input type="hidden" value="/Manager:0" name="shortResourceName"/>
<input type="hidden" value="false" name="ucaplModeEnabled"/>
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<div class="gensecholder clearfix">
<div class="gensecheader clearfix">
<div class="gensecbody pad10all clearfix">
<div class="gensecfooter clearfix">
<div class="gensecfootright">
<a class="genericbtn" title="New" href="javascript:doSubmit('add')">New</a>
</div>
#Pranay after viewing your code, i got javascript error. inside your html you have not defined anywhere to javascript. see the image
Your html
<a class="genericbtn" title="New" href="javascript:doSubmit('add')">New</a>
Modified html
<a class="genericbtn" title="New" href="#">New</a>
Now use xpath method using javascript executor.
WebElement new_button = driver.findElement(By.xpath("//a[contains(text(), 'New')]"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", new_button);
OR
driver.findElement(By.xpath("//a[contains(text(), 'New')]")).click();
You can try to locate the button directly without ancestors
// by class name
By.className("genericbtn")
// by title
By.cssSelector("[title='New']")
// by partial href
By.cssSelector("[href*='add']")
//a[.="New"]
Just use text find a tag.
. means current context node(a).
You can just use either title or text property to find out the required link:
By.xpath("//a[#title='New']");
Or
By.linkText("New");
Or
By.xpath("//a[text()='New']");
Actually I am new in cs-cart and I am trying to show my result set into html/smarty block which contains the form code which I added from backend
Design->Layout but it only shows response in console ,I am pasting of some code here
Block code (added from backend Design->Layouts) :
<div class="quick-quote">
<h3>Quick Quote!</h3>
<form class="cm-ajax" action="index.php" method="post" id="quick_quote_form">
<div id="quick-quote">
<div class="clearfix">
<label style="width:73px;" >Width:</label>
</div>
<div class="input">
<input type="text" placeholder="enter width" name="d_width" id="d_width" class="required form-control" >
</div>
<div class="clearfix">
<label style="width:73px;" >Height:</label>
</div>
<input type="submit" class="get-quote-btn" value="Get Quote" name="dispatch[get_qoute.get_rates]" />
</div>
<div class="result"></div>
<!-- tag -->
<input type="hidden" name="result_ids" value="result" />
</form>
</div>
Controller code:
<?php
use Tygh\Registry;
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($mode == 'get_rates') {
$height= $_POST["d_height"];
$width=$_POST["d_width"];
$val = $height+$width;
Registry::get('view');
Registry::get('ajax')->assign('get_rates', $val);
}
exit;
}
?>
Result set is coming correctly , Now I don't know how to show response in block div.
<div class="result"></div>
<!-- tag -->
<input type="hidden" name="result_ids" value="result" />
Thanks in advance.
Dont goto design ->layout because its common for all forms and pages.
Goto the website menu-> content then choose the form you want to change, there you can see layout tab, edit block done.
In form you set what block must refresh by ajax method
<input type="hidden" name="result_ids" value="result" />
Your problem in this line:
<div class="result"></div>
All refresh results must be in ID tag:
<div id="result"></div>
I have a div with checkboxes, and everytime before checking any of them I want to make sure they are cleared first. Any input on how I can do it?
The HTML code for the div consisting of checkboxes is
<div class="row_bus_groups cuke_business_group">
<div class="row">
<input class="field_checkbox cuke_partners" type="checkbox" id="SelectedBusinessGroups[0]" name="SelectedBusinessGroups[0]" value="Partners">
<label for="SelectedBusinessGroups[0]"><span class="translated_text" rel="BusinessGroups.Partners">Partners</span></label>
<input type="hidden" name="SelectedBusinessGroups[0]" value="">
</div>
<div class="row">
<input class="field_checkbox cuke_press" type="checkbox" id="SelectedBusinessGroups[1]" name="SelectedBusinessGroups[1]" value="Press">
<label for="SelectedBusinessGroups[1]"><span class="translated_text" rel="BusinessGroups.Press">Press</span></label>
<input type="hidden" name="SelectedBusinessGroups[1]" value="">
</div>
</div>
I tried doing
#browser.div(:class, "cuke_business_group").checkbox.each{ |all| all.clear }
You were close. Try this:
#browser.div(:class => "cuke_business_group").checkboxes.each {|checkbox| checkbox.clear}
I am using MVC3 and displaying my data in a webgrid. I would like to display loading indicator (loading image) displayed when I filter/search. What is the best approach?
My search filter (code):
#using (Html.BeginForm())
{
<fieldset id="fieldset1" class="coolfieldset">
<legend>Search for Towers Watson Subscribers/Contacts</legend>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">Reg Date:</div>
<div class="div-table-col"><input id="regDateFrom" class="datepicker" name="regDateFrom" value="#regDateFrom" type="text" /> to <input id="regDateEnd" class="datepicker" value="#regDateEnd" name="regDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Profile Mod Date:</div>
<div class="div-table-col"><input type="text" id="profileModDateFrom" class="datepicker" value="#profileModDateFrom" name="profileModDateFrom" /> to <input id="profileModDateEnd" class="datepicker" value="#profileModDateEnd" name="profileModDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Last Name:</div>
<div class="div-table-col"><input type="text" id="lastName" name="lastName" value="#lastName" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col"><input id="search" name="search" type="submit" value="Search" /></div>
<div class="div-table-col"></div>
</div>
</div>
</fieldset>
}
{#Html.Partial("List_Ajax", Model)}
http://www.ajaxload.info/ lets you create a nice loading gif. Create an image, and place it in a div as below. Then bind the search button with jQuery to display the hidden div when clicked.
Place the following div where you would like the loading icon to appear.
<div id="loadingDiv" style="display:none"><img src="loading.gif"></div>
Then this in your Javascript file
$(document).ready(){
$('#search').click(function(){
$('#loadingDiv').show();
});
});
Then when you're done loading, simply:
function SomeCallBackEvent(){
$('#loadingDiv').hide();
};