Javascript focus is not working in my code.
HTML
<div class="col-md-6" style="border:none; margin-top:2px; padding-right:5px">
<input type="text" id="edtunt" ng-model="Unit" class="form-control" placeholder="Edit Unit" />
</div>
Javascript
var textbox = document.getElementById('edtunt');
//document.getElementById("edtunt").focus();
document.getElementById("edtunt").focus();
$scope.Unit = unit.name;
use tabindex="0" for making div focusable
Your code works:
document.getElementById('edtunt').focus();
<div class="col-md-6">
<input
type="text"
id="edtunt"
ng-model="Unit"
class="form-control"
placeholder="Edit Unit">
</div>
Also, within your AngularJS application, you can add the autofocus attribute:
angular
.module('MyApp', [])
.controller('MyController', function() {});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="col-md-6">
<input
autofocus
type="text"
id="edtunt"
ng-model="Unit"
class="form-control"
placeholder="Edit Unit">
</div>
</div>
Indeed your code should work. Just a question, why you do:
var textbox = document.getElementById('edtunt');
document.getElementById("edtunt").focus();
Instead of:
var textbox = document.getElementById('edtunt');
textbox.focus();
What worked for me is making sure the whole document is loaded before setting focus. A very easy way to do that is using this copy paste JQuery code:
$( document ).ready(function() {
var textbox = document.getElementById('edtunt');
textbox.focus();
});
Hope this might help!
Related
I have a little script which create a new div block if the user click on button. To count how many are created I have an hidden input. Everytime a new block is created the value of this hidden input should get updated.
Thats my script:
$(function () {
$("#addBtn3").on("click", function () {
imageBlockCount++;
document.getElementById("counter").value = imageBlockCount;
$(
$.parseHTML(
`<div class="form-group" id="gallery-${imageBlockCount}" >
<label for="new-content-${imageBlockCount}">New Content</label>
<input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
</div>`
)
).appendTo("#newElements");
});
});
This is my html code:
<div style="flex:auto;text-align:right;">
<button id="addBtn3" type="button">Content +</button>
</div>
<input name="counter" type="text" id="counter" value="0" hidden>
<div id="newElements">
</div>
But in the script where it should update the value don't work, but I don't know why, I don't find any other methods which are so different.
Your code works fine. place console.log($("#counter").val()) after appendTo.
A webpage's HTML doesn't automatically update when an input field's value changes.
If you want such functionality, you could place this after updating value of #counter:
$('#counter').attr('value', $('#counter').val());
$(function () {
let imageBlockCount = 0
$("#addBtn3").on("click", function () {
imageBlockCount++;
document.getElementById("counter").value = imageBlockCount;
$('#counter').attr('value', $('#counter').val());
$(
$.parseHTML(
`<div class="form-group" id="gallery-${imageBlockCount}" <label for="new-content-${imageBlockCount}">New Content</label>
<input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
</div>`
)
).appendTo("#newElements");
console.log($('#counter').val())
});
});
<div style="flex:auto;text-align:right;">
<button id="addBtn3" type="button">Content +</button>
</div>
<input name="counter" type="text" id="counter" value="0" hidden>
<div id="newElements">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a problem with ng-if, I am pretty new to angularjs. I want to show/hide a searchbar only on certain views, but it only works after refreshing the page. But it should work, when the view changed.
html:
<div id="searchbarTop" ng-controller="searchbarController">
<form class="col-md-12 py-1" ng-if="!showSearchbarTop">
<div class="input-group">
<input type="text" class="form-control typeahead" id="query"
placeholder="Search for folders or workflows..." data-
provide="typeahead" autocomplete="off" ng-wflist="workflowList" wf-search/>
</div>
</form>
</div>
controller:
ProjectX.controller("searchbarController", function($scope,$http,$location) {
$scope.$root.showSearchbarTop = $location.path() === "/";
...
});
Hope someone can explain me, which mistake I made.
You are using showSearchbarTop as an attribute which is initialized only at the beginning of the page load. That's why, you need to use it as a function.
See the following code
var ProjectX = angular.module('', []);
ProjectX.controller("searchbarController", function($scope, $http, $location) {
$scope.$root.showSearchbarTop = function() {
return $location.path() === "/";
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="searchbarTop" ng-controller="searchbarController">
<form class="col-md-12 py-1" ng-if="!showSearchbarTop()">
<div class="input-group">
<input type="text" class="form-control typeahead" id="query" placeholder="Search for folders or workflows..." data- provide="typeahead" autocomplete="off" ng-wflist="workflowList" wf-search/>
</div>
</form>
</div>
I want to do a validation registration form. How to display the error of the input empty in a span at the bottom of the input?
I want this span to not already exist and be created to display the message.
enter code here
<form action="" name="reg-form" method="post">
<div id="name-box" onblur="validateFullname()" class="form-holder">
<input type="text" name="name" placeholder="enter name" id="name" class="form-control">
</div>
i want create a span element and display message after input or append to div.
The solution will look something like this:
Identify where the "Error Message" span will appear. It needs to be inside another element, even if that element is the body. My example contains: <div id="ErrMsg"></div>
You need an event that triggers both the validation, and the creation of the error span. Usually, that event is a button press. So let's go with that in this example:
$('#mybutt').click(function(){
var tmpL = $('#login').val();
var tmpP = $('#pword').val();
if( tmpL=='' || tmpP=='' ){
$('#ErrMsg').html('<span>Please fill-out all fields</span>');
}else{
alert('Logging in now');
}
});
$('input').on('keyup', function(){
if ( $('#ErrMsg span').length ) $('#ErrMsg span').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="LoginDIV">
<div id="LName">
Login: <input id="login" type="text" />
</div>
<div id="LPass">
Pword: <input id="pword" type="password" />
</div>
<div id="ErrMsg"></div>
<div id="btnDIV"><button id="mybutt">Login</button></div>
</div>
Note: the <script> tag that references the jQuery library is all that you need in order to use jQuery. jQuery just makes javascript easier, more consistent, and less-typing-required.
Your best bet is probably to use JQuery Validation. It's built-in methods don't technically use a span, as you specified, but you could easily tack on your own function to un-hide the custom span you create. Or, better yet, just style their error-message <label> in the way you prefer.
Here's an example using just JQuery Validation:
<form action="/" method="post" id="commentForm">
<div class="form-holder">
<input type="text" name="username" placeholder="username" class="form-control">
</div>
<div class="form-holder col-12">
<input type="email" name="email" placeholder="email" class="form-control">
</div>
</form>
<script>
var validator = $("#commentForm").validate();
validator.showErrors({
"email": "Please enter a valid email address"
});
</script>
(The example leaves out the includes for JQuery and JQuery Validation.)
I need to know if the field of the spring form is disabled or not. What will I do to do this?
var isDisabled = $('#dateUsed').prop('disabled');
var isDisabled = document.getElementById('dateUsed').disabled;
I tried these codes to check if it's disabled but it returns false even though it is disabled.
Code:
The field:
<div class="row">
<div class="col-md-4">
<div class="form-group">
<form:label path="materialUsed.dateUsed">Date Used</form:label> <star id="dateUsedStar" class="hidden" >*</star>
<form:input path="materialUsed.dateUsed" type="text" class="form-control datetimepicker" id="dateUsed" disabled="true"/>
</div>
</div>
</div>
In my Javascript:
var isDisabled = $('#dateUsed').prop('disabled');
var isDisabled = document.getElementById('dateUsed').disabled;
alert(isDisabled);
I expect the output to be true since it is disabled in the form.
You can test this my using the "is" method ; which will return a boolean
$('#dateUsed').is(':disabled');
console.log($('#dateUsed').is(':disabled')) // True
On a personal Note its rather better to use readonly="true" in your form fields
rather than the disabled property.
I'm not familiar with the format of the HTML you are using.
<form:label path="materialUsed.dateUsed">Date Used</form:label> <star id="dateUsedStar" class="hidden" >*</star>
<form:input path="materialUsed.dateUsed" type="text" class="form-control datetimepicker" id="dateUsed" disabled="true"/>
I don't think this is valid HTML.
Try this HTML
<div class="row">
<div class="col-md-4">
<form>
<div class="form-group">
<label path="materialUsed.dateUsed">Date Used</label> <star id="dateUsedStar" class="hidden" >*</star>
<input path="materialUsed.dateUsed" type="text" class="form-control datetimepicker" id="dateUsed" disabled="true"/>
</div>
</form>
</div>
JQuery
$(document).ready(function(){
var isDisabled = $('#dateUsed').prop('disabled');
alert(isDisabled);
});
Here is a demonstration
https://jsfiddle.net/markou/mo7r5anq/8/
This works, and you get true.
If you replace this HTML with the HTML you have above will get undefined.
I have a form field that I am duplicating when one clicks on the "Add" button. When an ID is duplicated, I want to add an incremental number to it. My code below is appending a 0 to the end of each new ID instead of counting. So #mark-description becomes mark-description00 instead of #mark-description2. I've looked a couple other similar posts here but am unable to determine what I'm doing wrong. Any thoughts would be much appreciated.
NOTE: I'm using ids because a jQuery plugin I'm using requires them.
Javascript:
$('#add-character-button').on('click', function () {
var source = $('.mark:last'),
clone = source.clone();
var count = 0;
clone.find('.copyme').val($(this).attr('title')).attr('id', function(i, val) {
return val + count;
});
clone.insertAfter('.mark:last');
});
HTML:
<div>
<input class="checkbox" id="standard" name="mark-type" type="checkbox" value="Standard Character">
<label class="no-placeholder" for="standard-character"></label>
<div class="standard-mark-container">
<div class="mark" id="mark-details">
<div class="mark-name">
<label class="placeholder" for="mark-name"><span>text</span></label>
<input class="copyme" id="mark-name" name="mark-name" placeholder="" title="Enter your mark name" type="text">
</div>
<div class="description">
<label class="placeholder" for="mark-description"><span>text</span
</label>
<textarea class="copyme" id="mark-description" name="mark-description" placeholder="" title="Enter a description"></textarea>
</div>
<div class="remove"> <a class="remove-mark-button" href="#" id="remove-character-button"><span>Remove</span></a>
</div>
</div>
</div>
<div class="add-mark"><a class="add-mark-button" href="#" id="add-character-button"><span>+ Add</span></a></div>
</div>
You should probably not even be using id's on the items that you are cloning. And you SHOULD be using array access notation (i.e. mark-name[]) in your field names. Without this you are only going to get one of the duplicate fields with the same name posted.
Here is what I would suggest.
HTML:
<div>
<input class="checkbox" id="standard" name="mark-type" type="checkbox" value="Standard Character">
<label class="no-placeholder" for="standard-character"></label>
<div class="standard-mark-container">
<div class="mark">
<div class="mark-name">
<label class="placeholder"><span>text</span>
<input class="copyme" name="mark-name[]" placeholder="" title="Enter your mark name" type="text">
</label>
</div>
<div class="description">
<label class="placeholder"><span>text</span>
<textarea class="copyme" name="mark-description[]" placeholder="" title="Enter a description"></textarea>
</label>
</div>
<div class="remove"><a class="remove-mark-button" href="#"><span>Remove</span></a>
</div>
</div>
</div>
<div class="add-mark"><a class="add-mark-button" href="#" id="add-character-button"><span>+ Add</span></a></div>
</div>
javascript:
$('#add-character-button').on('click', function() {
// make clone
$template = $('.mark:last');
var $clone = $template.clone();
// set values to default in clone
$clone.find('.copyme').each(function() {
$(this).val($(this).attr('title'));
});
// insert into DOM
$clone.insertAfter($template);
});
$('.remove').on('click'), function() {
$(this).closest('.mark').remove();
});
This fully eliminates the need to modify id names and simplifies your code.
is this what you're looking for? i simplified the code so i wouldnt have to type all the ids and fors and stuff. http://jsfiddle.net/swm53ran/134/
$(document).ready(function() {
var count = 0;
$('.add').on('click', function() {
count++;
var clone = $('.template').clone('true').removeClass('template');
clone.find('textarea').attr('id', 'textarea' + count);
clone.find('textarea').html('Id: ' + clone.find('textarea').attr('id'));
clone.appendTo('.sections');
});
});
Add
<div class="sections">
<div class="template section">
<input type="checkbox" /><br/>
text <input type="text"/><br/>
textarea <textarea id="textarea">Id: textarea</textarea>
</div>
</div>
although, i would suggest not using id's, but if you're intent on using them, this should work for your purposes.