I am having trouble selecting a kendo combobox selection using angular js. The best way i can tell to change the value is to set the model.batch.type on the controller, but i don't know how to do that. I have messed around with executing a script to do it but have had no luck. Any help would be appreciated.
<div class="row form-group">
<label for="type" class="col-sm-1 k-label text-right">Type</label>
<input id="type" class="col-sm-1 no-padding" kendo-combo-box data-ng-model="model.batch.type"
k-data-text-field="'name'" k-data-value-field="'id'" k-data-source="model.batchTypes"/>
<label for="size" class="col-sm-1 k-label text-right">Size</label>
<input type="text" id="size" name="size" class="col-sm-1 k-textbox" ng-required="true" data-ng-
model="model.batch.size"/>
<label class="col-sm-2 col-sm-offset-1 k-label">
<input type="checkbox" data-ng-model="model.barCodePrint" checked/> Print Batch Barcode
</label>
<button type="button" class="btn" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn btn-primary" ng-disabled="createBatchForm.$invalid"
value="Create"/>
</div>
I am trying to select an option in the second input with id='type'.
Locate the underlying input element, click it, clear, send keys to it and hit enter:
var comboBox = element(by.css("input#type"));
comboBox.click();
comboBox.clear();
combobox.sendKeys("Element inside the combobox");
combobox.sendKeys(protractor.Key.ENTER);
Related
I am having difficulty figuring out the following error:
Uncaught TypeError: Cannot read property 'split' of undefined
The HTML:
<div id="content" class="col-xs-12 col-sm-12">
<p>Please select your preferred payment method.</p>
<div class="radio">
<label>
<input type="radio" name="payment_method" value="authorizenet" checked="checked">
Credit Card/Debit Card (Authorize.Net) </label>
</div>
<div class="radio">
<label>
<input type="radio" name="payment_method" value="affirm">
Credit Card/Debit Card (Affirm) </label>
</div>
<p><strong>Add comments about your order.</strong></p>
<p>
<textarea name="comment" rows="8" class="form-control"></textarea>
</p>
<div class="cart-module">
<div class="cart-content">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<h4 for="input-coupon">Coupon Code</h4>
<div class="input-group">
<input type="text" name="coupon" value="" placeholder="Coupon Code" id="input-coupon" class="form-control">
<span class="input-group-btn">
<input type="button" value="Apply" data-code="coupon" data-loading-text="Loading..." class="btn btn-primary">
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<h4 for="input-voucher">Gift Certificate Code</h4>
<div class="input-group">
<input type="text" name="voucher" value="" placeholder="Gift Certificate Code" id="input-voucher" class="form-control">
<span class="input-group-btn">
<input type="button" value="Apply" data-code="voucher" data-loading-text="Loading..." class="btn btn-primary">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="buttons">
<div class="pull-right">I have read and agree to the <b>Shipping and Returns</b>. <input type="checkbox" name="agree" value="1">
<input type="button" value="Continue" id="button-payment-method" data-loading-text="Loading..." class="btn btn-primary">
</div>
</div>
The Script:
var newtext = "affirm";
selector = $("input[type=radio][value=affirm]").closest("label");
var line = selector.html().split(">")[0] + ">" + newtext;
selector.html(line);
The Goal:
I have two radio buttons on the checkout page.
Credit Card/Debit Card (Authorize.Net)
Credit Card/Debit Card (Affirm)
I am unable to edit the HTML directly. Thus rebuilding the html line with the above code to give me the output I want. I am trying to change the HTML text of the 2nd radio input to just "Affirm".
The script works in a fiddle, but not on the page.
I once encountered a similar bug when trying to maintain a page without access to the source files. I was using jQuery to attempt to delete a p element sentence but was coming up undefined because it was running on the homepage before the application even got to generate that part of the html. It was an SPA. I fixed it by adding a listener on the document to the router something along like this: $(document).on("pageshow", "#checkoutPage", function() {//your jquery function});
I tried it both on CodePen and locally with VS Code and both time I got the intended effect. Have you tried maybe making sure youre using the right version of JQuery and that is linked to the html in the proper oder, also debugging via console logs? See below:
CodePen
enter code here
I Am using Bootstrap's button plugin for my buttons, currently I have 6 Checkbox buttons and I need a Method to retrieve the value of every checked button to make some calculations. But I cannot figure how, I tried searching here And found a pretty good way but for Radio Buttons and for a single checkbox but didn't find any for multiple.
how can I make a Jquery method for sweeping the btnGroup elements and retrieve all the checked values in an array?
Please help!!
PS. I Am not native English speaker and I Am pretty new to Jquery, so sorry if its a noob question.
Example Html:
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>
You can use this selector:
$("#btnGroup input[type='checkbox']:checked")
To get all the checked checkboxes in the div with the id btnGroup. You can then use .each() to loop over all the checked boxes and use destructuring assignment to get the value of each checked box.
Here I have logged out each value as an example.
See example below:
let values = [];
$('.calculate').click(_ => {
values = [];
$("#btnGroup input[type='checkbox']:checked").each((_, {value}) => {
values.push(value);
});
console.log(values);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons" id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>
<button class="calculate btn btn-primary btn-lg">Calculate</button>
<form #addOpeninghoursForm="ngForm" ngNativeValidate (ngSubmit)="addOpeninghours()">
<div class="form-group">
<label for="day">Select Day:</label>
<select class="form-control" [(ngModel)]="openinghours.day" name="day" id="day" required>
<option value="1">Saturday</option>
<option value="2">Sunday</option>
</select>
</div>
<div class="form-group">
<label for="opens_from">Opens From:</label>
<input type="time" class="form-control" [(ngModel)]="openinghours.opens_from" name="opens_from" id="opens_from" placeholder="Enter the time" required>
</div>
<div class="form-group">
<label for="opens_till">Opens Till:</label>
<input type="time" class="form-control" [(ngModel)]="openinghours.opens_till" name="opens_till" id="opens_till" placeholder="Enter the time" required>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-success" (click)="onlyResetTheTimeInputs?!?!">Reset</button>
</form>
When I saved the form, by pressing the save button, sometimes I want to press the reset button. Not always! But when I have to, I only wanna clear the time inputs. The earlier selected day may not be cleared.
You can clear the input fields of time in onlyResetTheTimeInputs() like
onlyResetTheTimeInputs(): void {
this.openinghours.opens_from = this.openinghours.opens_till = '';
}
Take a look at the code and demo
Source, Stack Blitz
Explanation:
Just a simple clearing of value will do, angular takes care of the view.
Advantage of having two way data binding is view doesn't need to be updated manually
onlyResetTheTimeInputs() {
this.openinghours.opens_from = this.openinghours.opens_till = null;
}
I'm trying to make calculations on multiple fields having different data but when i add them calculations are only done on the first set of fields but the other fields i add, the javascript does not seem to work.
Plus i want to save those data in an array.
Here's my HTML code to display the select box and the input fields
<div id="addon_details">
<div class="form-group col-md-6">
<label for="name">Select Addon Package</label>
<select id="addon" name="type[]" class="form-control">
<option value="Radio">Radio</option>
<option value="Lamp">Lamp</option>
<option value="Phone">Phone</option>
<option value="Battery">Battery</option>
<option value="Antenna">Antenna</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="name">Quantity</label>
<input type="number" class="form-control" name="quantity[]" placeholder="Qty" id="qty[]" onchange="calculate();">
</div>
<div class="form-group col-md-4">
<label for="name">Total Price</label>
<input type="number" class="form-control" name="total[]" placeholder="" readonly="" id="price">
</div>
</div>
Then when I click on add package button it adds another set of fields
<div class="form-group col-md-12 col-md-offset-2">
<button type="button" class="btn btn-info btn-addon m-b-sm"><i class="fa fa-plus" aria-hidden="true" id="add_success"></i>Add Package</button>
<button type="submit" class="btn btn-info btn-addon m-b-sm"><i class="fa fa-refresh" aria-hidden="true"></i>Upgrade</button>
<button type="button" class="btn btn-default btn-addon m-b-sm"><i class="fa fa-close" aria-hidden="true"></i>Cancel</button>
</div>
Also here's the javascript to compute:
function calculate(){
var qty = document.getElementById('qty[]').value;
var radio = 1000 ;
var price = "";
if(document.getElementById('addon').value == "Radio") {
price = parseInt(qty) * radio;
document.getElementById('price').value = price;
}
}
But unfortunately for me, I can only do calculation on the first set of fields but the other fields the calculation are not possible.
Below you can see what I'm trying to do graphically
Any help is appreciated. Thank you!
As #Barmar suggests, you need to make your ID's unique. In your example your initial addon id could be addon1 like this:
<select id="addon1" name="type[]" class="form-control">...</select>
As you use your add package button, you would have to generate the next number for the select, like:
<select id="addon2" name="type[]" class="form-control">...</select>
<select id="addon3" name="type[]" class="form-control">...</select>
etc...
You could then have your function traverse all the fields with partial matches on addon id. This SO link would help you understand how you might do that.
I have following form and I'm trying to validate following form states:
themeName must is required and should have min. 4 chars.
themeLangFrom selected value cannot be same as themeLangTo (and vice versa).
I would like to display span error message under each invalidated field.
I tried to do by this way but I cannot resolve it with select inputs.
Could somebody tell to me how to do it in the right way please?
Form code:
<ul class="nav nav-pills pull-right">
<li>Close form</li>
</ul>
<h3 class="text-muted">Add New Theme</h3>
<form role="form" name="addThemeForm" id="addThemeForm" >
<div class="form-group">
<label for="themeName">Theme name:</label>
<input id="themeName" type="name" required class="form-control" ng-minlength="4" ng-model="newtheme.name" placeholder="Enter Theme Name">
<span class="formValidationError" ng-show="addThemeForm.themeName.$error">Enter valid e-mail</span>
</div>
<div class="form-group">
<label for="themeLangFrom">Language from:</label>
<select id="themeLangFrom" required class="form-control" ng-options="language as language.name for language in languages" ng-model="newtheme.langFrom" >
<option value="">{{language.name}}</option>
</select>
</div>
<div class="form-group">
<label for="themeLangTo">Language to:</label>
<select id="themeLangTo" required class="form-control" ng-options="language as language.name for language in languages" ng-model="newtheme.langTo" >
<option value="">{{language.name}}</option>
</select>
</div>
<input ng-click="addTheme(newtheme)" ng-disabled="!addThemeForm.$valid" type="submit" value="Add New Theme" class="btn btn-success btn-block btn-lg">
</form>
In order to validate that themeLangFrom is diferent from themeLangTo you will need to implement a custom directive.
You can use angular-ui's ui-validate directive (http://angular-ui.github.io/ui-utils/) for that or proabbly better:
Roll your own... You can take example from the many implementations for password validation directives out there just notice that unlike password validation you need the fields to not be equal.
You can see some examples here: password-check directive in angularjs