AJAX script trigger firing on 2 separate input fields - javascript

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
});
});

Related

Is there Anyway to add tooltip in a readonly textfields

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>

to get <input> autofocussed so that a barcode scanner could input the productcode and my ajax function could handle it

I have the following code :
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" onChange="ajaxrequest_provideProductListOnHit('protected/snippet/snippet_provideProductListOnHit.php', 'ajaxOnProductHit'); return false;" required="required" autofocus />
The problem is that :
The autofocus is not working, I'm using it in this input box only.
Actually the purpose of this input box is to get the field autofocussed so that a barcode scanner could input the productCode.
Now as you can see, my onChange event handler is not going to work here since the barcode scanner apart from the product code, inputs too.
So I need a solution here which autofocuses and once the barcode scanner inputs value in the field, calls for the mentioned ajax function.
html:
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" required="required" autofocus />
js:
var pc = document.getElementById('productCode');
pc.onblur = function () {
ajaxrequest_provideProductListOnHit(
'protected/snippet/snippet_provideProductListOnHit.php',
'ajaxOnProductHit'
);
}
pc.focus();
i use onblur, because onchange would trigger after EVERY change you make (e.g. typing into the text-field will trigger after every key).
you could also provide some custom-logic, e.g. recognize a certain length
Yes you where right, the problem was that I was using autofocus on a different preceding form field which made this particular field of this particular form non-autofocus. So I learned that in a page with multiple forms loaded in to the DOM, only the first one with auto-focus will work. Fool of me to think otherwise.

Auto complete input type date picker

Today my challenge is this:
I have two inputs and a button:
Both inputs are date picker types. So When I pick a date from first input (for example I choose 11/19/2013) I want the second input to auto-complete to a one day later value. So the second one must pick 11/20/2013 automatically when I click the first input. I use these inputs to calculate a price(in my Magento store).
Below is the structure of my html (just a skeleton)
<div class="select_grid">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="from" id="from" class="hasDatepicker">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="to" id="to" class="hasDatepicker">
<input type="submit" name="Submit">
</div>
If you're happy to use JQuery You want to set something to the onChange handler of the from field.
Something like:
onChange="$('#to').attr('value',$(this).val());"
You'll have to modify it slightly. That syntax as it stands will just copy the value across. You'll need to use the javascript or jQuery date function to increment by one day/week etc.
An example of doing this is in this overflow question: Add +1 to current date

Refresh value in text field with JavaScript/jquery

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"/>

fill checkbox when text is in text area in javascript

I have a text area form like this one:
<input id="sg_0" name="sjalfgefid" type="text" class="letur hvitur" size="8" maxlength="40" value=""></td>
and a Checkbox next to it:
<input type="Checkbox" id="cb0" name="innsent" tegund="val" gildi="eink" value="0" number="0" parents="1" onclick="hakaVid(this)">
I want the checkbox to be filled when some text is written in the text area. And when the user deletes all the text from the textbox, I want the checkbox to update immediately
How can I possibly do this ?
Attach an onKeyUp event handler to the <input> and modify the checkbox's value according to this.value.length.
<input id="sg_0" name="sjalfgefid" type="text" class="letur hvitur"
size="8" maxlength="40" value=""
onkeyup="document.getElementById('cb0').checked = this.value.length > 0;">
Example: http://jsfiddle.net/qG5Cu/
UPDATE You might be interested on using the onInput event handler instead of onkeyup. See this link for more information: Using the oninput event handler with onkeyup/onkeydown as its fallback
I guess you should try with input events, check w3c:
input tag

Categories