Below is an example of Bootstrap Code to create a input-group. How can I use jQuery to set the contents of the input-group using the id?
<div class = "container">
<div class = "input-group-addon">Your name</span>
<input type="text" class="form-control" id="inputField" placeholder="Full Name">
</div><br>
Also, is there a way I can make the input-group not editable. I want to use it to display read-only text.
$("inputField").???? <-- What goes here??
Thanks!!
$("#inputField").attr('readonly',true).val('myValue')
if you have access to the html put directly readonly="readonly" as attribute of input.
you can put value directly in HTML with the value attribute.
ps: dont forget the "#"
$('#inputField').val('the value');
Related
I'm starting to learn Cypress. I want to select the input field and provide the phone number by using cypress.io. The code I have following but it does not work. However can I using find or there is another way to get the input element to type in phone number?
cy.get('div').contains('Phone Number').find('input[name=teacher[0].number]').type('8000-1612023')
<div class="required field">
<label>Phone Number</label>
<div title="Teacher number" class="ui fluid right labeled input no-spinners">
<input required="" type="number" name="teacher[0].number" value="">
<div class="ui label label">US</div>
</div>
</div>
Why don't you directly target the input field using the following code
cy.get('input[name="teacher[0].number"]').type('8000-1612023')
Please find the screenshot below for a successful test. I would also recommend you to change the type of input in your HTML to tel
HTML:
<input required="" type="tel" name="teacher[0].number" value="">
Cypress:
describe('Trial', function() {
it('Test', function() {
cy.visit('http://localhost:8080/trials/')
cy.get('input[name="teacher[0].number"]').type('8000-1612023')
})
});
Test Result:
Try this instead:
cy.contains('div', 'Phone Number').find('input').first().type('8000-1612023')
The first argument to contains tells cypress to find the element with that selector that contains the text.
I write selectors with the input tag as below and it worked for me.
cy.get('input[name="elementName"]').type(val)
Check this to learn best practices when selecting elements:
https://docs.cypress.io/guides/references/best-practices#Selecting-Elements
I have to insert a set of attributes to my a component I want to re use...
now different attributes will come as string to me...
say for example I want to insert an element in my component
<input type="text" maxlength="10" placeholder="enter your name"/>
then i will get all the attributes as a single string
attr = 'type="text" maxlength="10" placeholder="enter your name"'
in the controller for my component...
and i have to insert that to my conponent in the html...
i have tried
<input {{attr}}/>
and
<input {{jQuery.parseHtml(attr)}}
etc..
but it is not working... also, could not find any solutions...
please share any solutions or some links/references helpful for me...
You can use #Input properties to pass data to a nested reusable component. However, AFAIK there isn't an easy way to pass a string of html attributes and apply them automatically. You'd either need to pass them on individual input properties or write code to process the string yourself and map them into attributes for binding.
Use binding for each attribute you want to change dynamically
Component:
typeTxt: string = "text";
maxLengthNum: number = 10;
placeholderString: string ="enter your name";
Html:
<input [type]="typeTxt" [maxlength]="maxLengthNum" [placeholder]="placeholderString"/>
See the documentation to better understand data binding and deal with the different attribute types (Properties, events, two-way, etc.)
Use the parent tag to dynamically change your template
Component:
htmlString: string = '<input type="text" maxlength="10" placeholder="enter your name"/>';
Html:
<div [innerHTML]="htmlString"></div>
Result:
<div>
<input type="text" maxlength="10" placeholder="enter your name"/>
</div>
Hey i want to select with Intern over CSS Selector ID this input field and put some text in.
<div class="controls input-group has-success">
<input id="billingAddress.firstName" class="form-control valid" type="text" required="" value="" name="billingAddress.firstName" from="1..3" placeholder="" autocomplete="given-name">
I try this commands but nothing works for me:
findByCssSelector('form input[name=billingAddress.firstName]')
findByCssSelector('form input[name="billingAddress.firstName"]')
findByCssSelector('form input[ID=billingAddress.firstName]')
findByCssSelector('form input[ID="billingAddress.firstName"]')
findByCssSelector('input#billingAddress\\.firstName')
findById('billingAddress\.firstName')
findById('billingAddress\\.firstName')
Example Code:
findById('billingAddress\.firstName')
.click()
.type('test')
.sleep(200)
.end()
Could anyone possibly help me with that problem.
Thank you everybody for looking in my problem.
For findByCssSelector using attributes, the attribute value should be quoted, like:
.findByCssSelector('input[id="billingAddress.firstName"]')
For findById, you don't need to escape periods (the ID is just a string, not a regex):
.findById('billingAddress.firstName')
In a quick test with your HTML snippet, both of these work.
I have HTML like following :
<div class="task-manager">
<label>Manager: <input type="text" value="" /></label>
</div>
I need to modify text of label Manager dynamically.
I tried using JQUERY text method, but it replaces input type also.
$taskTemplate.find(".task-manager label").text("M123")
You can use:
$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:";
You should change your HTML code, because <input> field is inside <label> and when you are changing value of this label, it's also overwriting and removing input form field:
<div class="task-manager">
<label>Manager:</label> <input type="text" value="" />
</div>
Just move the Input tag outside the label tag, because when your updating the text of your label, its erasing the content of label (which will obviously remove input tag inside it) , so change your code like this
HTML code:
<div class="task-manager">
<label for="title">Manager:</label>
<input type="text" id = 'title' value="" />
</div>
JS code:
$('.task-manager label').text('Deputy Manager :');
Live Demo # Jsfiddle:
http://jsfiddle.net/dreamweiver/w6arp71x/
note/suggestion:for attribute added to label to bind the input to the label by default
$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:"
this worked for :)
how can i remove the focusin dropdown that you see in this image?
by css or javascript? How?
thanks.
Use autocomplete="off":
<input type="text" autocomplete="off">
However, this is a non-standard attribute for HTML version < 5. In HTML5 you can freely use this attribute, see the reference:
http://www.w3.org/TR/html5/the-form-element.html#attr-form-autocomplete
If that's input of type text then you can do it by specifying attribute autocomplete:
<input type="text" autocomplete="off"/>
Attribute for <INPUT ...>
AUTOCOMPLETE = ON | OFF
<input type="text" autocomplete="off">
Good read
How to Turn Off Form Autocompletion