Select all text in textbox when label is clicked - javascript

I am using label for attribute for input elements in my website that will help blind users.
Currently when user click on label, the corresponding input is getting activated. That means if there is textbox for name, then cursor will
go in the start of textbox.
For example, if name in textbox is "John", then on click label, cursor will enter in textbox and will show before "John".
But what I want is that it should select "John". That means text of textbox should be selected.
Can anyone help me how I can implement this?
My code is shown below:
<div class="editor-label">
<label for="ContactName">*Name</label>
</div>
<div class="editor-field">
<div>
<input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" />
</div>
</div>

I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.
By using jQuery, you can use the select() method when the label is clicked, using something like this;
$(function() {
$('label').click(function() {
var id = $(this).attr('for');
$('#'+id).select();
});
});
A working example can be found here: http://jsfiddle.net/sf3bgwxr/

Related

In Cypress how to select input element based on name?

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

Binding a jAlert popup content to html content

I'm attempting to use jAlert to show a popup dialog with an input box. When clicking "OK" I want to grab the value from this input box to send to the server. I'm using jQuery to pull the content off a div which includes the input field. Problem is that when I use jQuery to try and get the contents of that input field, it doesn't work - it comes back as empty.
HTML as follows:
<div id="test">
<input type="text" id="def" />
</div>
JS as follows:
$.jAlert({ 'content' : $("#test").html()});
...and to try and access using jQuery...
$("#def").val();
I can get around it by force updating the field using a keyup listener, but it seems really clunky...
<input type="text" id="def" onkeyup="$('#def').val($(this).val())" />
After doing this I can access the content of the 'def' field. Is there a more elegant solution?

Trying to make a rename feature for a list/table

I want the user to be able to change the name of a list/table
<div class="col-md-6">
<form method="post">
<h1>
<b>
<input type="text" value="Group" id="groupName">
</b>
</h1>
<input type="submit" value="Change Name">
</form>
</div>
https://jsfiddle.net/bqgqhxs2/
i only put up the bare minimum code to hopefully get my point across.
i have a "hidden" text box and a submit button and i want the value that the user inputs into the text box to become the new value preferably without having to reload the page.
how would i go about implementing that? or is what I'm asking for even possible?
also if anyone has any other suggestions for a "rename" feature I'm all ears, the overall project is going to be implemented into meteor so if someone has a meteor solution that would be great but I'm only worrying about one problem at a time.
You can use the blur method to take the new name typed into the input.
$("#groupName").on( "blur", function() {
//change the id here
$("table").attr("id", $(this).val() )
//or the value of an element
$("table").attr("value", $(this).val() )
})
No need for the button to change the name of the table
fiddle https://jsfiddle.net/bqgqhxs2/2/

jQuery if hasClass hide element on blur

I have a form that displays error message in a HTML label when users don't enter valid data into form fields. The label displays beneath the form field onBlur and stays there until data is entered into the form field. I would like the label to only show when users click back into the form field instead of showing persistently. Below is the script where I'm attempting to hide the error label as a user tabs out of the form field. I figured I'd worry about making it appear again once I can effectively hide it.
Here is the HTML:
<div class="field">
<input type="text" name="firstname" id="firstname" class="error has-error">
<label for="firstname" class="error">First Name is required.</label>
</div>
And the script
<script type="text/javascript">
if($('.fieldset #firstname').hasClass('error')) {
$(this).blur($('.field label')).hide();
}
</script>
You need to pass a function into the .blur() function as a callback, something like this:
$(".fieldset #firstname").blur(function(evt) {
if($(this).hasClass('error')) {
$(".field label", $(this).parent()).hide();
}
});
Note that I am doing a .field label selector within the context of the parent() of the $(this). $(this) will refer to #firstname, so if you get the parent, you can easily select within that node tree and not accidentally get some other .field label in your page.
You need to put the if condition inside the on blur handler.
$('.fieldset #firstname').blur(function(){
if ($(this).hasClass('error')){
$('.field label')).hide();
}
})

Display content based on Select Menu dropdown change

I'm currently using the following to display an input field when I change a dropdown menu selection:
<select id="delivery_country" name="d_country" onchange="
if (this.selectedIndex==14){
this.form['statesUSA'].style.visibility='visible'
}else {
this.form['statesUSA'].style.visibility='hidden'
};">
However, this only changes the input form element called "statesUSA".
If I want to show the div that this form element is inside, how do I do this?
For the record, my HTML reads:
<div id="usa">
<input type="text" id="statesUSA" />
</div>
Many thanks for any pointers.
use document.getElementById(id)
this:
<select id="delivery_country" name="d_country" onchange="if (this.selectedIndex==14){document.getElementById('usa').style.visibility='visible'}else {document.getElementById('usa').style.visibility='hidden'};">

Categories

Resources