I want to add tooltip in a readonly fields by using jquery. read data from readonly textbox and show as tooltip. I am not able to find its solution anywhere in google
$(document).ready(function () {
$('#nextDate').keyup(function () {
$(this).attr('title', $(this).val())
})
})
html
<td><input type="text" title="" id="nextdate" class="form-control" readonly=""/></td>
but it doesn't works
You should not insert any string inside readonly, Inside readonly should be true/false or readonly="readonly", if you insert any custom string like readonly="Hi this is readonly".
This will make input readonly in smart browsers like chrome but It may be break in old browsers. So if you would like to show any custom message then you can create and custom attribute like this:
<input type="text" readonly="readonly" data-readonly="hi, i am readonly" value="Hi i am input3" />
And you can get this value through:
$(this).attr('data-readonly')
you can check this fiddle also:
https://jsfiddle.net/nr06Lmte/
I am using mouse over event instead of keyup event.May be it will be useful for you.
<td><input type="text" title="hello" id="nextdate" class="form-control" value="2020-10-10" readonly="" onmouseover="myFunction()"/></td>
<script>
function myFunction(){
document.getElementById('nextdate').setAttribute('title', document.getElementById('nextdate').value);
}
</script>
Related
I have created one checkbox on the click on which the date fields are enabled/disabled
this is my code for jquery:
$(document).ready(function() {
$("#mychechbox").click(function(){
$("#date_1").attr("disabled", !this.checked);
});
});
my html tags for same:
<input id="date_1" value="<?php echo $this->input->post('from'); ?>" name="from" class="form-control" type="date" placeholder=" From" disabled/>
<p class="pull-left" style="font-size:10px;">
From Date<br><br>Enable Date fiedls
<input type="checkbox" class="pull-left" id="mychechbox" name="mychechbox">
</p>
</div>
<div class="col-sm-2" >
<input id="date_2" value="<?php $to= $this->input->post('to');if($to){echo $to;}else{echo date('m/d/y'); } ?>" name="to" class="form-control" type="date" placeholder=" To" disabled/>
<p class="pull-left" style="font-size:10px;">End Date </p>
</div>
I am doing this in Codeigniter.
please suggest me some improvements if needed
Why use jQuery and start mixing HTML5 with a deprecated (not yet obsolete) framework like jQuery?
Example only HTML5 + Pure JS:
Enable/Disable input fields
and if you do wanna use jQuery
Don't use click cause than it will not work when checking/unchecking the checkbox when u use your keyboard.
Use the change event instead and verify the current state of the checkbox so whether it was checked or not.
Example:
$(document).ready(function() {
$("#mychechbox").change(function() {
$("#date_1").prop("disabled", !this.checked);
});
});
Also use prop instead of attr to add the disabled property on an input field. Also recommend to use #mycheckbox with a k instead of #mychechbox with an h just to make sure that other people don't mistake if they write correct English.
So finally after so many attempts I got the solution:
I was unaware that along with my checkbox icheck-helper class(which I had mentioned in one of the comments) is also being loaded automatically...
so I did this:
$('#mycheckbox').on('ifChanged', function(event) {
if(this.checked) {
// alert("yes");
$("#date_1").removeAttr("disabled");
$("#date_2").removeAttr("disabled");
}
else {
// alert("no");
$("#date_1").attr("disabled","disabled");
$("#date_2").attr("disabled","disabled");
}
});
thank you everyone for the answers
if Your need to enable and disable datepicker on the basis of checkbox is checked or not then, try below code:
$(document).ready(function() {
$("#mychechbox").click(function(){
$("#mychechbox").is(':checked') ? $('#mydate').datepicker('enable') : $('#mydate').datepicker('disable');
});
});
I"m new to AJAX requests and having these fire when a form input field is modified. I've managed to get this working well with a date input field, but have just added a 2nd form to the page which also has a date input field and now the script is firing when both fields are modified. I need to disable this so it doesn't fire on the 2nd input field.
Here's the first input field:
<td id="57944"><input type="text" id="985124" class="form-control datepicker" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>
which fires this script when the date field is modified:
$(document).ready(function() {
$(".form-control.datepicker").change(function(){
I've just added this 2nd input field:
<td><input type="text" class="form-control datepicker" name="dateReceived" id="dateSigned" data-date-format="dd/mm/yyyy" placeholder="Date Signed"></td>
which is also firing the same script. I can see that both have:
class="form-control datepicker"
which is presumably the reason the script is firing for both, but I'm not sure how to change the 2nd input so that it won't fire the script (or change the $(".form-control.datepicker").change(function(){ part of the script so that it only fires when the first input is modified).
you can have a look at the eq selector .form-control.datepicker:eq(0)
that will only select the first element.
You can also try with name selector
$("input[name='dateShipped']").
change(function(){});
If you are using event's for same class the event will trigger for both, either you can use
$(".form-control.datepicker:eq(0)").change(function(){});
or
$(".form-control.datepicker:first-child").change(function(){});
I would recommend adding a class to the date fields for which you want to trigger the event. Then, make your class selector more specific when you wire up the event. This will make your code more scalable than using :eq() since you won't have to figure out which index is which control when you go to add more inputs.
<td id="57944"><input type="text" id="985124" class="form-control datepicker fire-event" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>
$(document).ready(function() {
$(".form-control.datepicker.fire-event").change(function(event){
// handle event
});
});
Conversely, you could use the .not() selector function if you would rather add a specific class to items you don't want firing a change event:
<td id="57944"><input type="text" id="985124" class="form-control datepicker no-change-event" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>
$(document).ready(function() {
$(".form-control.datepicker").not(".no-change-event").change(function(event){
// handle event
});
});
I am working on a website using Jekyll through github-pages. I am working on some simple javascripts to make a random number generator, but they aren't able to change values on the page.
The page has the following:
/resume/index.html
<form>
<input type="text" name="#d" maxlength="3" value="1" />
<div class="dice_text">d</div>
<input type="text" name="d#" maxlength="2" value="4" />
<button type="button" name="rollme" onclick="roll()">roll</button>
<div class="dice_text"> : </div>
<input type="text" id="dieresult" readonly />
</form>
/resume/roll.js
document.getElementById('dieresult').setAttribute('value', '3') ;
function roll() {
alert("rolled!");
}
For some reason I don't understand, the roll() function will get called and give an alert when you press the button, so the site seems to be incorporating the javascript file, but it refuses to alter the page to display a number in the read only field.
My repo is online at github, and the problem site url is here.
EDITED: corrected 'id' vs 'name' issue but page still won't change the value of 'dieresult'
You're mistaking the name attribute with the id attribute
When you attempt to grab that element using document.getElementById, it will return null.
Making the id dieresult should fix this. I highly suggest getting cozy with your browser's inbuilt JavaScript console - you pick up on minor mistakes like this very quickly!
Your <input type="text" name="dieresult" readonly /> does not have an ID, which is what you are looking for in the line document.getElementById('dieresult').setAttribute('value', '3') ;
If you change the <input type="text" name="dieresult" readonly /> to <input type="text" id="dieresult" readonly /> and place this in the roll() function it should work just fine
your input has a name but you query it by id, change it to this:
<input type="text" name="dieresult" id="dieresult" readonly />
You have a 404 on jquery. Fix this by putting a jquery in your roll folder.
And, you can try to execute you code once everybody is onboard
$( document ).ready(function() {
document.getElementById('dieresult').setAttribute('value', '3') ;
});
See http://learn.jquery.com/about-jquery/how-jquery-works/#launching-code-on-document-ready
hide pop-up of required of input using javascript jsfiddle
try to submit with empty input and see the pop-up, so i don't need to display that pop-up and i want the required to validate.
any help i don't need to display any warning.
<form>
<input type="text" name="name" required="required" value="" />
<input type="submit" name="submit" value="Submit" />
Since this is a HTML5 Event you can prevent the event from triggering the popup and still provide validation (https://developer.mozilla.org/en-US/docs/Web/Events/invalid). A simple event listener will do the job.
To handle focus include an id to that field like so ...
HTML
<input type="text" id="name" name="name" required="required" value="" />
And handle that focus within the return function ...
JS
document.addEventListener('invalid', (function () {
return function (e) {
e.preventDefault();
document.getElementById("name").focus();
};
})(), true);
EDIT
Check it out
http://jsfiddle.net/rz6np/9/
autocomplete="off"
or
autocomplete="nope"
If autocomplete still works on an <input> despite having autocomplete="off", but you can change off to a random string, like nope.
It appears that Chrome now ignores autocomplete="off" unless it is on the <form>-tag.
I have a function that calculate price for a product. I'm not JavaScript developer so my knowledge is very limited.
By changing the value in the text field script calculate price for product.
<input type="text" value="" name="options[22]" class="input-text"
onfocus="opConfig.reloadPrice()">
Problem is that the script triggers only if the following is done:
insert value into the textfield
click somewhere outside the textfield
click back into the text field
All I need is a button saying refresh that by clicking it will have functionality of step 2 and step above.
I'm not sure if I explained it properly so if there is any more information required to resolve this issue please let me know.
Here is the link to the site.
http://www.floorstodoors.mldemo.co.uk/spotlight/oak-value-lacquered-3-strip.html
The field im trying to amend/add refresh button is Enter Square Metre
You'd add your event to a button, and retrieve a reference to your input by assigning an ID:
<input type="text" value="" name="options[22]" id="price" class="input-text" />
<input type="button" value="Refresh" onclick="reloadPrice();" />
function reloadPrice() {
var price = "0.00"; // set your price here
// get a ref to your element and assign value
var elem = document.getElementById("price");
elem.value = price;
}
I'm not sure I fully understand you, but is this what you need?
<input type="text" value="" name="options[22]" class="input-text">
<input type="button" onclick="opConfig.reloadPrice()" value="Refresh" />
A button with an click-event listener, so that when you click the refresh-button the opConfig.reloadPrice() method gets executed.
Edit based on comment:
I'm not sure what JavaScript library you are using, but you have these two lines in you code that seems to add event-listeners to the input with id qty.
$('qty').observe('focus',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('focus',this.getFromQties.bind(this))
They are listening for the focus event, thus only triggers when your input field gains focus.
If you modify those to listen for the keyup event instead, I believe it will work better. Without being familiar with the framework, I guess the only thing to change would be this:
$('qty').observe('keyup',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('keyup',this.getFromQties.bind(this))
Use onchange or onblur instead of onfocus!
use onchange. This will activate anytime the value changes:
<input type="text" value="" name="options[22]" class="input-text" onchange="opConfig.reloadPrice()">
First: this is JavaScript and not Java - so you have to be a javascript and not a java developer.
to solve your problem you can make a new button with a onclick attribute and execute your function there which you have in your onfocus attribute in the text-field.
or you can take another event - like onchange or onblur for instance..
<input type="text" onchange="..yourfunctionhere...">
http://www.w3schools.com/js/js_events.asp
All I need is a button saying refresh that by clicking it will have functionality
For that you need a button with onclick listener,
do the below things.
<input type="button" value="Refresh" onclick="opConfig.reloadPrice();" />
<input type="text" value="" name="options[22]" class="input-text"/>