This is my code
<tr>
<td>
<div>
<span>Cloud Email Security</span>
<input id="productLine_software-0" name="productLine_software" value="Cloud Email Security" type="hidden"/>
</div>
</td>
<td>
<div>
<span>Core</span>
<input id="productCategory_software-0" name="productCategory_software" value="Core" type="hidden"/>
</div>
</td>
<td>
<div>
<span>Cloud Antispam</span>
<input id="softwareName_software-0" name="softwareName_software" value="Cloud Antispam" type="hidden"/>
</div>
</td>
<td>
<div>
<div>
<span>
<input id="select_boolean_software_1" type="checkbox" value="1" name="select_boolean_software"/>
</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<span>Cloud Email Security</span>
<input name="productLine_software" value="Cloud Email Security" type="hidden"/>
</div>
</td>
<td>
<div>
<span>Core</span>
<input id="productCategory_software-0" name="productCategory_software" value="Core" type="hidden"/>
</div>
</td>
<td>
<div>
<span>Cloud Email Security</span>
<input name="softwareName_software" value="Cloud Email Security" type="hidden"/>
</div>
</td>
<td>
<div>
<div>
<span>
<input id="select_boolean_software_1" type="checkbox" value="1" name="select_boolean_software"/>
</span>
</div>
</div>
</td>
</tr>
I am using this CSS selector code in Selenium
css=tr:contains('Cloud Email Security & Content Control') input[type = 'checkbox']
It always select the first row instead of 2nd one. Any thoughts? (I deleted remainig tags becoz the code was really long)
I did a few few attempts involving the tr tag, both using CSS and XPATH, but seems to me the tr is acting weird in the locator.
If you don't explicitly need to use the tr, and instead can go for the checkbox following your unique input, try this
xpath=//input[#name='softwareName_software' and #value='Cloud Email Security']/following::input[#type='checkbox']
Related
In my ionic-angular application I am using Template driven forms, When I submit the form without touching the input fields it should display the error message, but in this case I am not able to display the error message in the span.
You can see the comments in which the error-message is written.
How do I validate this form?
Page.html
<form (ngSubmit)="submitForm()" #form="ngForm">
<table>
<tr>
<td>
<ion-input type="text" #c1 [(ngModel)]="c" name="c" required>
</td>
<td>
<ion-input type="text" #c2 [(ngModel)]="d" name="d" required>
</td>
</tr>
</table>
<span *ngIf="c1.pristine && c2.pristine && form.submitted">Plese enter codes</span> //error-message is not printing.
<button type="submit">Submit</button>
</form>
Try Below code.
<form (ngSubmit)="submitForm()" #form="ngForm" novalidate>
<table>
<tr>
<td>
<ion-input type="text" [(ngModel)]="c" name="c" id="c1" #c1="ngModel" required>
<div [hidden]="!(c1.invalid && c1.touched)">Invalid.</div>
</td>
<td>
<ion-input type="text" [(ngModel)]="d" name="d" id="c2" #c1="ngModel" required>
<div [hidden]="!(c2.invalid && c2.touched)">Invalid.</div>
</td>
</tr></table><button type="submit" [disabled]="!form.form.valid">Submit</button></form>
I am practicing my angular.js and form validation. I want to make it so that the form won't submit when I click submit if variables user_valid and pass_valid are false. I do thus perfectly fine when writing code outside of angularjs by calling return false;.
But when work in angular.js, and insert ng-submit='loginVal()', and type in my controller:`
logApp.controller('logForm', function($scope, $http){
user_valid = false;
pass_valid = false;
$scope.loginVal = function(){
if (user_valid == false && pass_valid == false){
return false;
console.log('Submit Stopped');
}
}`
...
});
The form still submits, and it shows in console Navigated to ~form-action url~. I don't know why it is submitting. The rest of the functions in the controller have nothing related to this function, so i excluded it.
HTML:
<form name='login' method="post" action="" ng-submit='loginVal()'>
{% csrf_token %}
<!-- LOGIN FORM -->
<table id='show-table'>
<tr>
<td width='20%'>Username</td>
<td width="80%">
<div class='col-md-12' id='userField'>
<input name='name' type="text" ng-model='username' ng-change='checkName()'/>
<div id='success'></div>
<div id='failure'></div>
</div>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<div class='col-md-12'>
<input name="pwd" type="password" ng-model='password' />
</div>
</td>
</tr>
<td></td>
<td><input type="submit" value="Login" id='loginSubmit' disabled /></td>
</tr>
</table>
</form>
Remove the action and the method attributes in the form tag
EDIT
Look at this fiddle: https://jsfiddle.net/80Laf822/1/
<div ng-controller="FormController">
<form name='loginForm' method="post" action="" ng-submit='loginVal()'>
<!-- LOGIN FORM -->
<table id='show-table'>
<tr>
<td width='20%'>Username</td>
<td width="80%">
<div class='col-md-12' id='userField'>
<input name='name' type="text" ng-model='username' required/>
<div id='success'></div>
<div id='failure'></div>
</div>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<div class='col-md-12'>
<input name="pwd" type="password" ng-model='password' required/>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" id='loginSubmit' ng-disabled="loginForm.$invalid" />
</td>
</tr>
</table>
</form>
</div>
You can use the required attribute in the input and the property $invalid of the form to automatically disable or enable the button if the form is valid or not. You can do all type of things like patterns, max-length, min-lenght ...
I am sure I am missing something fairly simple here. Yet, still having hard time figuring it out.
I am trying to execute the findItem function when a value for the url input changes. With the code below, I get this warning in Chrome:
Warning: Failed propType: Invalid prop `onChange` of type `string` supplied to `ReactDOMInput`, expected `function`. Check the render method of `ItemForm`.
Here is the related code:
ItemForm = React.createClass({
findItem(event) {
console.log(event.target.value);
},
render() {
return (
<tfoot>
<tr className="ui form">
<td>
<div className="field">
<label>Product URL</label>
<div className="ui active small inline invisible loader"/>
<input className="url" onChange="{this.findItem}" placeholder="Enter the URL of the product you wish to purchase" type="text"/>
</div>
</td>
<td className="numeric">
<div className="field">
<label>Quantity</label>
<input className="qty" disabled="disabled" type="text"/>
</div>
</td>
<td className="numeric">
<div className="field">
<label>Total Cost</label>
<div className="ui labeled input">
<div className="ui label">$</div>
<input disabled="disabled" type="text"/>
</div>
</div>
</td>
</tr>
<tr className="ui form">
<td>
<div className="fields">
<div className="eight wide field title">
<label>Product Title</label>
<textarea disabled="disabled" rows="2"/>
</div>
<div className="eight wide field">
<label>Optional Comments</label>
<textarea disabled="disabled" rows="2"/>
</div>
</div>
</td>
<td/>
<td className="btn">
<button className="ui disabled positive button">Add</button>
</td>
</tr>
</tfoot>
);
}
});
you need to remove the quotation marks
onChange={this.findItem}
I have made simple example: http://codepen.io/anon/pen/VLpYJm?editors=101
In this example I need to get field.type and using it with ng-switch.
<div ng-app="app">
<table ng-controller="tableController">
<tr ng-repeat="item in items">
<td>
{{item}}
</td>
<td>
<select ng-model="item" ng-options="field.label for field in fields track by field.name" required="required" />
</td>
<td>
<div ng-switch on="item.type">
<div ng-switch-when="BOOLEAN">
<input ng-model="item.value" type="checkbox" />
</div>
<div ng-switch-default>
<input ng-model="item.value" type="text" class="form-control" required="">
</div>
</div>
</td>
<td>{{selected}}</td>
</tr>
</table>
</div>
I have a view where I want to iterate a list in the model to render the view, the current code is something like
<form method="Post">
<table class="table">
#Each
<tr>
<td>
<input type="hidden" name="Id[]" value="#Current.Id" />#Current.Id
</td>
<td>
<input type="text" name="Name[]" value="#Current.Name"/>
</td>
<td>
<input type="text" name="Code[]" value="#Current.Code"/>
</td>
<td>
<button type="submit">Submit</button>
</td>
</tr>
#EndEach
</table>
</form>
What I actually wish to do is
<form method="Post">
<table class="table">
#Each
<tr>
<td>
<input type="hidden" name="Id[#CurrentIndex]" value="#Current.Id" />#Current.Id
</td>
<td>
<input type="text" name="Name[#CurrentIndex]" value="#Current.Name"/>
</td>
<td>
<input type="text" name="Code[#CurrentIndex]" value="#Current.Code"/>
</td>
<td>
<button type="submit">Submit</button>
</td>
</tr>
#EndEach
</table>
</form>
where #CurrentIndex will insert the list index.
List index can then be used to bind the property to a list during POST with something like
Post["/"] = _ => {
var list = this.Bind<List<Model>>();
...... do something with list .........
}
SSVE is "dumb", there's no way to execute any arbitrary code. The only way to do this would be to put the index into your model, you can do it with LINQ with something like (not compiled, just typed from memory):
var indexedModel = model.Select((m,i) => new { Index = i, Model = m });
Then in your view do something like:
<form method="Post">
<table class="table">
#Each
<tr>
<td>
<input type="hidden" name="Id[#Current.Index]" value="#Current.Model.Id" />#Current.Id
</td>
<td>
<input type="text" name="Name[#Current.Index]" value="#Current.Model.Name"/>
</td>
<td>
<input type="text" name="Code[#Current.Index]" value="#Current.Model.Code"/>
</td>
<td>
<button type="submit">Submit</button>
</td>
</tr>
#EndEach
</table>
</form>